/* ============================================================
   Uncanny Studio — Full theme (drop-in)
   Self-contained: tokens + Acumin Pro @font-face + base element
   styles. No @import — everything a single <link> needs.

   NOTE FOR MAINTAINERS: the :root block below MUST stay in sync
   with assets/styles/tokens.css. When you change tokens.css,
   copy the same edits here. (Previously this file used
   @import "./tokens.css", but nested @import fails to resolve
   in some preview / file:// / sandboxed contexts, which made
   the whole theme silently fall back to defaults.)
   ============================================================ */

:root {
  /* === Brand palette (canonical, from brand book) === */
  --uc-clementine:    #FF6427;
  --uc-midnight-blue: #0C073D;
  --uc-just-white:    #FFFFFF;
  --uc-eggplant:      #6572D7;
  --uc-electric-blue: #0D2ACE;
  --uc-seven-seas:    #00AAA1;
  --uc-ghost-pepper:  #69FF8C;

  /* === Tints / shades used across projects === */
  --uc-clementine-hover: #E5541B;
  --uc-clementine-dark:  #E04A10;
  --uc-clementine-24:    #ff64273d;
  --uc-midnight-deep:    #09052D; /* sidebar / panel background */
  --uc-midnight-80:      #0C073Dcc;
  --uc-midnight-60:      #0C073D99;
  --uc-midnight-40:      #0C073D66;
  --uc-midnight-12:      #0C073D1f;
  --uc-white-80:         rgba(255,255,255,.80);
  --uc-white-60:         rgba(255,255,255,.60);
  --uc-white-40:         rgba(255,255,255,.40);
  --uc-white-12:         rgba(255,255,255,.12);
  --uc-white-08:         rgba(255,255,255,.08);

  /* === Semantic aliases (recommended for app code) === */
  --uc-bg:            var(--uc-midnight-blue);
  --uc-surface:       var(--uc-midnight-deep);
  --uc-border:        rgba(101, 114, 215, 0.2); /* Eggplant tint */
  --uc-primary:       var(--uc-clementine);
  --uc-primary-hover: var(--uc-clementine-hover);
  --uc-secondary:     var(--uc-electric-blue);
  --uc-accent:        var(--uc-seven-seas);
  --uc-success:       var(--uc-ghost-pepper);
  --uc-text:          var(--uc-just-white);
  --uc-text-secondary: var(--uc-eggplant);
  --uc-text-muted:    rgba(255,255,255,0.7);
  --uc-input-bg:      rgba(13, 42, 206, 0.1); /* Electric Blue tint */

  /* === Typography === */
  --uc-font-sans:    'Acumin Pro', 'Acumin Variable Concept', 'Inter',
                     ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --uc-font-display: 'Acumin Pro', 'Acumin Variable Concept', 'Barlow Condensed',
                     'Inter', ui-sans-serif, system-ui, sans-serif;

  /* === Motion === */
  --uc-ease-out: cubic-bezier(.22,.61,.36,1);

  /* === Radius === */
  --uc-radius-sm: 4px;
  --uc-radius-md: 8px;
  --uc-radius-lg: 10px;
}

/* ---- Fonts: Acumin Pro (Medium 400/500, Semibold 600/700/800) ---- */
@font-face {
  font-family: 'Acumin Pro';
  src: url('../fonts/AcuminPro-Medium.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url('../fonts/AcuminPro-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url('../fonts/AcuminPro-Semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url('../fonts/AcuminPro-Semibold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url('../fonts/AcuminPro-Semibold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---- Base ---- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--uc-font-sans);
  background: var(--uc-bg);
  color: var(--uc-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--uc-primary); }

button { font-family: inherit; cursor: pointer; }

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--uc-font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); text-transform: uppercase; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.4rem; font-weight: 700; }

/* ---- Eyebrow / label small caps ---- */
.uc-eyebrow {
  font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--uc-text-secondary);
}

/* ---- Buttons ---- */
.uc-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 1rem 2rem;
  border: none; border-radius: var(--uc-radius-md);
  font-family: inherit; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: transform .15s var(--uc-ease-out), background .2s;
}
.uc-btn-primary {
  background: var(--uc-primary); color: var(--uc-just-white);
}
.uc-btn-primary:hover { background: var(--uc-primary-hover); transform: translateY(-2px); }
.uc-btn-primary:active { transform: scale(0.98); }
.uc-btn-secondary {
  background: transparent; color: var(--uc-text);
  border: 2px solid var(--uc-border);
}
.uc-btn-secondary:hover { background: var(--uc-border); }

/* ---- Inputs ---- */
.uc-input {
  width: 100%; padding: 1rem 1.25rem;
  background: var(--uc-input-bg);
  border: 2px solid var(--uc-border); border-radius: var(--uc-radius-md);
  color: var(--uc-text); font-family: inherit; font-size: 1.05rem;
  transition: border-color .2s, background .2s;
}
.uc-input:focus {
  outline: none; border-color: var(--uc-secondary);
  background: rgba(13, 42, 206, 0.15);
}

/* ---- Cards ---- */
.uc-card {
  background: var(--uc-input-bg);
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius-lg);
  padding: 1.5rem;
}
.uc-card-accent { border-left: 3px solid var(--uc-accent); }

/* ---- Status pills ---- */
.uc-status-success {
  background: rgba(105, 255, 140, 0.1);
  border: 2px solid var(--uc-success);
  color: var(--uc-success);
  padding: 1rem 1.25rem; border-radius: var(--uc-radius-md);
  font-weight: 600;
}
.uc-status-error {
  background: rgba(255, 100, 39, 0.1);
  border: 2px solid var(--uc-primary);
  color: var(--uc-primary);
  padding: 1rem 1.25rem; border-radius: var(--uc-radius-md);
  font-weight: 600;
}