/* Studio Grade tokens: starter system.
   Every value here is a measured norm from studio-built sites (see references/).
   The colours and families below are PLACEHOLDERS, not a style. Keeping the warm off-white
   paper + mono labels is the "default look" (references/range.md §3) and the audit flags it.
   Override the :root block with your Design Spine. Use only tokens in components
   (exceptions: values inside product-UI replicas and generated SVG). */

:root{
  /* ---------- Color: one paper, one ink (tiers by opacity), one accent ---------- */
  --paper:      #F7F6F3;              /* warm off-white; never #FFF body text on #000 or vice versa */
  --paper-2:    #EFEDE8;              /* sunken / band */
  --surface:    #FFFFFF;              /* raised */
  --ink-rgb:    23 23 21;             /* tinted near-black */
  --ink:        rgb(var(--ink-rgb));
  --ink-2:      rgb(var(--ink-rgb) / .74);   /* secondary + two-tone heading tail */
  --ink-3:      rgb(var(--ink-rgb) / .62);   /* tertiary, captions: lowest tier that passes AA for small text on light paper */
  --ink-4:      rgb(var(--ink-rgb) / .4);    /* DECORATION or ≥24px text only: fails AA at small sizes */
  --hairline:   rgb(var(--ink-rgb) / .1);
  --hairline-2: rgb(var(--ink-rgb) / .16);
  --accent:     #E5531A;              /* ONE accent. Assign it to 1–2 jobs in the Spine. <5% of pixels */
  --accent-ink: #FFFFFF;              /* text on accent; use dark ink for lime/yellow accents */
  --focus:      var(--ink);               /* the accent is NOT spent by default; assign its 1–2 jobs in the Spine */

  /* ---------- Type families (≤3) ---------- */
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-text:    var(--font-display);   /* set explicitly if you use a separate text face */
  --font-serif:   var(--font-display);   /* .t-lead / .serif-i use this: point it at a real serif only if your system has one */
  --font-mono:    var(--font-display);   /* mono labels are a dev/SaaS/deep-tech device (typography.md §5); point at a mono face only then */

  /* ---------- Type scale (fluid; 390px → 1440px) ---------- */
  --word:     clamp(4.5rem, 1rem + 13vw, 16rem);        /* 1–3 word monument: 9–18vw */
  --display:  clamp(2.5rem, 1.3rem + 3.2vw, 4.5rem);    /* sentence h1: 40 → 72px */
  --h2:       clamp(2rem, 1.35rem + 1.75vw, 3rem);      /* 32 → 48px */
  --h3:       clamp(1.375rem, 1.2rem + .5vw, 1.625rem); /* 22 → 26px */
  --lead:     clamp(1.1875rem, 1.05rem + .4vw, 1.375rem);
  --body:     1rem;          /* 16px marketing; set 14px for luxury commerce */
  --ui:       .875rem;       /* 14px */
  --small:    .8125rem;      /* 13px */
  --label:    .6875rem;      /* 11px uppercase */

  --display-wt: 500;  --display-lh: 1.0;  --display-ls: -0.03em;
  --word-wt:    400;  --word-lh:    .86;  --word-ls:    -0.05em;
  --h2-wt:      500;  --h2-lh:      1.05; --h2-ls:      -0.022em;
  --h3-wt:      500;  --h3-lh:      1.2;  --h3-ls:      -0.012em;
  --label-ls:   .08em;

  /* ---------- Space (fluid ladder, AREA 17 style) ---------- */
  --s-1: .25rem;  --s-2: .5rem;  --s-3: .75rem;  --s-4: 1rem;  --s-5: 1.5rem;  --s-6: 2rem;
  --s-7: clamp(3rem, 2.4rem + 2.4vw, 4rem);
  --s-8: clamp(4rem, 3rem + 4vw, 6rem);
  --s-9: clamp(6rem, 4rem + 5.33vw, 9rem);        /* section padding: 96–144px */
  --s-10: clamp(8rem, 5rem + 8vw, 14rem);         /* the big void between chapters */

  /* ---------- Layout ---------- */
  --container: 1280px;
  --margin: clamp(1.25rem, .4rem + 3.6vw, 5rem);   /* 20px mobile → 80px desktop */
  --cols: 12;
  --gap: clamp(1rem, .7rem + 1vw, 1.5rem);
  --nav-h: 64px;

  /* ---------- Shape (pick ONE button camp) ---------- */
  --r-btn: 6px;          /* 0–4px square camp | 6–10px soft | 9999px pill camp */
  --r-card: 10px;        /* 4–12px; 0 for editorial/luxury */
  --r-media: 12px;
  --btn-h: 44px;  --btn-h-sm: 34px;

  /* ---------- Elevation (rings, not shadows) ---------- */
  --ring: 0 0 0 1px var(--hairline);
  --float: 0 30px 45px -30px rgb(50 50 93 / .25), 0 18px 36px -18px rgb(0 0 0 / .1);  /* product windows ONLY */

  /* ---------- Motion: one house ease ---------- */
  --ease:        cubic-bezier(.16, 1, .3, 1);      /* house: expo-ish out */
  --ease-inout:  cubic-bezier(.76, 0, .24, 1);     /* panels, wipes, page transitions */
  --ease-ui:     cubic-bezier(.4, 0, .2, 1);       /* micro-UI */
  --ease-pop:    cubic-bezier(.34, 1.56, .64, 1);  /* ≤64px pops only */
  --t-fast: 150ms;  --t-ui: 240ms;  --t-reveal: 850ms;  --t-scene: 1200ms;
  --stagger: 90ms;
}

/* Dark scheme. Apply data-theme="dark" on <html> or on any section.
   IMPORTANT: custom properties that reference other custom properties resolve where
   they are DECLARED. So every derived token (--ink, --ink-2, --hairline…) must be
   re-declared here, and the scope must reset color + background, or a dark section
   inherits dark text. Do the same for any light section inside a dark page. */
[data-theme="dark"]{
  --paper: #08090A; --paper-2: #0F1011; --surface: #141516;
  --ink-rgb: 247 248 248;
  --ink:   rgb(var(--ink-rgb));
  --ink-2: rgb(var(--ink-rgb) / .7); --ink-3: rgb(var(--ink-rgb) / .54); --ink-4: rgb(var(--ink-rgb) / .38);
  --hairline: rgb(var(--ink-rgb) / .08); --hairline-2: rgb(var(--ink-rgb) / .14);
  --ring: 0 0 0 1px var(--hairline);
  --float: 0 0 0 1px rgb(0 0 0 / .2), inset 0 0 0 .5px rgb(255 255 255 / .08), 0 2px 32px rgb(0 0 0 / .25);
  color-scheme: dark;
  color: var(--ink);
  background-color: var(--paper);
}
[data-theme="light"]{
  --paper: #F7F6F3; --paper-2: #EFEDE8; --surface: #FFFFFF;
  --ink-rgb: 23 23 21;
  --ink:   rgb(var(--ink-rgb));
  --ink-2: rgb(var(--ink-rgb) / .74); --ink-3: rgb(var(--ink-rgb) / .62); --ink-4: rgb(var(--ink-rgb) / .4);
  --hairline: rgb(var(--ink-rgb) / .1); --hairline-2: rgb(var(--ink-rgb) / .16);
  --ring: 0 0 0 1px var(--hairline);
  color-scheme: light;
  color: var(--ink);
  background-color: var(--paper);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;color-scheme:light}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--body)/1.55 var(--font-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
[data-theme="dark"] body,body[data-theme="dark"]{letter-spacing:.01em}  /* crisper on dark (Raycast) */
img,video,svg,canvas{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1,h2,h3{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--paper)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}

/* ---------- Text-style bundles (use only these) ---------- */
.t-word   {font:var(--word-wt) var(--word)/var(--word-lh) var(--font-display);letter-spacing:var(--word-ls)}
.t-display{font:var(--display-wt) var(--display)/var(--display-lh) var(--font-display);letter-spacing:var(--display-ls)}
.t-h2     {font:var(--h2-wt) var(--h2)/var(--h2-lh) var(--font-display);letter-spacing:var(--h2-ls)}
.t-h3     {font:var(--h3-wt) var(--h3)/var(--h3-lh) var(--font-display);letter-spacing:var(--h3-ls)}
.t-lead   {font:400 var(--lead)/1.42 var(--font-serif);letter-spacing:-.008em}
.t-body   {font:400 var(--body)/1.55 var(--font-text)}
.t-ui     {font:450 var(--ui)/1.4 var(--font-text);letter-spacing:-.006em}
.t-small  {font:400 var(--small)/1.45 var(--font-text)}
.t-label  {font:500 var(--label)/1.2 var(--font-mono);letter-spacing:var(--label-ls);text-transform:uppercase;font-feature-settings:"case"}
.t-num    {font-variant-numeric:tabular-nums lining-nums}
.dim      {color:var(--ink-2)}
.dimmer   {color:var(--ink-3)}
.faint    {color:var(--ink-4)}   /* decoration / large text only */
.serif-i  {font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* ---------- Layout ---------- */
.container{width:min(100% - 2 * var(--margin), var(--container));margin-inline:auto}
.bleed    {width:100%}
.grid     {display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gap)}
.section  {padding-block:var(--s-9)}
.rule     {border:0;border-top:1px solid var(--hairline);margin:0}
.cells    {display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline)}
.cells>*  {background:var(--paper)}
.rails    {border-inline:1px solid var(--hairline)}

/* ---------- Buttons (one camp; optical bottom padding) ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;height:var(--btn-h);padding:1px 20px 0;border-radius:var(--r-btn);
  font:500 var(--ui)/1 var(--font-text);letter-spacing:-.005em;text-decoration:none;cursor:pointer;border:0;
  transition:background-color var(--t-fast) var(--ease-ui),color var(--t-fast) var(--ease-ui),box-shadow var(--t-fast) var(--ease-ui)}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:rgb(var(--ink-rgb) / .86)}
.btn--ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--hairline-2);color:var(--ink)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--ink-3)}
.btn--accent{background:var(--accent);color:var(--accent-ink)}
.btn--sm{height:var(--btn-h-sm);padding-inline:14px;font-size:var(--small)}
.btn .arr{transition:transform var(--t-ui) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hairline-2)}
.link:hover{text-decoration-color:currentColor}

/* ---------- Eyebrow ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--eyebrow-dot, currentColor)}  /* set --eyebrow-dot: var(--accent) only if that is one of the accent's jobs */

/* ---------- Product window (the only real shadow) ---------- */
.window{background:var(--surface);border-radius:12px;box-shadow:var(--ring),var(--float);overflow:hidden}
.fade-b{-webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);mask-image:linear-gradient(to bottom,#000 62%,transparent)}

/* ---------- Art-directed placeholder ---------- */
.ph{background:var(--paper-2) repeating-linear-gradient(45deg,transparent 0 9px,var(--hairline) 9px 10px);
  display:grid;align-items:end;padding:16px;color:var(--ink-3);border-radius:var(--r-media)}

/* ---------- Reveal (pairs with motion.js) ----------
   Hidden state applies only when <html> has class "js" (add it with an inline <script> in <head>).
   No JS, a failed module load, or file:// → content simply shows. */
.js [data-reveal]{opacity:0;filter:blur(8px);transform:translateY(10px);
  transition:opacity var(--t-reveal) var(--ease),filter var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease);
  transition-delay:calc(var(--i, 0) * var(--stagger))}
.js [data-reveal].is-in{opacity:1;filter:blur(0);transform:none}

/* ---------- Utilities ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--margin);top:-100px;z-index:999}
.skip:focus{top:12px}

/* Dev grid overlay: add class "show-grid" to <html> while building */
.show-grid body::before{content:"";position:fixed;inset:0 max(var(--margin), (100% - var(--container)) / 2);z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(to right,rgb(127 255 255 / .18) 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)),transparent 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) + var(--gap)))}

/* ---------- Reduced motion (non-negotiable) ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;filter:none;transform:none}
}