/* SeerAI website design tokens. One source of truth for colour, type, space and motion.
   Port these 1:1 into the Next.js build (CSS variables or a Tailwind theme). */
:root {
  /* colour */
  --ink: #1c1b1d; /* text, primary button */
  --ink-2: #3d3c40; /* secondary text */
  --mute: #8a8790; /* labels, nav */
  --ghost: #c9c5c1; /* lines, placeholders */
  --paper: #ffffff; /* page */
  --stone: #e6e3df; /* hero band, panels */
  --stone-2: #d9d5d0; /* panel borders, tile ground */
  --slate: #6d6f75; /* the one dark-grey panel */
  --night: #1c1b1d; /* story stage ground */
  --cream: #fcf5e9; /* brand cream: soft buttons, text on dark */
  --amber: #fca53f; /* brand amber: logo and live dot only */
  /* team photo backdrops, picked for each person in /admin (Team) */
  --backdrop-blue: #7f93a7;
  --backdrop-clay: #b48b77;
  --backdrop-sage: #8c9d86;
  --backdrop-mauve: #97829a;
  --backdrop-teal: #6f8b8a;
  --veil: rgba(255, 255, 255, 0.72); /* text fill veil */

  /* type: one family, two weights (400 body, 500 everything else) */
  --font: 'Funnel Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-hero: clamp(44px, 4.7vw, 90px);
  --fs-display: clamp(30px, 2.6vw, 50px); /* section titles, fill text */
  --fs-title: clamp(22px, 1.6vw, 30px);
  --fs-lead: clamp(17px, 1.15vw, 22px);
  --fs-body: 16px;
  --fs-small: 13px;

  /* full type ladder (style guide names). Desktop size in the comment; shrinks on small screens */
  --t-hero: clamp(48px, 4.7vw, 90px); /* 90 / 1.0 / 500 */
  --t-h1: clamp(40px, 3.4vw, 64px); /* 64 / 1.05 / 500 */
  --t-h2: clamp(32px, 2.6vw, 50px); /* 50 / 1.1 / 500 */
  --t-h3: clamp(26px, 1.9vw, 36px); /* 36 / 1.15 / 500 */
  --t-h4: clamp(22px, 1.5vw, 28px); /* 28 / 1.2 / 500 */
  --t-sub: clamp(18px, 1.15vw, 22px); /* 22 / 1.35 / 500 */
  --t-body1: 20px; /* 20 / 1.5 / 400 */
  --t-body2: 17px; /* 17 / 1.5 / 400 */
  --t-body3: 14px; /* 14 / 1.45 / 400 */
  --t-caption: 12px; /* 12 / 1.3 / 500 */

  /* accent tint, for highlights behind amber elements */
  --amber-tint: #fef0dc;

  /* what sits on the colours above. Light values; Dusk sets its own below */
  --raise: #ffffff; /* raised surfaces: records, the chat, the cookie notice */
  --field: #ffffff; /* form fields */
  --on-ink: var(--cream); /* text on an ink ground */
  --on-cream: var(--ink); /* text on a cream ground */
  --on-ink-mute: rgba(252, 245, 233, 0.6); /* quiet text on an ink ground */
  --bar: var(--ink); /* the announcement bar */
  --on-bar: var(--cream);
  --pick: #ffffff; /* the chosen part of a switch, like the sign-in tabs */
  --switch-on: var(--stone); /* the chosen icon of the footer switch */
  --ink-press: #000000; /* an ink button under the pointer */
  --knob: #ffffff; /* the knob of an on/off switch */
  --knob-on: #ffffff;
  --warn: #b86e12; /* form errors */
  --warn-ink: #9a5a0c; /* small warnings on a raised surface */
  --win: rgba(236, 233, 229, 0.94); /* the frame of a product window */
  --tile: var(--paper); /* the ground of a logo tile */
  --tile-logo: none; /* a lift for brand logos on a tile */
  --backdrop-cream: var(--cream);
  --mono: grayscale(1) brightness(0.55); /* a colour logo shown as a quiet grey icon */
  --dark-logo: none; /* a near-black brand logo */
  --show-light: block; /* an image for one mode only, like the logo */
  --show-dusk: none;

  /* space and shape */
  --gut: clamp(16px, 4.2vw, 80px); /* page side gutter */
  --max: 1760px;
  --section: clamp(96px, 9vw, 180px); /* space between sections */
  --pad: clamp(24px, 4vw, 76px); /* inside panels */
  --r: 20px; /* panels */
  --r-sm: 20px; /* cards and photos */
  --r-btn: 999px; /* buttons: full pill */
  --header: clamp(72px, 7vw, 124px);

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Dusk: charcoal (#1d1d1d) with cream text. Never black, never blue-grey. The site shows it when the visitor
   picks Dusk in the footer, or picks Auto (the default) on a system set to dark. The head script in
   src/lib/theme.ts sets data-theme before the first paint. The two blocks below hold the same values;
   test/theme.test.mjs checks that they match, and that they match public/css/phone/tokens.css. */
:root[data-theme='dusk'] {
  color-scheme: dark;
  --ink: #ece5d9;
  --ink-2: #cbc2b5;
  --mute: #a89f94;
  --ghost: #555555;
  --paper: #1d1d1d;
  --stone: #262626;
  --stone-2: #313131;
  --slate: #3a3a3a;
  --night: #141414;
  --cream: #f1e9dc;
  --amber-tint: #3a3226;
  --backdrop-blue: #5f7286;
  --backdrop-clay: #8f6b59;
  --backdrop-sage: #6b7b66;
  --backdrop-mauve: #75627a;
  --backdrop-teal: #52696a;
  --backdrop-cream: #bfb29d;
  --veil: rgba(29, 29, 29, 0.72);
  --raise: #2a2a2a;
  --field: #232323;
  --on-ink: #1d1d1d;
  --on-cream: #1d1d1d;
  --on-ink-mute: rgba(29, 29, 29, 0.72);
  --bar: #141414;
  --on-bar: #ece5d9;
  --pick: #383838;
  --switch-on: #383838;
  --ink-press: #f8f3ea;
  --knob: #ece5d9;
  --knob-on: #1d1d1d;
  --warn: #e8ae7a;
  --warn-ink: #e8ae7a;
  --win: rgba(49, 49, 49, 0.94);
  --tile: #2a2a2a;
  --tile-logo: brightness(1.6) saturate(0.9);
  --mono: grayscale(1) brightness(1.1);
  --dark-logo: invert(0.88);
  --show-light: none;
  --show-dusk: block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --ink: #ece5d9;
    --ink-2: #cbc2b5;
    --mute: #a89f94;
    --ghost: #555555;
    --paper: #1d1d1d;
    --stone: #262626;
    --stone-2: #313131;
    --slate: #3a3a3a;
    --night: #141414;
    --cream: #f1e9dc;
    --amber-tint: #3a3226;
    --backdrop-blue: #5f7286;
    --backdrop-clay: #8f6b59;
    --backdrop-sage: #6b7b66;
    --backdrop-mauve: #75627a;
    --backdrop-teal: #52696a;
    --backdrop-cream: #bfb29d;
    --veil: rgba(29, 29, 29, 0.72);
    --raise: #2a2a2a;
    --field: #232323;
    --on-ink: #1d1d1d;
    --on-cream: #1d1d1d;
    --on-ink-mute: rgba(29, 29, 29, 0.72);
    --bar: #141414;
    --on-bar: #ece5d9;
    --pick: #383838;
    --switch-on: #383838;
    --ink-press: #f8f3ea;
    --knob: #ece5d9;
    --knob-on: #1d1d1d;
    --warn: #e8ae7a;
    --warn-ink: #e8ae7a;
    --win: rgba(49, 49, 49, 0.94);
    --tile: #2a2a2a;
    --tile-logo: brightness(1.6) saturate(0.9);
    --mono: grayscale(1) brightness(1.1);
    --dark-logo: invert(0.88);
    --show-light: none;
    --show-dusk: block;
  }
}