/* ============================================================================
   inner guru — design tokens (single source of truth)
   Derived from the Super Stories "Identity Development — Inner Guru v4.0" deck.
   Components consume ONLY these tokens.
   ----------------------------------------------------------------------------
   PALETTE  Strictly neutral: Soft Black, Off White, Pure White. There is NO
            brand accent colour. "Colour is brought through with the use of
            photography" — warm portraits + precious-stone (agate) textures.
            The --stone-* tokens below are for that imagery only, never UI.

   TYPE     One superfamily with a sans cut AND a serif cut, switching between
            the two "in reference to the two worlds being switched between".
            Headlines are the SANS cut with selected words in the SERIF ITALIC
            cut (e.g. "navigate life from PRESENCE"). The lowercase wordmark is
            the serif cut. Body, subheads, labels and buttons are the monospace
            Google Sans Code (buttons all-caps).

   FONTS    Google Sans Code is the real brand mono (self-host as .woff2 for
            production). SFT Schrifted is a PAID typeface and not on disk; until
            it is licensed + self-hosted, we stand in with:
              Serif cut  : Fraunces        (placeholder for SFT Schrifted Serif)
              Sans cut   : Hanken Grotesk  (placeholder for SFT Schrifted Sans)
   ============================================================================ */

:root {
  /* --- Colour — primary palette (the only three brand colours) ------------ */
  --color-ink:    #241e1d;   /* Soft Black — warm near-black (text, inverse bg) */
  --color-paper:  #f0eee7;   /* Off White  — warm paper (page surface)          */
  --color-white:  #ffffff;   /* Pure White — clean white (raised / alt sections) */

  /* Semantic roles (built only from the three above) */
  --surface-page:    var(--color-paper);
  --surface-raised:  var(--color-white);
  --surface-alt:     var(--color-white);   /* alternating sections: paper <-> white */
  --surface-inverse: var(--color-ink);

  --text-primary:    var(--color-ink);
  --text-muted:      color-mix(in srgb, var(--color-ink) 60%, var(--color-paper));
  --text-faint:      color-mix(in srgb, var(--color-ink) 42%, var(--color-paper));
  --text-on-inverse: var(--color-paper);

  --border-subtle:   color-mix(in srgb, var(--color-ink) 13%, transparent);
  --border-strong:   color-mix(in srgb, var(--color-ink) 38%, transparent);

  /* --- Precious-stone palette — IMAGERY ONLY (agate textures), never UI ---- */
  --stone-blue:   #9db8c4;
  --stone-ice:    #cfe0e6;
  --stone-cream:  #ece2d2;
  --stone-gold:   #d8b98a;
  --stone-blush:  #e3cdc2;
  --stone-grey:   #b7bcb2;

  /* --- Typography — three roles ------------------------------------------- */
  /* serif cut  : wordmark + italic accent words inside headlines */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  /* sans cut   : headlines / display */
  --font-sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  /* mono       : body, subheads, labels, buttons, nav, meta */
  --font-mono:  "Google Sans Code", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale */
  --type-display: clamp(2.6rem, 1.2rem + 6vw, 6rem);     /* hero */
  --type-h2:      clamp(1.9rem, 1.25rem + 2.6vw, 3.25rem);
  --type-h3:      clamp(1.2rem, 1.0rem + 0.95vw, 1.6rem);
  --type-lede:    clamp(1.0625rem, 1rem + 0.4vw, 1.3rem); /* subheads / manifesto (mono) */
  --type-body:    clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem); /* body (mono, a touch smaller) */
  --type-small:   0.8125rem;
  --type-label:   0.75rem;       /* eyebrows / nav */

  --leading-display: 1.02;
  --leading-snug:  1.16;
  --leading-body:  1.72;         /* generous for monospace readability */
  --tracking-label: 0.2em;
  --tracking-caps:  0.12em;      /* buttons / nav caps */
  --tracking-tight: -0.02em;     /* large sans headlines */

  --weight-body:    400;
  --weight-medium:  500;

  /* --- Spacing (slow vertical rhythm) ------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  --space-4xl: 9.5rem;

  /* --- Layout ------------------------------------------------------------- */
  --measure: 58ch;          /* monospace runs wide; keep the line a touch shorter */
  --measure-narrow: 44ch;
  --container-max: 80rem;
  --gutter: clamp(1.25rem, 0.5rem + 4vw, 5rem);

  /* --- Radii / borders ---------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --border-hairline: 1px;

  /* --- Elevation ---------------------------------------------------------- */
  --shadow-soft: 0 30px 70px -40px rgba(36, 30, 29, 0.5);

  /* --- Motion (slow, gentle) ---------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 320ms;
  --dur-slow: 850ms;
}