/* ============================================
   MAMONAKU AI — Design tokens (single source of truth)
   間もなく — "the future, arriving."

   ONE canonical token set for the whole site. The immersive homepage and the
   interior pages both build on this file.

   Roles are themeable: the light values below are remapped under
   [data-theme="dark"], so a token name like --charcoal ("primary ink") flips
   meaning between light and dark without any component needing to know.

   The always-dark homepage sets text over cinematic imagery, where colours are
   fixed (not theme-dependent) — those use the --img-* inks below.

   DESIGN DIRECTION: Editorial Contrast. The homepage keeps the cinema; the
   interior pages are a bright editorial system. Both are bound by the one type
   scale and spacing rhythm in this file — that shared spine is what makes the
   switch read as intent rather than inconsistency. Where the homepage genuinely
   needs to be grander, it says so out loud via [data-surface="cinematic"] at the
   bottom of this file, rather than silently redeclaring :root somewhere else.
   ============================================ */

:root {
  /* ---- Raw brand palette (stable, theme-independent) ---- */
  --charcoal: #0D0F13;        /* primary ink */
  --deep-slate: #1C2128;
  --midnight: #26364D;        /* elevated accent panel (both themes) */
  --steel: #3F5B7A;
  --warm-white: #F6F5F2;

  /* Neutrals */
  --graphite: #33383F;        /* body text */
  --stone: #7A8087;           /* secondary/muted text */
  --ash: #B7BDC3;             /* borders & dividers */
  --light-greige: #E6E4E1;    /* section surfaces */
  --off-white: #FBFBFA;       /* page canvas */

  /* Accents — used sparingly */
  --indigo: #596D8C;
  --deep-teal: #29636D;
  --dusty-blue: #8FA6BE;
  --sand: #D6C9B3;
  --copper: #B87A4A;

  /* Fixed inks for text set over cinematic imagery (always-dark homepage) */
  --img-ink: #F6F5F2;
  --img-ink-muted: #CCD2D8;
  --img-accent: #8FA6BE;
  --world-base: #07090D;      /* deepest backdrop base */

  /* ---- Type ---- */
  --font-primary: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Editorial voice: a real serif. This previously read 'IBM Plex Sans', Georgia,
     serif — a sans first, so the serif fallback never rendered and the token
     never did what its name promised. */
  --font-editorial: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* ---- Fluid type scale ----
     Every step hits its minimum at 375px and its maximum at 1920px, and keeps a
     rem term so browser zoom still scales it (a pure-vw size fails WCAG 1.4.4).

     Do NOT reintroduce a root font-size bump to make type bigger. That used to
     live here (106.25%, then 135% above 801px) and it silently rescaled the whole
     rem system: --s-1 rendered at 10.8px instead of 8px, --type-body hit ~23px,
     and because a clamp()'s rem terms scale with root while its vw term does not,
     the fluid curve changed shape and jumped 27% at exactly 801px. If a size is
     wrong, change it HERE — that is the whole point of a scale.

     Two corrections after seeing this on a real 1900px display:

     1. --type-small and --type-eyebrow used to be fixed (14px / 12px). Frozen UI
        text next to a fluid 112px headline reads as a headline with footnotes —
        measured 9:1 against the hero. Everything in the scale is fluid now.
     2. The maxima topped out at 1440, so anything wider just got more whitespace
        and the type looked smaller the bigger the monitor. The ceiling is 1920.

     The sizes below are deliberately more generous than a pure reading scale
     would be, because --measure caps line length independently. That is the
     thing the old root hack could not do: it made text bigger AND lines longer,
     so 23px body copy ran 90 characters. Here, size and measure are separate
     knobs, so type can be comfortable without the lines getting unreadable. */
  --type-display: clamp(2.5rem, 1.65rem + 3.62vw, 6rem);         /* 40 → 96 */
  --type-h1: clamp(2rem, 1.58rem + 1.81vw, 3.75rem);             /* 32 → 60 */
  --type-h2: clamp(1.5rem, 1.26rem + 1.04vw, 2.5rem);            /* 24 → 40 */
  --type-h3: clamp(1.125rem, 1.03rem + 0.39vw, 1.5rem);          /* 18 → 24 */
  --type-lead: clamp(1.125rem, 1.03rem + 0.39vw, 1.5rem);        /* 18 → 24 */
  --type-body: clamp(1rem, 0.94rem + 0.26vw, 1.25rem);           /* 16 → 20 */
  --type-small: clamp(0.875rem, 0.84rem + 0.16vw, 1.03125rem);   /* 14 → 16.5 */
  --type-eyebrow: clamp(0.75rem, 0.72rem + 0.13vw, 0.875rem);    /* 12 → 14 */

  /* ---- Spacing (a real 8px scale, now that root is 100%) ---- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4.5rem;
  --s-7: 7rem;
  --s-8: 10rem;
  --s-9: 14rem;

  /* ---- Section rhythm ----
     Use --s-* for spacing inside a component, these for the gaps between
     sections. Assign by the section's role: rhythm comes from the contrast
     between sections, not from giving every one the same padding. */
  --section-y-sm: clamp(3rem, 5vw, 4.5rem);
  --section-y: clamp(4rem, 8vw, 7rem);
  --section-y-lg: clamp(6rem, 11vw, 10rem);

  /* ---- Measure ----
     Prose is governed by measure, not by the container. --container-max stays
     for full-bleed structure. */
  --measure: 68ch;
  --measure-tight: 58ch;

  /* ---- Layout ---- */
  --container-max: 1440px;
  --container-pad: clamp(1.5rem, 5vw, 5rem);
  --radius: 4px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 220ms;
  --t-med: 480ms;
  --t-slow: 800ms;
}

/* ---- Dark theme (interior pages: toggled via [data-theme="dark"]) ----
   Warm dark palette — "architecture studio at night". The canvas starts at the
   brand's Deep Slate and lifts from there; ink inverts to warm light. */
[data-theme="dark"] {
  /* Canvas tier */
  --off-white: #1C2128;       /* page canvas — brand Deep Slate */
  --warm-white: #252A32;      /* slightly elevated surface */

  /* Inverted ink */
  --charcoal: #F6F5F2;        /* primary text, headings */
  --graphite: #D0D3D8;        /* body text */
  --stone: #ACB1B9;           /* secondary text */
  --ash: #444A53;             /* borders, dividers */

  /* Surface tier */
  --light-greige: #2D333D;    /* section surfaces */
  --deep-slate: #363D48;      /* lifted dark surfaces */

  /* --midnight and the accents (indigo, deep-teal, dusty-blue, sand, copper,
     steel) and the --img-* inks stay as-is in both themes. */
}

/* ---- Cinematic scope (the homepage) ----
   Set on <body data-surface="cinematic"> in index.html. The homepage runs a
   grander display size and a warmer ink than the interior pages, because it is
   set over full-bleed imagery rather than paper.

   This is a named, discoverable scope on purpose. It used to be a second :root
   inside src/experience.css that silently redefined --warm-white from #F6F5F2 to
   a champagne gold — so the same token meant two different colours depending on
   which stylesheet had loaded. That was the actual defect; a token has to mean
   one thing. */
[data-surface="cinematic"] {
  --type-display: clamp(3rem, 1.97rem + 4.4vw, 7.25rem);         /* 48 → 116 */
  --type-h2: clamp(1.875rem, 1.51rem + 1.55vw, 3.375rem);        /* 30 → 54 */

  /* Copy set over a photograph needs more presence than copy set on paper: it
     competes with the image and carries a text-shadow. So the cinematic surface
     runs a step above the interior pages — a scoped decision, not a second scale.
     That includes the UI text: the nav, the buttons and the scroll cue sit next
     to a ~115px headline on a full-screen image, and at the interior sizes they
     read as afterthoughts rather than as the way in. */
  --type-lead: clamp(1.1875rem, 1.08rem + 0.45vw, 1.625rem);     /* 19 → 26 */
  --type-body: clamp(1.0625rem, 0.99rem + 0.32vw, 1.375rem);     /* 17 → 22 */
  --type-small: clamp(0.9375rem, 0.89rem + 0.19vw, 1.125rem);    /* 15 → 18 */
  --type-eyebrow: clamp(0.8125rem, 0.77rem + 0.19vw, 1rem);      /* 13 → 16 */

  /* Champagne over cool-blue scenes: complementary, so the copy reads as an
     intentional pairing rather than stark white. Scoped, not global. */
  --img-ink: #EAD9B4;
  --img-ink-muted: #D2C4A6;
}