/* ==========================================================================
   PRELUDIA / PRELUDE THEATRE — COLORS & TYPE
   --------------------------------------------------------------------------
   Premium gaming peripherals. Anime-art-meets-minimalist-industrial.
   Shell is monochrome (off-white or deep black); series accents carry the
   emotional color. Chinese descriptors are supporting copy; English product
   names are the primary typographic voice.
   ========================================================================== */

/* ---------- Fonts ----------
   Claude / Apple flavoured type system:
     - Display: Fraunces (Copernicus / NY Serif stand-in, warm modern serif, soft optical)
     - Body / UI: Inter (Styrene / SF Pro stand-in, clean geometric sans)
     - Mono: JetBrains Mono
     - Chinese supporting: Noto Serif SC (pairs with Fraunces) + Noto Sans SC
*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Noto+Serif+SC:wght@300;400;600&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

:root {
  /* ==================================================================
     COLOR — SHELL (unified neutrals across every surface)
     ================================================================== */
  --shell-white:      #F6F4EF; /* off-white page background */
  --shell-paper:      #FFFFFF; /* product card fill on white surfaces */
  --shell-ink:        #0A0A0B; /* near-black body text + hero backgrounds */
  --shell-black:      #000000; /* pure black for full-bleed hero sections */
  --shell-hairline:   #E6E2D9; /* thin dividers on white */
  --shell-hairline-dk:#1C1C1F; /* thin dividers on black */
  --shell-muted:      #8A847A; /* meta / timestamps / caption on white */
  --shell-muted-dk:   #6E6A63; /* meta on black backgrounds */

  /* ==================================================================
     COLOR — SERIES ACCENTS (each product owns a color world)
     ================================================================== */
  /* Chloris Vena — deep indigo / midnight purple, sits on black */
  --vena-ink:         #1B1340; /* deepest hair-shadow indigo */
  --vena-primary:     #3B2A8C; /* core indigo */
  --vena-accent:      #6A5BD6; /* bright subtitle purple on black */
  --vena-glow:        #A9A0F0; /* highlight / water droplet */

  /* Chloris Ume — soft sakura pink on white */
  --ume-primary:      #F4A6B8; /* core sakura pink */
  --ume-accent:       #E87A92; /* subtitle pink on white */
  --ume-ink:          #C45A72; /* deep blossom for emphasis */
  --ume-blush:        #FDE6EC; /* softest tinted background */

  /* Aimstar × Prelude Ume — manga halftone pink with black ink */
  --aimstar-pink:     #FFB3C1; /* halftone flat pink */
  --aimstar-accent:   #F78CA0; /* subtitle */
  --aimstar-ink:      #0A0A0B; /* manga black */

  /* Irys Universal Grip — cool blue gradient with cyan highlights */
  --irys-deep:        #0E2A6B; /* deep packaging blue */
  --irys-primary:     #2F6DF6; /* core brand blue */
  --irys-cyan:        #6FB8FF; /* highlight cyan */
  --irys-ice:         #D9E9FF; /* soft tint background */

  /* ==================================================================
     SEMANTIC COLOR (maps to shell by default; override per-series)
     ================================================================== */
  --bg:               var(--shell-white);
  --bg-elevated:      var(--shell-paper);
  --bg-inverse:       var(--shell-black);
  --fg:               var(--shell-ink);
  --fg-muted:         var(--shell-muted);
  --fg-inverse:       var(--shell-white);
  --hairline:         var(--shell-hairline);
  --accent:           var(--shell-ink);        /* default CTA = black */
  --accent-fg:        var(--shell-white);

  /* ==================================================================
     TYPE — families
     ================================================================== */
  --font-display:  'Fraunces', 'New York', 'Times New Roman', Georgia, serif;
  --font-wordmark: 'Fraunces', 'New York', 'Times New Roman', Georgia, serif;
  --font-serif:    'Fraunces', 'New York', 'Times New Roman', Georgia, serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-cn:       'Noto Serif SC', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ==================================================================
     TYPE — scale (used via semantic rules below)
     ================================================================== */
  --step-hero:   clamp(56px, 9vw, 128px);  /* full-bleed black hero wordmark */
  --step-h1:     clamp(40px, 5.5vw, 72px);
  --step-h2:     clamp(28px, 3.2vw, 44px);
  --step-h3:     20px;
  --step-product:32px;  /* "CHLORIS SERIES" card title */
  --step-sub:    20px;  /* "vena" / "ume" lowercase subtitle */
  --step-body:   16px;
  --step-small:  13px;
  --step-micro:  11px;

  /* ==================================================================
     SPACING / RHYTHM
     ================================================================== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10:128px;

  /* ==================================================================
     RADII — moderate, never pill
     ================================================================== */
  --radius-sm:  4px;
  --radius-md:  8px;    /* buttons, chips */
  --radius-lg:  14px;   /* product cards */
  --radius-xl:  22px;   /* hero tiles */

  /* ==================================================================
     BORDERS / SHADOWS
     ================================================================== */
  --border-hairline: 1px solid var(--hairline);
  --border-ink:      1px solid var(--shell-ink);
  --shadow-card:     0 1px 2px rgba(10,10,11,0.04), 0 8px 24px rgba(10,10,11,0.05);
  --shadow-hero:     0 40px 80px -20px rgba(10,10,11,0.30);
  --glow-vena:       0 0 80px rgba(106,91,214,0.35);
  --glow-irys:       0 0 80px rgba(47,109,246,0.25);

  /* ==================================================================
     MOTION
     ================================================================== */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-exit:     cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --dur-fast:      120ms;
  --dur-base:      220ms;
  --dur-slow:      420ms;
}

/* ========================================================================
   SERIES THEMING — drop onto any container to re-skin with series accent
   ======================================================================== */
[data-series="vena"] {
  --bg: var(--shell-black); --fg: var(--shell-white); --fg-muted: var(--shell-muted-dk);
  --accent: var(--vena-accent); --accent-fg: var(--shell-black);
  --hairline: var(--shell-hairline-dk);
}
[data-series="ume"] {
  --bg: var(--shell-white); --fg: var(--shell-ink); --fg-muted: var(--shell-muted);
  --accent: var(--ume-accent); --accent-fg: var(--shell-white);
}
[data-series="aimstar"] {
  --bg: var(--aimstar-pink); --fg: var(--aimstar-ink); --fg-muted: rgba(10,10,11,0.55);
  --accent: var(--aimstar-ink); --accent-fg: var(--aimstar-pink);
}
[data-series="irys"] {
  --bg: var(--irys-deep); --fg: var(--shell-white); --fg-muted: rgba(255,255,255,0.7);
  --accent: var(--irys-cyan); --accent-fg: var(--irys-deep);
  --hairline: rgba(255,255,255,0.18);
}

/* ========================================================================
   SEMANTIC TYPE RULES
   ======================================================================== */
.t-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  text-transform: none;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.t-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-hero);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: none;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-h1);
  line-height: 1.04;
  letter-spacing: -0.028em;
  text-transform: none;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-h2);
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-transform: none;
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step-h3);
  line-height: 1.3;
  margin: 0;
}
.t-product-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-product);
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: none;
}
.t-product-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step-sub);
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-transform: lowercase;
}
p, .t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-body);
  line-height: 1.55;
  margin: 0;
}
.t-small { font-family: var(--font-body); font-size: var(--step-small); line-height: 1.5; }
.t-micro { font-family: var(--font-body); font-size: var(--step-micro); letter-spacing: 0.08em; text-transform: uppercase; }
.t-cn    { font-family: var(--font-cn); font-weight: 400; letter-spacing: 0.02em; }
code, .t-mono { font-family: var(--font-mono); font-size: 13px; }

/* ========================================================================
   BASE
   ======================================================================== */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
hr { border: 0; border-top: var(--border-hairline); margin: var(--space-7) 0; }
a { color: inherit; text-underline-offset: 3px; }

/* ========================================================================
   UTILITIES
   ======================================================================== */
.u-container   { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-6); }
.u-hairline-t  { border-top: var(--border-hairline); }
.u-hairline-b  { border-bottom: var(--border-hairline); }