/* ==========================================================================
   SAMMES — Design Tokens
   Single source of truth for colour, type, space, motion.
   ========================================================================== */

:root {
  /* --- Palette: mono base ------------------------------------------------- */
  --ink: #0b0b0c;
  --ink-2: #17171a;
  --ink-3: #2a2a2e;
  --paper: #f4f3ef;
  --paper-2: #e9e7e1;
  --grey-700: #34343a;
  --grey-600: #4a4a4e;
  --grey-500: #6e6e73;
  --grey-400: #8a8a8e;
  --grey-300: #a8a7a2;
  --grey-200: #d8d6d0;
  --grey-100: #eceae5;

  /* --- Accents: one per product ------------------------------------------ */
  --connect: #1b2cff; /* App 01 — connected devices */
  --intel: #c8ff3d; /* App 02 — intelligence    */
  --social: #ff2d6b; /* App 03 — social          */

  /* Contextual accent. Override per section with [data-accent]. */
  --accent: var(--connect);
  --on-accent: var(--paper);

  /* --- Surfaces & lines --------------------------------------------------- */
  --bg: var(--ink);
  --fg: var(--paper);
  --muted: var(--grey-300);
  --line: rgba(244, 243, 239, 0.14);
  --line-strong: rgba(244, 243, 239, 0.28);

  /* --- Accent-relative tints (resolved via color-mix where supported) ----- */
  --accent-16: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-08: color-mix(in srgb, var(--accent) 8%, transparent);

  /* --- Typography --------------------------------------------------------- */
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --tracking-micro: 0.14em;
  --tracking-label: 0.08em;
  --tracking-tight: -0.03em;

  --fs-micro: 0.625rem; /* 10px — decorative labels          */
  --fs-label: 0.6875rem; /* 11px — nav / meta                 */
  --fs-sm: 0.8125rem; /* 13px — captions                   */
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lead: clamp(1.1875rem, 1.1rem + 0.55vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --fs-h2: clamp(2.25rem, 1.6rem + 3vw, 5rem);
  --fs-h1: clamp(3rem, 2rem + 6vw, 8.5rem);
  --fs-display: clamp(3.5rem, 1rem + 18vw, 20rem);
  --fs-quote: clamp(1.5rem, 1.05rem + 2.4vw, 3.25rem);

  --lh-tight: 0.92;
  --lh-snug: 1.08;
  --lh-body: 1.55;

  /* --- Space -------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(4rem, 3rem + 6vw, 9rem);
  --space-3xl: clamp(6rem, 4rem + 10vw, 14rem);

  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --maxw: 1680px;
  --measure: 62ch;
  --measure-tight: 44ch;

  /* --- Structure ---------------------------------------------------------- */
  --rule: 1px;
  --radius: 0px; /* brand is deliberately square            */
  --radius-pill: 999px;
  --meta-bar-h: 3.25rem;

  /* --- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  --z-nav: 100;
  --z-overlay: 200;
}

/* Light sections invert the stage. */
[data-theme="light"] {
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--grey-500);
  --line: rgba(11, 11, 12, 0.12);
  --line-strong: rgba(11, 11, 12, 0.26);
}

/* Accent contexts. */
[data-accent="connect"] {
  --accent: var(--connect);
  --on-accent: var(--paper);
}
[data-accent="intel"] {
  --accent: var(--intel);
  --on-accent: var(--ink);
}
[data-accent="social"] {
  --accent: var(--social);
  --on-accent: var(--paper);
}
[data-accent="none"] {
  --accent: var(--fg);
  --on-accent: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}