/* ============================================================
   LUMINOCITY AI — Design Tokens
   v1.0  ·  April 2026
   ============================================================ */

/* ── Brand font: Inter UI (uploaded) ───────────────────────── */
@font-face {
  font-family: 'Inter UI';
  src: url('../fonts/Inter-UI-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter UI';
  src: url('../fonts/Inter-UI-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter UI';
  src: url('../fonts/Inter-UI-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter UI';
  src: url('../fonts/Inter-UI-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter UI';
  src: url('../fonts/Inter-UI-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter UI';
  src: url('../fonts/Inter-UI-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter UI';
  src: url('../fonts/Inter-UI-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter UI';
  src: url('../fonts/Inter-UI-BlackItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ── Brand font: Inter (uploaded, variable) ─────────────────── */
/* Official Inter variable — covers the 'Inter' family slot so we  */
/* never fall back to CDN.                                         */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('../fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── Brand font: Fraunces (uploaded, variable) ─────────────── */
/* Variable axes: opsz 9–144, wght 100–900, SOFT 0–100, WONK 0–1    */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations'),
       url('../fonts/Fraunces-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype-variations'),
       url('../fonts/Fraunces-Italic-VariableFont_SOFT_WONK_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── Brand font: JetBrains Mono (uploaded) ─────────────────── */
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-Thin.ttf') format('truetype'); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-ThinItalic.ttf') format('truetype'); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-ExtraLightItalic.ttf') format('truetype'); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-LightItalic.ttf') format('truetype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-MediumItalic.ttf') format('truetype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-SemiBoldItalic.ttf') format('truetype'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-BoldItalic.ttf') format('truetype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../fonts/JetBrainsMono-ExtraBoldItalic.ttf') format('truetype'); font-weight:800; font-style:italic; font-display:swap; }

:root {
  /* ── Core palette ─────────────────────────────────────────── */
  --obsidian:       #09090b;   /* bg — deep space */
  --obsidian-2:     #111113;   /* surface */
  --obsidian-3:     #1a1a1f;   /* surface hover */
  --obsidian-4:     #26262c;   /* card borders on hover */

  --nebula-900:     #0a1a2e;   /* deep navy */
  --nebula-700:     #1e3a5f;
  --nebula-500:     #5a9fd4;
  --nebula-300:     #a8caec;   /* beam tint */
  --nebula-200:     #c6e4ff;   /* primary beam */
  --nebula-100:     #d8eeff;   /* spark highlight */

  --gold-900:       #7a5a10;
  --gold-700:       #b88a1c;
  --gold-500:       #eab308;   /* accent */
  --gold-400:       #f5c842;   /* core glow */
  --gold-300:       #facc15;   /* hover */
  --gold-200:       #fde047;   /* shimmer */
  --gold-100:       #fff8e0;   /* core hot */

  /* ── Functional (dark — default) ──────────────────────────── */
  --bg:             var(--obsidian);
  --surface:        var(--obsidian-2);
  --surface-raised: var(--obsidian-3);
  --surface-sunken: #050506;

  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.14);
  --border-hot:     rgba(234, 179, 8, 0.35);

  --text:           #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted:     #71717a;
  --text-dim:       #52525b;

  --accent:         var(--gold-500);
  --accent-hover:   var(--gold-300);
  --accent-ink:     var(--obsidian);      /* text on gold */
  --accent-glow:    rgba(234, 179, 8, 0.15);
  --accent-soft:    rgba(234, 179, 8, 0.08);

  --signal-success: #22c55e;
  --signal-warn:    #f59e0b;
  --signal-error:   #ef4444;
  --signal-info:    var(--nebula-300);

  /* ── Type ─────────────────────────────────────────────────── */
  --font-display:   'Fraunces', Georgia, serif;
  --font-sans:      'Inter UI', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  /* Fluid type scale — display first */
  --fs-eyebrow:     0.7rem;
  --fs-caption:     0.75rem;
  --fs-body-sm:     0.875rem;
  --fs-body:        1rem;
  --fs-body-lg:     1.125rem;
  --fs-lead:        clamp(1.1rem, 1.3vw, 1.3rem);
  --fs-h4:          clamp(1.25rem, 2vw, 1.5rem);
  --fs-h3:          clamp(1.5rem, 3vw, 2rem);
  --fs-h2:          clamp(2rem, 4vw, 2.75rem);
  --fs-h1:          clamp(2.75rem, 6vw, 4.5rem);
  --fs-display:     clamp(3.5rem, 9vw, 7.5rem);
  --fs-monument:    clamp(5rem, 14vw, 14rem);

  --lh-tight:       1.05;
  --lh-snug:        1.2;
  --lh-normal:      1.5;
  --lh-relaxed:     1.7;
  --lh-loose:       1.85;

  --tracking-tight: -0.04em;
  --tracking-snug:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;
  --tracking-wider: 0.14em;

  /* ── Space (8pt with refinements) ─────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ── Radius ───────────────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-full: 9999px;

  /* ── Shadow (minimal; glow replaces most elevation) ───────── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
  --shadow-xl:  0 24px 80px rgba(0,0,0,0.6);

  --glow-gold:   0 0 24px var(--accent-glow);
  --glow-gold-lg: 0 0 48px rgba(234, 179, 8, 0.28);
  --glow-nebula: 0 0 32px rgba(168, 202, 236, 0.18);

  /* ── Motion (organic, not mechanical) ─────────────────────── */
  --dur-breath: 2800ms;    /* core pulse, beam pulse — matches logo */
  --dur-radiate: 3000ms;   /* ring radiation */
  --dur-shimmer: 8000ms;   /* slow gradient drift */
  --dur-atmosphere: 4000ms;

  --ease-organic: cubic-bezier(0.4, 0.0, 0.2, 1);    /* breathing */
  --ease-emerge:  cubic-bezier(0.0, 0.0, 0.2, 1);    /* appear */
  --ease-settle:  cubic-bezier(0.4, 0.0, 0.6, 1);    /* recede */

  /* Avoid these → sliding, bouncing, snapping. We breathe. */

  /* ── Layout ───────────────────────────────────────────────── */
  --content-w: 1180px;
  --prose-w:   680px;
  --wide-w:    1440px;
}

/* ============================================================
   LIGHT THEME — inverts surface/text, keeps accent warm
   ============================================================ */
:root[data-theme="light"] {
  --bg:             #faf8f3;   /* warm paper */
  --surface:        #ffffff;
  --surface-raised: #f5f1e8;
  --surface-sunken: #efe9dc;

  --border:         rgba(10, 10, 14, 0.08);
  --border-strong:  rgba(10, 10, 14, 0.16);
  --border-hot:     rgba(184, 138, 28, 0.4);

  --text:           #0c0b08;
  --text-secondary: #3f3b30;
  --text-muted:     #6e6a5c;
  --text-dim:       #989282;

  --accent:         var(--gold-700);
  --accent-hover:   var(--gold-900);
  --accent-ink:     #fff8e0;
  --accent-glow:    rgba(184, 138, 28, 0.2);
  --accent-soft:    rgba(184, 138, 28, 0.08);

  --signal-info:    var(--nebula-700);

  --shadow-sm:  0 1px 2px rgba(34, 26, 10, 0.08);
  --shadow-md:  0 4px 16px rgba(34, 26, 10, 0.08);
  --shadow-lg:  0 12px 40px rgba(34, 26, 10, 0.12);
  --shadow-xl:  0 24px 80px rgba(34, 26, 10, 0.15);
}

/* ============================================================
   ACCENT ALTERNATES (for the accent-swap tweak)
   ============================================================ */
:root[data-accent="copper"] {
  --accent: #c2704f;
  --accent-hover: #dc8563;
  --gold-400: #d98760;
  --gold-200: #f0b896;
  --gold-100: #fce8d9;
  --accent-glow: rgba(194, 112, 79, 0.2);
}
:root[data-accent="chartreuse"] {
  --accent: #b8d432;
  --accent-hover: #c9e04e;
  --gold-400: #c9e04e;
  --gold-200: #dde77a;
  --gold-100: #f0f6c7;
  --accent-glow: rgba(184, 212, 50, 0.2);
}
:root[data-accent="aurora"] {
  --accent: #5eb0a8;
  --accent-hover: #7ac5bd;
  --gold-400: #7ac5bd;
  --gold-200: #a8dcd5;
  --gold-100: #d8efec;
  --accent-glow: rgba(94, 176, 168, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}