/* ==========================================================================
   kevinkaya.com — DESIGN TOKENS
   Kaya & Kevin · 3 July 2027 · Stone Tower Winery
   --------------------------------------------------------------------------
   This file is the SOURCE OF TRUTH for colour, type, spacing and shape.
   Import it once, before every other stylesheet.

   THE ONE RULE
   ------------
   Components never contain a hex value or a raw font name.
   They only ever reference a semantic token.
        Yes  ->  color: var(--color-text);
        No   ->  color: #092F33;      /* breaks dark mode */

   WHY: light mode, dark mode and the nocturne finale are the SAME
   semantic names pointed at different primitives. One hardcoded hex
   and that section stops theming.
   ========================================================================== */


/* ==========================================================================
   1. FONT LOADING  (self-hosted — see DESIGN_SYSTEM.md §2)
   Never link fonts.googleapis.com: it is unreliable from mainland China.
   ========================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;          /* variable weight range */
  font-display: swap;
  src: url('../fonts/fraunces-roman.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/cinzel.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter.woff2') format('woff2-variations');
}


/* ==========================================================================
   2. PRIMITIVES — raw palette. Named by COLOUR.
   Never referenced by components. Only by the semantic layer below.
   ========================================================================== */

:root {
  /* The eight mood-board swatches */
  --sand:            #E4CBA9;   /* base / surfaces          */
  --sky-blue:        #7FC7CC;   /* cool pop, use sparingly  */
  --deep-sea:        #092F33;   /* ink / night / dark anchor*/
  --moss:            #4B5B34;   /* Hobbiton green           */
  --terracotta:      #AF5031;   /* warm accent, links       */
  --cherry-blossom:  #FDABA5;   /* soft accent / spark      */
  --red-wine:        #980204;   /* deep secondary / errors  */
  --sunshine:        #EAB913;   /* hot accent / firelight   */

  /* Derived — the 8 swatches don't cover everything the UI needs */
  --cream:           #F4EDE0;   /* page bg (Sand is too heavy full-bleed) */
  --cream-soft:      #EFE6D6;   /* alternating sections     */
  --border-warm:     #D8C6AA;   /* hairlines on cream       */
  --body-ink:        #243C3E;   /* softened Deep Sea for long reading */
  --deep-sea-60:     #56706F;   /* muted text               */
  --moss-deep:       #3C4A2A;   /* moss hover               */
  --terracotta-deep: #97432A;   /* terracotta hover         */

  /* Dark-theme surfaces */
  --deep-sea-lift:   #123B40;
  --deep-sea-alt:    #0E3438;
  --deep-sea-line:   #234F53;
  --mist:            #A9BCB8;   /* muted text on dark       */
  --sunshine-bright: #FFD65A;
  --ember:           #FF8A5C;
}


/* ==========================================================================
   3. SEMANTIC TOKENS — LIGHT THEME (default)
   Named by JOB. This is all components are allowed to touch.
   ========================================================================== */

:root {

  /* --- Surfaces --- */
  --color-bg:              var(--cream);
  --color-surface:         var(--sand);
  --color-surface-alt:     var(--cream-soft);
  --color-border:          var(--border-warm);

  /* --- Text --- */
  --color-text:            var(--body-ink);      /* long-form reading */
  --color-heading:         var(--deep-sea);      /* full strength     */
  --color-text-muted:      var(--deep-sea-60);
  --color-text-inverse:    var(--cream);

  /* --- Primary action ---------------------------------------------------
     ⚠ PENDING DECISION. Currently Deep Sea (your stated lean, 12.30:1).
     To switch to Moss green (6.34:1, more pastoral), change these 3 lines:
         --color-primary:       var(--moss);
         --color-primary-hover: var(--moss-deep);
         --color-on-primary:    var(--cream);
     Nothing else in the codebase needs to change.                        */
  --color-primary:         var(--deep-sea);
  --color-primary-hover:   #0E4147;
  --color-on-primary:      var(--cream);

  /* --- Secondary action --- */
  --color-secondary:       var(--moss);
  --color-secondary-hover: var(--moss-deep);
  --color-on-secondary:    var(--cream);

  /* --- Accents ---
     Terracotta is DEMOTED from button fill (it only reached 4.49:1) to
     links + eyebrows, where it works far better and earns attention. */
  --color-link:            var(--terracotta);
  --color-link-hover:      var(--terracotta-deep);
  --color-eyebrow:         var(--terracotta);
  --color-accent-soft:     var(--cherry-blossom);
  --color-cool:            var(--sky-blue);

  /* --- Celebration / sparks ---
     Reserved for firework moments ONLY. Their power is scarcity.
     Do not use as UI colours. */
  --color-spark-1:         var(--sunshine);
  --color-spark-2:         var(--terracotta);
  --color-spark-3:         var(--cherry-blossom);

  /* --- Feedback --- */
  --color-danger:          var(--red-wine);
  --color-success:         var(--moss);


  /* ========================================================================
     4. TYPOGRAPHY
     Three faces, three genuinely separate jobs. See DESIGN_SYSTEM.md §3.
     ======================================================================== */

  /* Fraunces covers BOTH display and prose — the opsz axis handles the
     difference automatically. Do not add a fourth text serif. */
  --font-serif:    'Fraunces', Georgia, 'Times New Roman', serif;

  /* Cinzel = text-as-graphic ONLY. Never labels, never body, never UI. */
  --font-graphic:  'Cinzel', Georgia, serif;

  /* Inter = functional only. CJK fallbacks are system fonts on purpose:
     never ship a CJK webfont, they are multi-megabyte. */
  --font-ui:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
                   'Noto Sans SC', sans-serif;

  /* --- Weights --- */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-display:   500;   /* ✓ locked: hero / h1 */
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* --- Type scale ---
     Fluid via clamp(): min, preferred, max. */
  --text-xs:     0.75rem;
  --text-sm:     0.875rem;
  --text-base:   1.0625rem;                          /* body copy */
  --text-lg:     1.22rem;                            /* lead      */
  --text-xl:     clamp(1.35rem, 2.4vw, 1.6rem);
  --text-2xl:    clamp(1.9rem, 3.8vw, 2.7rem);       /* h2        */
  --text-3xl:    clamp(3rem, 8vw, 5.2rem);           /* hero      */

  /* --- Line heights --- */
  --leading-tight:   1.02;   /* hero          */
  --leading-snug:    1.14;   /* headings      */
  --leading-normal:  1.5;    /* UI            */
  --leading-prose:   1.74;   /* body — generous, this is a reading site */

  /* --- Letter spacing --- */
  --tracking-tight:   -0.025em;  /* large display */
  --tracking-normal:   0;
  --tracking-wide:     0.1em;
  --tracking-eyebrow:  0.22em;   /* small caps markers */
  --tracking-graphic:  0.4em;    /* Cinzel compositions */


  /* ========================================================================
     5. SPACING — 8px-ish rhythm
     ======================================================================== */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  1rem;
  --space-4:  1.5rem;
  --space-5:  2.5rem;
  --space-6:  4rem;
  --space-7:  6rem;
  --space-8:  9rem;

  --measure:        64ch;   /* max line length for prose */
  --container:      840px;
  --container-wide: 1100px;


  /* ========================================================================
     6. SHAPE
     ⚠ PENDING DECISION — currently 0 (your lean).
     Rounded corners read as post-2010 software; 0 reads as print, which
     is what the mood board is. If you reverse this, set:
         --radius-sm: 3px;  --radius-md: 6px;  --radius-lg: 12px;
     Changing it here changes buttons, inputs, cards and images together —
     mixing sharp and round looks like a bug, not a choice.
     ======================================================================== */
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-pill: 0;

  --border-width: 1px;

  /* Sharp corners look visually tighter — padding is bumped to compensate */
  --btn-padding:       0.875rem 2rem;
  --btn-padding-small: 0.625rem 1.25rem;
  --input-padding:     0.75rem 0.875rem;


  /* ========================================================================
     7. ELEVATION & MOTION
     Shadows are tinted with Deep Sea, never neutral grey — grey shadows on
     a warm cream page look dirty.
     ======================================================================== */
  --shadow-soft: 0 2px 12px rgba(9, 47, 51, 0.08);
  --shadow-lift: 0 8px 30px rgba(9, 47, 51, 0.14);

  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast:   140ms;
  --duration-base:   220ms;
  --duration-slow:   420ms;
  --duration-scene: 34000ms;   /* firework cart crossing */

  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
}


/* ==========================================================================
   8. DARK THEME — site-wide (future)
   Only semantic tokens are remapped. No component CSS changes.
   Activate with <html data-theme="dark">.
   ========================================================================== */

[data-theme="dark"] {
  --color-bg:              var(--deep-sea);
  --color-surface:         var(--deep-sea-lift);
  --color-surface-alt:     var(--deep-sea-alt);
  --color-border:          var(--deep-sea-line);

  --color-text:            var(--cream);
  --color-heading:         var(--cream);
  --color-text-muted:      var(--mist);
  --color-text-inverse:    var(--deep-sea);

  /* Green recedes on dark — primary becomes firelight */
  --color-primary:         var(--sunshine);
  --color-primary-hover:   var(--sunshine-bright);
  --color-on-primary:      var(--deep-sea);

  --color-secondary:       var(--cherry-blossom);
  --color-secondary-hover: #FFC0B6;
  --color-on-secondary:    var(--deep-sea);

  --color-link:            var(--sunshine);
  --color-link-hover:      var(--sunshine-bright);
  --color-eyebrow:         var(--sunshine);

  --color-spark-1:         var(--sunshine-bright);
  --color-spark-2:         var(--ember);
  --color-spark-3:         var(--cherry-blossom);

  --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.40);
  --shadow-lift: 0 8px 30px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}


/* ==========================================================================
   9. NOCTURNE — the dark firework finale. Available NOW.
   Wrap the closing section: <section class="nocturne"> … </section>
   Same remapping trick as dark mode, scoped to one section, so you get the
   "page ends in darkness with fireworks" moment without shipping full
   dark mode first.
   ========================================================================== */

.nocturne {
  --color-bg:            var(--deep-sea);
  --color-surface:       var(--deep-sea-lift);
  --color-surface-alt:   var(--deep-sea-alt);
  --color-border:        var(--deep-sea-line);

  --color-text:          var(--mist);
  --color-heading:       var(--cream);
  --color-text-muted:    var(--mist);

  --color-primary:       var(--sunshine);
  --color-primary-hover: var(--sunshine-bright);
  --color-on-primary:    var(--deep-sea);

  --color-link:          var(--sunshine);
  --color-eyebrow:       var(--sunshine);

  --color-spark-1:       var(--sunshine-bright);
  --color-spark-2:       var(--ember);
  --color-spark-3:       var(--cherry-blossom);

  background: var(--color-bg);
  color: var(--color-text);
}


/* ==========================================================================
   10. BASE RESET — minimal, token-driven
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-optical-sizing: auto;   /* ← the whole point of the variable font */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-prose);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--color-heading);
  font-optical-sizing: auto;
  margin: 0 0 var(--space-3);
}

h1 { font-size: var(--text-3xl); font-weight: var(--weight-display);
     line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-2xl); font-weight: var(--weight-display);
     line-height: var(--leading-snug); letter-spacing: -0.015em; }
h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold);
     line-height: var(--leading-snug); }

p  { margin: 0 0 var(--space-3); max-width: var(--measure); }

a  { color: var(--color-link); text-decoration-thickness: 1px;
     text-underline-offset: 0.18em; transition: color var(--duration-fast) var(--ease); }
a:hover { color: var(--color-link-hover); }

img, svg, video { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

@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;
  }
}