/* ==========================================================================
   HIM  -  Design tokens
   Authority: decisions/0001-foundations.md, design-systems/him/DESIGN.md
   Layer 1 = primitives (--him-* raw values). Layer 2 = semantic roles, defined
   for light (:root) and dark ([data-theme="dark"]). Layer 3 = component tokens
   (the tri-split doors, the glass nav, the marquee).
   Components and heroes consume ONLY layers 2 and 3. Every literal colour on
   the site lives in this file; a literal anywhere else is a bug (the gate,
   work/verify.mjs, fails on one).
   ========================================================================== */

:root {
  /* ---------- 1. PRIMITIVES : colour ------------------------------------ */
  --him-ink:        #0A0A0A;   /* surfaces  -  not pure black, sits better against photography */
  --him-black:      #000000;   /* type on paper only */
  --him-paper:      #FAFAF8;   /* warm white ground */
  --him-white:      #FFFFFF;

  --him-neutral-50:  #F5F4F1;
  --him-neutral-100: #EBEAE6;
  --him-neutral-200: #DAD8D2;
  --him-neutral-300: #BFBCB4;
  --him-neutral-400: #9A968C;   /* decorative only  -  2.82:1 on paper, fails as text */
  --him-neutral-450: #92918D;   /* 3.02:1  -  the floor for interactive borders */
  --him-neutral-480: #77736C;   /* 4.51:1  -  the floor for secondary text */
  --him-neutral-500: #75716A;
  --him-neutral-600: #565349;
  --him-neutral-700: #3A3833;
  --him-neutral-800: #232220;

  --him-gold:   #C9A227;   /* surfaces, borders, rules  -  NOT text on paper */
  --him-gold-dim: #A8871F;
  /* Gold as TEXT on the paper ground: #C9A227 measures 2.31:1, well under the
     4.5:1 floor. This is the darkest gold that passes. Verified 2026-07-21. */
  --him-gold-text: #8B701B;
  --him-navy:   #1C2E4A;
  --him-olive:  #3D4B3E;

  --him-error:   #8C2F2F;   /* 7.84:1 on paper */
  --him-success: #2F5D42;
  /* The same reds and greens measure 2.4:1 on the ink ground  -  a form error
     nobody can read is a form nobody can complete. Lightened for dark only. */
  --him-error-dark:   #C65555;   /* 4.56:1 on ink */
  --him-success-dark: #4E8464;   /* 4.53:1 on ink */

  /* ---------- 1. PRIMITIVES : spacing (4px base) ------------------------ */
  --him-space-1:  4px;
  --him-space-2:  8px;
  --him-space-3:  12px;
  --him-space-4:  16px;
  --him-space-5:  20px;
  --him-space-6:  24px;
  --him-space-8:  32px;
  --him-space-12: 48px;
  --him-space-16: 64px;   /* ↓ the four section-rhythm steps ↓ */
  --him-space-24: 96px;
  --him-space-32: 128px;
  --him-space-48: 192px;

  /* ---------- 1. PRIMITIVES : radius (square by default) ---------------- */
  --him-radius-none: 0;
  --him-radius-sm:   2px;
  --him-radius-md:   4px;

  /* ---------- 1. PRIMITIVES : border ------------------------------------ */
  --him-border-hairline: 1px;
  --him-border-emphasis: 2px;

  /* ---------- 1. PRIMITIVES : motion ------------------------------------ */
  --him-duration-instant:   120ms;
  --him-duration-base:      320ms;
  --him-duration-slow:      560ms;
  --him-duration-cinematic: 900ms;
  --him-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --him-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- 1. PRIMITIVES : layout ------------------------------------ */
  --him-container-narrow:  720px;
  --him-container-default: 1280px;
  --him-container-wide:    1600px;
  --him-gutter: var(--him-space-6);        /* 20→40→64 via media queries below */
  --him-grid-gap: var(--him-space-8);

  /* ---------- 1. PRIMITIVES : type -------------------------------------- */
  --him-font: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* display-* only (ADR 0001 §2). To drop the serif entirely, set this to
     var(--him-font)  -  that is the whole rollback. */
  --him-font-display: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  --him-font-serif: var(--him-font-display);   /* alias kept for inline styles in the modal */

  --him-weight-light:    300;
  --him-weight-regular:  400;
  --him-weight-medium:   500;
  --him-weight-semibold: 600;

  /* fluid scale  -  perfect fourth at desktop, compressing to ~1.2 on mobile */
  --him-size-display-1: clamp(2.75rem, 1.20rem + 7.8vw, 7.5rem);
  --him-size-display-2: clamp(2.25rem, 1.20rem + 5.2vw, 5.25rem);
  --him-size-display-3: clamp(1.875rem, 1.20rem + 3.4vw, 3.5rem);
  --him-size-headline-1: clamp(1.625rem, 1.15rem + 2.4vw, 2.625rem);
  --him-size-headline-2: clamp(1.375rem, 1.10rem + 1.4vw, 2rem);
  --him-size-title:      clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --him-size-body-lg:    clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
  --him-size-body:       1rem;
  --him-size-eyebrow:    0.75rem;
  --him-size-caption:    0.8125rem;
  --him-text-sm:         0.875rem;
  --him-text-xs:         0.75rem;
  --him-size-micro:      0.6875rem;   /* 11px: nav links, chips, marquee (uppercase, tracked) */

  --him-leading-display: 1.05;
  --him-leading-heading: 1.18;
  --him-leading-body:    1.7;

  --him-tracking-display: -0.015em;   /* serif: less negative than a geometric sans wants */
  --him-tracking-heading: -0.015em;
  --him-tracking-normal:  0;
  --him-tracking-eyebrow: 0.18em;

  --him-measure: 68ch;

  /* ---------- 1. PRIMITIVES : elevation --------------------------------- */
  --him-shadow-overlay: 0 8px 24px rgba(10, 10, 10, 0.08),
                        0 2px 6px  rgba(10, 10, 10, 0.04);
  --him-scrim: rgba(10, 10, 10, 0.4);
  --him-scrim-image: linear-gradient(to top,
                       rgba(10, 10, 10, 0.72) 0%,
                       rgba(10, 10, 10, 0.20) 45%,
                       rgba(10, 10, 10, 0)    75%);

  --him-z-header:  100;
  --him-z-overlay: 200;
  --him-z-modal:   300;
}

/* ==========================================================================
   LAYER 2  -  SEMANTIC ROLES  (light / paper  -  the default)
   Components reference these and nothing above.
   ========================================================================== */

:root,
:root[data-theme="light"] {
  --surface:          var(--him-paper);
  --surface-raised:   var(--him-white);
  /* neutral-100, not -50: at -50 a media well was only ~2% off the paper
     ground and skeletons were effectively invisible. Verified in-browser. */
  --surface-sunken:   var(--him-neutral-100);
  --surface-inverse:  var(--him-ink);
  --surface-depth-navy:  var(--him-navy);
  --surface-depth-olive: var(--him-olive);

  --content:          var(--him-black);
  --content-muted:    var(--him-neutral-500);   /* 4.64:1 */
  --content-subtle:   var(--him-neutral-480);   /* 4.51:1  -  was neutral-400 at 2.82:1 */
  --content-inverse:  var(--him-paper);
  --content-on-depth: var(--him-paper);

  --accent:           var(--him-gold);          /* rules, underlines, non-text */
  --accent-text:      var(--him-gold-text);     /* gold when it carries words */
  --accent-hover:     var(--him-gold-text);

  --border:           var(--him-neutral-200);   /* decorative dividers */
  --border-interactive: var(--him-neutral-450); /* the only affordance on a control  -  3:1 */
  --border-strong:    var(--him-black);
  --border-accent:    var(--him-gold);

  --state-error:      var(--him-error);
  --state-success:    var(--him-success);

  --focus-ring:       var(--him-black);

  --shadow-overlay:   var(--him-shadow-overlay);
  --shadow-modal:     0 20px 40px rgba(10, 10, 10, 0.18);
  --scrim-image:      var(--him-scrim-image);   /* page heroes: photo to ink */
  --scrim-overlay:    var(--him-scrim);         /* behind a drawer or a modal */
}

/* ---------- Layer 2, theme-level roles: glass, photography, marquee -------
   Light. Text over a PHOTO is always light (--him-on-image), in both themes.
   Text on GLASS or on the ground follows the theme (--him-glass-content).    */
:root,
:root[data-theme="light"] {
  --him-glass-bg:         rgba(250, 250, 248, 0.82);   /* paper, frosted */
  --him-glass-bg-strong:  rgba(250, 250, 248, 0.94);   /* scrolled over the page */
  --him-glass-border:     rgba(10, 10, 10, 0.10);
  --him-glass-blur:       20px;
  --him-glass-content:       var(--him-black);
  --him-glass-content-muted: var(--him-neutral-600);   /* 7.4:1 on paper */
  --him-glass-accent:        var(--him-gold-text);     /* 4.6:1 on paper */
  --him-glass-hover-bg:      rgba(10, 10, 10, 0.06);

  --him-on-image:         var(--him-paper);
  --him-on-image-muted:   rgba(250, 250, 248, 0.84);
  --him-on-image-faint:   rgba(250, 250, 248, 0.35);
  --him-on-image-accent:  var(--him-gold);
  /* Chips sit on the brightest part of a photo, so they carry their own ink. */
  --him-on-image-chip-bg: rgba(10, 10, 10, 0.60);   /* 4.9:1 for paper text even on a white photo */
  --him-on-image-chip-border: rgba(250, 250, 248, 0.22);
  --him-on-image-shadow:  0 2px 14px rgba(10, 10, 10, 0.45);

  /* Light keeps the top of the photo clear so the picture reads, and builds the
     ink only where the words sit. Dark lets the ink run from the top. */
  --him-scrim-strong: linear-gradient(180deg,
                        rgba(10, 10, 10, 0.10) 0%,
                        rgba(10, 10, 10, 0) 24%,
                        rgba(10, 10, 10, 0.42) 42%,
                        rgba(10, 10, 10, 0.76) 56%,
                        rgba(10, 10, 10, 0.88) 76%,
                        rgba(10, 10, 10, 0.93) 100%);
  --him-scrim-soft:   linear-gradient(90deg,
                        rgba(10, 10, 10, 0.80) 0%,
                        rgba(10, 10, 10, 0.62) 100%);

  --him-marquee-bg:     var(--him-paper);
  --him-marquee-fg:     var(--him-neutral-600);
  --him-marquee-accent: var(--him-gold-dim);
  --him-marquee-border: var(--him-neutral-200);

  --him-divider-on-image: var(--him-paper);
}

/* Dark: the same roles on the ink ground. Theme-level only (not .him-invert). */
:root[data-theme="dark"] {
  --shadow-overlay:   0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-modal:     0 20px 40px rgba(0, 0, 0, 0.5);

  --him-glass-bg:         rgba(10, 10, 10, 0.85);
  --him-glass-bg-strong:  rgba(10, 10, 10, 0.94);
  --him-glass-border:     rgba(250, 250, 248, 0.12);
  --him-glass-content:       var(--him-paper);
  --him-glass-content-muted: var(--him-neutral-300);
  --him-glass-accent:        var(--him-gold);
  --him-glass-hover-bg:      rgba(250, 250, 248, 0.08);

  --him-scrim-strong: linear-gradient(180deg,
                        rgba(10, 10, 10, 0.42) 0%,
                        rgba(10, 10, 10, 0.12) 26%,
                        rgba(10, 10, 10, 0.56) 42%,
                        rgba(10, 10, 10, 0.84) 56%,
                        rgba(10, 10, 10, 0.92) 76%,
                        rgba(10, 10, 10, 0.96) 100%);
  --him-scrim-soft:   linear-gradient(90deg,
                        rgba(10, 10, 10, 0.86) 0%,
                        rgba(10, 10, 10, 0.70) 100%);

  --him-marquee-bg:     var(--him-neutral-800);
  --him-marquee-fg:     var(--him-neutral-300);
  --him-marquee-accent: var(--him-gold);
  --him-marquee-border: var(--him-neutral-700);

  --him-divider-on-image: rgba(250, 250, 248, 0.12);
}

/* ==========================================================================
   LAYER 3  -  COMPONENT TOKENS (read only semantic roles above)
   ========================================================================== */
:root {
  --him-nav-height: 64px;

  /* Tri-split doors */
  --him-door-ground:        var(--surface);
  --him-door-gutter:        3px;              /* light: doors framed by paper */
  --him-door-divider:       var(--him-divider-on-image);
  --him-door-scrim:         var(--him-scrim-strong);
  --him-door-scrim-collapsed: var(--him-scrim-soft);
  --him-door-image-filter:        contrast(1.04) brightness(0.92);
  --him-door-image-filter-active: contrast(1.06) brightness(1);
  --him-door-ease: cubic-bezier(0.25, 1, 0.3, 1);
}
:root[data-theme="dark"] {
  --him-door-gutter:        1px;              /* dark: a hairline between doors */
  --him-door-image-filter:        contrast(1.1) brightness(0.72);
  --him-door-image-filter-active: contrast(1.12) brightness(0.85);
}
@media (max-width: 640px) { :root { --him-nav-height: 56px; } }

/* ---------- Dark / ink ground -------------------------------------------
   Used site-wide via [data-theme="dark"] and per-section via .him-invert.
   Only these roles change; no component is aware a theme exists.          */

:root[data-theme="dark"],
.him-invert {
  --surface:          var(--him-ink);
  --surface-raised:   var(--him-neutral-800);
  --surface-sunken:   #050505;
  --surface-inverse:  var(--him-paper);

  --content:          var(--him-paper);
  --content-muted:    var(--him-neutral-300);
  --content-subtle:   var(--him-neutral-400);
  --content-inverse:  var(--him-black);

  --accent:           var(--him-gold);
  --accent-text:      var(--him-gold);          /* 8.18:1 on ink  -  passes as text */
  --accent-hover:     #DDB93F;

  --state-error:      var(--him-error-dark);
  --state-success:    var(--him-success-dark);

  --border:           var(--him-neutral-700);
  --border-interactive: var(--him-neutral-400); /* 6.28:1 on ink */
  --border-strong:    var(--him-paper);

  --focus-ring:       var(--him-paper);
}

/* ---------- Responsive gutters ------------------------------------------ */
@media (min-width: 768px)  { :root { --him-gutter: var(--him-space-12); } }
@media (min-width: 1024px) { :root { --him-gutter: var(--him-space-16); } }

/* ---------- Reduced motion ----------------------------------------------
   ADR 0001 §8: all motion degrades to opacity-only at instant duration.   */
@media (prefers-reduced-motion: reduce) {
  :root {
    --him-duration-base:      var(--him-duration-instant);
    --him-duration-slow:      var(--him-duration-instant);
    --him-duration-cinematic: var(--him-duration-instant);
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--him-duration-instant) !important;
    scroll-behavior: auto !important;
  }
}