/* ════════════════════════════════════════════════════════════════
   HYCON DESIGN TOKENS
   Source of truth: hycon-tokens.json

   Layers:
   1. @font-face declarations
   2. Raw scale tokens (colors, space, radius, shadow, blur)
   3. Typography scale tokens
   4. Brand constants (gold, discord, role pills)
   5. Motion tokens
   6. Semantic tokens — dark theme (surfaces, text, borders)
   7. Semantic tokens — light theme
   8. Component tokens (glass, nav, segmented, footer)
   9. Hero forced-dark overrides
════════════════════════════════════════════════════════════════ */


/* ─── 1. FONT FACES ──────────────────────────────────────────── */

/* Caudex — display/heading font (serif) */
@font-face {
  font-family: 'Caudex';
  src: url('../brand_assets/fonts/Caudex-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caudex';
  src: url('../brand_assets/fonts/Caudex-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caudex';
  src: url('../brand_assets/fonts/Caudex-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Caudex';
  src: url('../brand_assets/fonts/Caudex-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Inter Display — body/UI font (sans-serif) */
@font-face {
  font-family: 'Inter Display';
  src: url('../brand_assets/fonts/InterDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('../brand_assets/fonts/InterDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Display';
  src: url('../brand_assets/fonts/InterDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ─── 2. RAW SCALE TOKENS ────────────────────────────────────── */

:root {
  /* ── Zinc (dark-theme primary palette) ── */
  --zinc-50:  #FAFAFA;
  --zinc-100: #F4F4F5;
  --zinc-200: #E4E4E7;
  --zinc-300: #D4D4D8;
  --zinc-400: #9F9FA9;
  --zinc-500: #71717B;
  --zinc-600: #52525C;
  --zinc-700: #3F3F46;
  --zinc-800: #27272A;
  --zinc-900: #18181B;
  --zinc-950: #09090B;

  /* ── Stone (light-theme primary palette) ── */
  --stone-50:  #FAFAF9;
  --stone-100: #F5F5F4;
  --stone-200: #E7E5E4;
  --stone-300: #D6D3D1;
  --stone-400: #A6A09B;
  --stone-500: #79716B;
  --stone-600: #57534D;
  --stone-700: #44403B;
  --stone-800: #292524;
  --stone-900: #1C1917;
  --stone-950: #0C0A09;

  /* ── Red (danger states) ── */
  --red-400: #FF6467;
  --red-500: #FB2C36;
  --red-600: #E7000B;
  --red-700: #C10007;

  /* ── Green (success + helper pill) ── */
  --green-400: #05DF72;
  --green-500: #00C950;
  --green-600: #00A63E;
  --green-700: #008236;

  /* ── Blue (developer pill) ── */
  --blue-500: #2B7FFF;
  --blue-600: #155DFC;

  /* ── Violet (creative pill) ── */
  --violet-500: #8E51FF;
  --violet-700: #7008E7;

  /* ── Emerald (patch-notes category) ── */
  --emerald-400: #00D492;
  --emerald-600: #009966;

  /* ── Indigo (server-event category) ── */
  --indigo-500: #615FFF;
  --indigo-700: #432DD7;

  /* ── Orange (maintenance category) ── */
  --orange-500: #FF6900;
  --orange-700: #CA3500;

  /* ── Purple (server-event light variant) ── */
  --purple-900: #59168B;

  /* ── Base ── */
  --base-white:       #FFFFFF;
  --base-black:       #000000;
  --base-transparent:  transparent;


  /* ── Spacing scale (rem for scalability) ── */
  --space-1:    0.0625rem;  /*  1px */
  --space-2:    0.125rem;   /*  2px */
  --space-3:    0.25rem;    /*  4px */
  --space-4:    0.5rem;     /*  8px */
  --space-5:    0.75rem;    /* 12px */
  --space-6:    1rem;       /* 16px */
  --space-7:    1.25rem;    /* 20px */
  --space-8:    1.5rem;     /* 24px */
  --space-9:    1.75rem;    /* 28px */
  --space-10:   2rem;       /* 32px */
  --space-11:   2.25rem;    /* 36px */
  --space-12:   2.5rem;     /* 40px */
  --space-13:   2.75rem;    /* 44px */
  --space-14:   3rem;       /* 48px */
  --space-15:   3.5rem;     /* 56px */
  --space-16:   4rem;       /* 64px */
  --space-17:   4.5rem;     /* 72px */
  --space-18:   5rem;       /* 80px */
  --space-19:   6rem;       /* 96px */
  --space-20:   7rem;       /* 112px */
  --space-21:   8rem;       /* 128px */
  --space-22:   9rem;       /* 144px */
  --space-23:   10rem;      /* 160px */
  --space-none: 0;


  /* ── Border radius ── */
  --radius-none: 0;
  --radius-2xs:  1px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;


  /* ── Drop shadows (layered) ── */
  --shadow-3xs: 0 1px 2px #0000000D, 0 0px 1px #00000009;
  --shadow-2xs: 0 4px 8px #00000013, 0 1px 7px #0000000E;
  --shadow-xs:  0 7px 15px #0000001A, 0 3px 12px #00000012;
  --shadow-sm:  0 9px 22px #00000020, 0 4px 18px #00000016;
  --shadow-md:  0 12px 29px #00000026, 0 5px 23px #0000001B;
  --shadow-lg:  0 15px 35px #0000002D, 0 6px 28px #0000001F;
  --shadow-xl:  0 18px 42px #00000033, 0 7px 34px #00000024;

  /* ── Inner shadows ── */
  --inset-xs: inset 0 0 0 1px #0000000D;
  --inset-sm: inset 0 1px 3px 1px #00000020;
  --inset-md: inset 0 3px 6px 1px #00000033;

  /* ── Blur ── */
  --blur-xs: 4px;
  --blur-sm: 8.7px;
  --blur-md: 13.3px;
  --blur-lg: 18px;


  /* ── Breakpoints (reference values — used in @media) ── */
  /* sm: 640px | md: 768px | lg: 1024px | xl: 1280px | 2xl: 1536px */


  /* ─── 3. TYPOGRAPHY SCALE ─────────────────────────────────── */

  /* Font stacks */
  --font-sans:    'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Caudex', Georgia, 'Times New Roman', serif;
  --font-caption: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Heading scale (Caudex) — sizes in rem */
  --heading-2xl: 3.8125rem;  /* 61px */
  --heading-xl:  3rem;       /* 48px */
  --heading-lg:  2.4375rem;  /* 39px */
  --heading-md:  1.9375rem;  /* 31px */
  --heading-sm:  1.5625rem;  /* 25px */
  --heading-xs:  1.25rem;    /* 20px */

  /* Heading line-height (from token: 1.2 baseline) */
  --heading-lh: 1.2;

  /* Body scale (Inter Display) — sizes in rem */
  --body-md: 1rem;      /* 16px */
  --body-sm: 0.875rem;  /* 14px */
  --body-xs: 0.75rem;   /* 12px */

  /* Body line-height (from token: 1.2 baseline, components override) */
  --body-lh: 1.2;


  /* ─── 4. BRAND CONSTANTS ──────────────────────────────────── */

  /* Primary brand gold (custom — not in scale) */
  --brand-gold:        #c9a048;
  --brand-gold-subtle: rgba(201,160,72,0.12);
  --brand-gold-glow:   rgba(201,160,72,0.10);

  /* Discord brand (external — not in scale) */
  --brand-discord:       #5865F2;
  --brand-discord-hover: #4752C4;

  /* Role pill colors */
  --pill-founder:   var(--brand-gold);
  --pill-developer: var(--blue-500);
  --pill-creative:  var(--violet-500);
  --pill-helper:    var(--green-500);

  /* News category colors */
  --cat-patch-notes:   var(--emerald-400);
  --cat-server-event:  var(--indigo-500);
  --cat-announcement:  var(--brand-gold);
  --cat-maintenance:   var(--orange-500);


  /* ─── 5. MOTION ───────────────────────────────────────────── */

  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ─── 6. DARK THEME (default) ─────────────────────────────────── */

html[data-theme="dark"] {
  /* Surfaces */
  --color-bg:        var(--zinc-950);
  --color-elevated:  var(--zinc-900);
  --color-floating:  var(--zinc-800);
  --color-overlay:   rgba(9, 9, 11, 0.82);

  /* Borders (white transparency for dark bg) */
  --border-subtle:   rgba(255,255,255, 0.07);
  --border-default:  rgba(255,255,255, 0.10);
  --border-strong:   rgba(255,255,255, 0.16);

  /* Text */
  --text-primary:    var(--zinc-50);
  --text-secondary:  var(--zinc-400);
  --text-muted:      var(--zinc-600);

  /* Elevated surface text — contrast-safe on zinc-900 bg */
  --text-on-elevated-secondary: var(--zinc-300);
  --text-on-elevated-muted:     var(--zinc-400);

  /* Interactive */
  --danger:  var(--red-400);
  --success: var(--green-500);

  /* Panel fill RGB (used by initPanelReveal JS) */
  --panel-dark-r: 9;   --panel-dark-g: 9;   --panel-dark-b: 11;
  --panel-light-r: 250; --panel-light-g: 250; --panel-light-b: 249;

  /* Nav glass */
  --nav-glass:        rgba(9, 9, 11, 0.65);
  --nav-border:       rgba(255,255,255, 0.07);
  --nav-glass-light:  rgba(250, 250, 249, 0.65);
  --nav-border-light: rgba(0,0,0, 0.08);

  /* Segmented control */
  --seg-bg:          rgba(255,255,255, 0.06);
  --seg-border:      rgba(255,255,255, 0.10);
  --seg-text:        rgba(255,255,255, 0.50);
  --seg-active-bg:   rgba(255,255,255, 0.11);
  --seg-active-text: rgba(255,255,255, 0.95);
  --seg-hover-text:  rgba(255,255,255, 0.80);
  --seg-hover-bg:    rgba(255,255,255, 0.05);

  /* Glass buttons */
  --glass-bg:        linear-gradient(160deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 100%);
  --glass-border:    rgba(255,255,255, 0.20);
  --glass-inset-top: rgba(255,255,255, 0.28);
  --glass-inset-bot: rgba(0,0,0, 0.14);
  --glass-shadow:    var(--shadow-2xs);
  --glass-hover-bg:  linear-gradient(160deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.12) 100%);

  /* Scrollbar */
  --scrollbar-thumb: var(--zinc-800);

  /* Semantic shadows (theme-aware) */
  --shadow-image:       0px 23px 20px rgba(3,7,18,0.07), 0px 91px 79px rgba(3,7,18,0.13);
  --shadow-card-hover:  0 8px 28px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.40);
  --shadow-feature-img: 0 4px 8px rgba(0,0,0,0.15), 0 16px 40px rgba(0,0,0,0.20);

  /* Footer */
  --footer-social-bg:    rgba(255,255,255, 0.05);
  --footer-social-hover: rgba(255,255,255, 0.10);
  --footer-ip-bg:        rgba(255,255,255, 0.04);
  --footer-ip-hover:     rgba(255,255,255, 0.07);

  /* Light-on-dark pill overrides (same as default for dark) */
  --pill-founder-text:   var(--brand-gold);
  --pill-developer-text: var(--blue-500);
  --pill-creative-text:  var(--violet-500);
  --pill-helper-text:    var(--green-500);

  /* Category text overrides */
  --cat-patch-notes-text:  var(--emerald-400);
  --cat-server-event-text: var(--indigo-500);
  --cat-announcement-text: var(--brand-gold);
  --cat-maintenance-text:  var(--orange-500);

  /* Danger / Success text (glass buttons) */
  --danger-text:  var(--red-400);
  --success-text: var(--green-400);

  /* Toaster */
  --toaster-bg:           rgba(39, 39, 42, 0.90); /* zinc-800 @ 90% */
  --toaster-border:       rgba(255,255,255, 0.13);
  --toaster-icon-bg:      rgba(0, 201, 80, 0.20); /* green-500 @ 20% */
  --toaster-icon-border:  rgba(0, 201, 80, 0.35); /* green-500 @ 35% */
  --toaster-icon-color:   var(--green-400);
}


/* ─── 7. LIGHT THEME ──────────────────────────────────────────── */

html[data-theme="light"] {
  /* Surfaces */
  --color-bg:        var(--stone-50);
  --color-elevated:  var(--base-white);
  --color-floating:  var(--stone-100);
  --color-overlay:   rgba(250, 250, 249, 0.82);

  /* Borders (black transparency for light bg) */
  --border-subtle:   rgba(0,0,0, 0.06);
  --border-default:  rgba(0,0,0, 0.10);
  --border-strong:   rgba(0,0,0, 0.16);

  /* Text */
  --text-primary:    var(--zinc-900);
  --text-secondary:  var(--zinc-600);
  --text-muted:      var(--zinc-400);

  /* Elevated surface text — on white bg, same as base (high contrast already) */
  --text-on-elevated-secondary: var(--zinc-600);
  --text-on-elevated-muted:     var(--zinc-400);

  /* Interactive */
  --danger:  var(--red-600);
  --success: var(--green-600);

  /* Panel fill RGB (stone.50 → 250,250,249) */
  --panel-dark-r: 24;  --panel-dark-g: 24;  --panel-dark-b: 27;
  --panel-light-r: 250; --panel-light-g: 250; --panel-light-b: 249;

  /* Nav glass */
  --nav-glass:        rgba(250, 250, 249, 0.65);
  --nav-border:       rgba(0,0,0, 0.06);
  --nav-glass-light:  rgba(250, 250, 249, 0.65);
  --nav-border-light: rgba(0,0,0, 0.08);

  /* Segmented control */
  --seg-bg:          rgba(0,0,0, 0.04);
  --seg-border:      rgba(0,0,0, 0.08);
  --seg-text:        rgba(0,0,0, 0.40);
  --seg-active-bg:   rgba(0,0,0, 0.07);
  --seg-active-text: rgba(0,0,0, 0.85);
  --seg-hover-text:  rgba(0,0,0, 0.60);
  --seg-hover-bg:    rgba(0,0,0, 0.03);

  /* Glass buttons (darker glass for light bg) */
  --glass-bg:        linear-gradient(160deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.02) 100%);
  --glass-border:    rgba(0,0,0, 0.12);
  --glass-inset-top: rgba(255,255,255, 0.65);
  --glass-inset-bot: rgba(0,0,0, 0.06);
  --glass-shadow:    0 2px 6px rgba(0,0,0, 0.08);
  --glass-hover-bg:  linear-gradient(160deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.04) 100%);

  /* Scrollbar */
  --scrollbar-thumb: var(--zinc-300);

  /* Semantic shadows (lighter for light theme) */
  --shadow-image:       0px 23px 20px rgba(0,0,0,0.04), 0px 91px 79px rgba(0,0,0,0.08);
  --shadow-card-hover:  0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-feature-img: 0 4px 8px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.08);

  /* Footer */
  --footer-social-bg:    rgba(0,0,0, 0.04);
  --footer-social-hover: rgba(0,0,0, 0.08);
  --footer-ip-bg:        rgba(0,0,0, 0.03);
  --footer-ip-hover:     rgba(0,0,0, 0.06);

  /* Dark-on-light pill overrides (deeper for contrast) */
  --pill-founder-text:   #96782e;
  --pill-developer-text: var(--blue-600);
  --pill-creative-text:  var(--violet-700);
  --pill-helper-text:    var(--green-600);

  /* Category text overrides (deeper for contrast) */
  --cat-patch-notes-text:  var(--green-700);
  --cat-server-event-text: var(--purple-900);
  --cat-announcement-text: #96782e;
  --cat-maintenance-text:  var(--red-700);
}


/* ─── 8. HERO FORCED DARK ─────────────────────────────────────── */
/* Hero always renders in dark mode regardless of theme setting */

[data-theme] .hero,
[data-theme] #heroSection,
[data-theme] .slider-overlay,
[data-theme] .slider-nav-wrap,
[data-theme] #characterContainer,
[data-theme] #characterBalloon {
  --color-bg:        var(--zinc-950);
  --color-elevated:  var(--zinc-900);
  --color-floating:  var(--zinc-800);
  --text-primary:    var(--zinc-50);
  --text-secondary:  var(--zinc-400);
  --text-muted:      var(--zinc-600);
  --border-subtle:   rgba(255,255,255, 0.07);
  --border-default:  rgba(255,255,255, 0.10);
  --border-strong:   rgba(255,255,255, 0.16);
  --seg-bg:          rgba(255,255,255, 0.06);
  --seg-border:      rgba(255,255,255, 0.10);
  --seg-text:        rgba(255,255,255, 0.50);
  --seg-active-bg:   rgba(255,255,255, 0.11);
  --seg-active-text: rgba(255,255,255, 0.95);
  --seg-hover-text:  rgba(255,255,255, 0.80);
  --seg-hover-bg:    rgba(255,255,255, 0.05);
  --glass-bg:        linear-gradient(160deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 100%);
  --glass-border:    rgba(255,255,255, 0.20);
  --glass-inset-top: rgba(255,255,255, 0.28);
  --glass-inset-bot: rgba(0,0,0, 0.14);
  --glass-shadow:    var(--shadow-2xs);
  --glass-hover-bg:  linear-gradient(160deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.12) 100%);
}