/* =============================================================
   Mixar — Colors & Type
   Core tokens for the Mixar brand system.
   Spatial engine for video/game workflows. Cinematic.
   ============================================================= */

/* ---------- Fonts ---------------------------------------------
   Brand fonts (uploaded):
   - Manrope (body/display sans)
   - UtilitySans (available, not used by default)
   The deck uses Manrope across display, body, labels, and counters.
----------------------------------------------------------------*/

@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-Light.ttf')      format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-Regular.ttf')    format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-Medium.ttf')     format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-SemiBold.ttf')   format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-Bold.ttf')       format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('fonts/Manrope-ExtraBold.ttf')  format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

@font-face { font-family: 'Utility Sans'; src: url('fonts/UtilitySansTest-Light.otf')    format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Utility Sans'; src: url('fonts/UtilitySansTest-Regular.otf')  format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Utility Sans'; src: url('fonts/UtilitySansTest-SemiBold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Utility Sans'; src: url('fonts/UtilitySansTest-Bold.otf')     format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Brand ---------- */
  --brand-green:      #80bf49;   /* Logo gradient start */
  --brand-green-mid:  #67be5f;
  --brand-teal-mid:   #2abc99;
  --brand-teal:       #00bbc2;   /* Logo gradient end */

  --brand-gradient:
    linear-gradient(135deg,
      #80bf49 0%,
      #67be5f 22%,
      #2abc99 70%,
      #00bbc2 100%);

  --brand-gradient-soft:
    linear-gradient(135deg,
      rgba(128, 191, 73, 0.18) 0%,
      rgba(42,  188, 153, 0.18) 60%,
      rgba(0,   187, 194, 0.18) 100%);

  /* ---------- Neutrals (dark-first) ---------- */
  --ink-000: #000000;
  --ink-950: #06090a;   /* App canvas (cinematic black-green) */
  --ink-900: #0b1012;   /* Surface base */
  --ink-850: #0f1618;   /* Surface raised */
  --ink-800: #131b1e;   /* Surface overlay */
  --ink-700: #1a2326;   /* Divider / input bg */
  --ink-600: #2a3538;   /* Hairline borders */
  --ink-500: #415055;
  --ink-400: #6a7a80;
  --ink-300: #93a3a9;
  --ink-200: #c2ccd0;
  --ink-100: #e5ebed;
  --ink-050: #f2f5f6;
  --ink-000-light: #ffffff;

  /* ---------- Semantic Color ---------- */
  --fg-1:          #ffffff;         /* Primary on dark */
  --fg-2:          #c2ccd0;         /* Secondary */
  --fg-3:          #6a7a80;         /* Tertiary / meta */
  --fg-muted:      #415055;         /* Disabled */
  --fg-accent:     #2abc99;         /* Teal accent (body use) */
  --fg-accent-alt: #80bf49;         /* Green accent */
  --fg-on-accent:  #06090a;         /* Text on brand gradient */

  --bg-canvas:    #06090a;
  --bg-surface:   #0b1012;
  --bg-raised:    #0f1618;
  --bg-overlay:   #131b1e;
  --bg-input:     #1a2326;
  --bg-hover:     rgba(255, 255, 255, 0.04);
  --bg-press:     rgba(255, 255, 255, 0.08);
  --bg-selected:  rgba(42, 188, 153, 0.12);

  --border-1:     rgba(255, 255, 255, 0.08);   /* Hairline */
  --border-2:     rgba(255, 255, 255, 0.14);   /* Card border */
  --border-3:     rgba(255, 255, 255, 0.22);   /* Strong */
  --border-accent: rgba(42, 188, 153, 0.55);

  /* ---------- Status ---------- */
  --status-success: #2abc99;
  --status-warn:    #f0b042;
  --status-error:   #f06060;
  --status-info:    #00bbc2;

  /* ---------- Elevation (soft, cinematic) ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-3: 0 14px 40px rgba(0,0,0,0.5),  0 2px 6px rgba(0,0,0,0.4);
  --shadow-4: 0 32px 80px rgba(0,0,0,0.55);
  --shadow-glow-teal:  0 0 0 1px rgba(42,188,153,0.32), 0 0 18px rgba(42,188,153,0.18);
  --shadow-glow-green: 0 0 0 1px rgba(128,191,73,0.32), 0 0 18px rgba(128,191,73,0.18);
  --shadow-inset:      inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---------- Spacing scale (4-based) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Typography ---------- */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', sans-serif; /* tight, heavy weight for display */
  --font-utility: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   60px;
  --fs-5xl:   84px;
  --fs-6xl:   112px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.5;
  --lh-loose: 1.65;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     120ms;
  --dur-base:     220ms;
  --dur-slow:     420ms;

  /* ---------- Blur ---------- */
  --blur-backdrop: saturate(140%) blur(20px);
}

/* ---------- Semantic / element-level styles -----------------*/

html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mx-display, h1.mx-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.mx-h1, h1 {
  font-weight: 700;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.mx-h2, h2 {
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

.mx-h3, h3 {
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

.mx-h4, h4 {
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}

.mx-h5, h5 {
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.mx-body, p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.mx-body-lg { font-size: var(--fs-md); line-height: var(--lh-body); }
.mx-body-sm { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--fg-2); }
.mx-caption { font-size: var(--fs-xs); line-height: 1.4; color: var(--fg-3); }

.mx-eyebrow {
  font-family: var(--font-utility);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-accent);
}

.mx-utility {
  font-family: var(--font-utility);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.mx-mono, code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

.mx-gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Scrollbar (dark refined) ---------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-600);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-500); background-clip: content-box; }

/* ---------- Selection ---------- */
::selection { background: rgba(42, 188, 153, 0.35); color: #fff; }