/* ============================================================================
 * PhotoPool × TapSnap — design tokens (the single source of truth).
 *
 * Semantic tokens only. Components reference roles (--surface, --accent), never
 * raw hex. One file, three rooms: :root is the product/dark default (identical
 * to what the PWA shipped inline), [data-theme="light"] is TapSnap Light (money),
 * [data-theme="host"] is the dark Host Shell. Living-color specifics
 * (--grad, ambient loop, rainbow, burst) live in product.css, loaded only in-event.
 *
 * ⚑CONFIRM tokens must be reconciled with real TapSnap brand assets (plan §9).
 * ========================================================================== */

:root {
  /* ==========================================================================
   * PRIMITIVE SCALES (room-independent). Semantic tokens below map onto these.
   * Added because the marketing layer had accreted 25 distinct font sizes, six
   * near-identical near-blacks, eight blues, 17 gap values and 42 padding
   * declarations — all as literals that bypassed this file entirely. Components
   * should reference a scale step, never a raw number.
   * ====================================================================== */

  /* ---- type scale — ~1.2 ratio, anchored on the 17px body and the 84px hero
   * that tapsnap.net uses, so the brand's extremes survive. --fs-100 is the
   * floor: nothing on a marketing page may be smaller. ---- */
  --fs-100: 13px;                       /* legal, captions, credits */
  --fs-200: 15px;                       /* nav, footer links, UI labels */
  --fs-300: 17px;                       /* body */
  --fs-400: 20px;                       /* lead paragraph */
  --fs-500: 25px;                       /* card + accordion headings */
  --fs-600: clamp(28px, 3vw, 34px);     /* subsection */
  --fs-700: clamp(34px, 4.5vw, 48px);   /* section heading (.tsn-h-duo) */
  --fs-800: clamp(44px, 6vw, 64px);     /* slider / banner */
  --fs-900: clamp(48px, 7vw, 84px);     /* page hero */

  /* Line-height tracks size inversely — replaces 11 ad-hoc values. */
  --lh-tight: 1.08;   /* display */
  --lh-snug: 1.25;    /* headings */
  --lh-body: 1.6;     /* prose */

  /* ---- ink ramp — neutrals TINTED toward the brand hue (~225deg) rather than
   * pure grey, which reads dead. Replaces #000 / #0a0a0a / #0b0b10 / #0e0e0e /
   * #111 / #16171a and the #333/#444 pair. ---- */
  --ink-950: #0b0d12;
  --ink-900: #14171f;
  --ink-800: #1e222c;
  --ink-700: #2b3040;
  --ink-600: #3d4354;
  --ink-500: #565d70;
  --ink-400: #666d7e;   /* lightest ink clearing AA on BOTH #fff (5.18:1) and the band (4.75:1) */
  --ink-300: #9aa0b0;
  --ink-200: #c4c8d2;
  --ink-100: #e3e5ea;
  --ink-050: #f4f5f7;

  /* ---- blue ramp — #2467e5 stays the anchor; it is tapsnap.net's own --ts-blue.
   * Replaces the eight loose blues. ---- */
  --blue-700: #1a4fb8;
  --blue-600: #205ccc;
  --blue-500: #2467e5;
  --blue-400: #4f8bff;
  --blue-300: #7da8ff;   /* headings/links on dark */
  --blue-200: #aecaff;
  --blue-100: #d9e6ff;
  --blue-050: #eef4ff;

  /* ---- spacing — 4px base. Section rhythm is --sp-9 desktop / --sp-7 mobile. ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- container widths — three roles, no ad-hoc measures. --w-measure keeps
   * prose inside the 45-75ch readability rail. ---- */
  --w-page: 1140px;
  --w-text: 720px;
  --w-measure: 65ch;

  /* ---- surface (product / dark: glass) ---- */
  --bg: #0b0b10;
  --text: #f3f3f7;
  /* Heading ink. On dark rooms headings sit on the light text colour; the light room
   * below remaps this to --ink-950. Declared here so shared components that reference
   * var(--ink) resolve in every room instead of falling back to `inherit`. */
  --ink: #f3f3f7;
  --muted: #9797a6;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .08);
  --border: rgba(255, 255, 255, .09);

  /* ---- brand family — pinned against tapsnap.net's LIVE CSS (2026-07-02) ----
   * The site's own stylesheet defines --ts-blue:#2467e5 and uses it for nav CTAs,
   * buttons, and the footer. So blue IS the parent brand color (the plan's inferred
   * teal does not exist on the site); the PWA accent was never drift. */
  --brand: #2467e5;        /* = tapsnap.net --ts-blue */
  --brand-dark: #205ccc;   /* the site's pressed/darker blue */
  --accent: #2467e5;       /* product/action accent — same family on purpose */
  --accent-2: #4f8bff;
  /* Interactive-layer fallbacks so the UI-kit control styles resolve in every room; the host
   * console overrides these with the kit's flat scaffold-blue values. The guest PWA ignores them. */
  --accent-hi: #3a78ea;
  --accent-lo: #205ccc;
  --accent-quiet: rgba(36, 103, 229, .26);
  --font-ui: "Space Grotesk", -apple-system, system-ui, sans-serif;
  --font-mono-ui: "Space Mono", ui-monospace, Menlo, monospace;
  --r-ctl: 8px;

  /* ---- brand type (site truth: Oswald display + Source Sans body; OFL, self-hosted
   * at /design/fonts/ — loaded by brand.css on Light-room surfaces; the in-event
   * product keeps the system stack for instant paint) ---- */
  --font-display: "Oswald", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, system-ui, sans-serif;

  /* ---- status ---- */
  --ok: #39d98a;
  --warn: #ffd88a;
  --err: #ff6b6b;

  /* ---- shape ----
   * Marketing uses exactly three of these — --r-sm (controls), --r-md (media/cards),
   * --r-pill — so radii stop varying between siblings. --r-sm was 10px and referenced
   * by nothing; it is now 6px to match the CTA radius shared with tapsnap.net.
   * --r-card / --r-lg / --r-ctl are the host console's and shop's; leave them alone. */
  --r-sm: 6px;
  --r-md: 12px;
  --r-card: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- elevation ---- */
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, .4);

  /* ---- Refined Dark Studio shared tokens (host + light override the visual ones below).
   * Neutral defaults here so shared components resolve everywhere, incl. the in-event PWA. ---- */
  --bg-elev: #12121a;
  --faint: #6b6b7e;
  --surface-3: rgba(255, 255, 255, .11);
  --border-2: rgba(255, 255, 255, .15);
  --accent-grad: linear-gradient(135deg, #2f6bff, #6ea0ff);
  --accent-glow: 0 8px 24px rgba(47, 107, 255, .34);
  --elev-card: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01));
  --ring-top: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* ---- environment ---- */
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* ---- motion physics (identical feel in every room; plan §6.1) ---- */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);  /* the house curve */
  --ease-out: cubic-bezier(.16, .7, .3, 1);      /* entrances, bursts */
  --t-fast: 140ms;   /* taps, presses, hovers */
  --t-base: 220ms;   /* toasts, fades, small moves */
  --t-room: 380ms;   /* sheets, room transitions, shared-element flight */
}

/* Host Shell — mature graphite console. Dark, matte, and operational; rainbow is reserved
 * for interaction states in dashboard.css, not ambient decoration. */
[data-theme="host"] {
  --bg: #0f1011;
  --bg-elev: #151618;
  --text: #f1f2ee;
  --muted: #a2a39e;
  --faint: #777974;
  --surface: #18191b;
  --surface-2: #202124;
  --surface-3: #292b2e;
  --border: rgba(244, 244, 238, .105);
  --border-2: rgba(244, 244, 238, .18);
  /* ---- UI-kit interactive layer (client console): flat accent, no glow, crisp controls.
   * The accent is the kit's scaffold blue #4C7DF0 (swap here to re-brand every control at once);
   * --accent-grad is deliberately a SOLID so token-driven buttons render flat, and --accent-glow
   * is a no-op shadow so nothing glows. Fonts: Space Grotesk on controls, Space Mono on labels. */
  --accent: #4c7df0;
  --accent-2: #78a0ff;
  --accent-hi: #5f8bf3;
  --accent-lo: #386bdf;
  --accent-quiet: rgba(76, 125, 240, .22);
  --accent-grad: #4c7df0;
  --accent-glow: 0 0 #0000;
  --rainbow: linear-gradient(90deg, #ff3b69 0%, #ff8b2d 16%, #ffe45e 32%, #43d979 50%, #1fd4ff 68%, #4c7df0 84%, #b95cff 100%);
  --rainbow-conic: conic-gradient(from var(--rainbow-angle, 0deg), #ff3b69, #ff8b2d, #ffe45e, #43d979, #1fd4ff, #4c7df0, #b95cff, #ff3b69);
  --font-ui: "Space Grotesk", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-mono-ui: "Space Mono", ui-monospace, Menlo, monospace;
  --r-ctl: 8px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-card: 8px;
  --r-lg: 12px;
  --elev-card: linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(255, 255, 255, 0));
  --ring-top: inset 0 1px 0 rgba(255, 255, 255, .045);
  --shadow: 0 18px 36px rgba(0, 0, 0, .34);
  --shadow-sm: 0 8px 18px rgba(0, 0, 0, .22);
  --ok: #42d483;
  --warn: #efb95a;
  --err: #ef6b61;
}

/* TapSnap Light — marketing / sign-up / checkout. Values are the site's actual
 * palette (body #333 on #fff, #fafafa/#f3f3f6 section bands, #7b7b80 grey).
 * Living color is deliberately absent here (plan §7: never on the money). */
[data-theme="light"] {
  --bg: #ffffff;
  --bg-elev: #ffffff;
  /* Mapped onto the ink ramp rather than the site's original literals. The two greys
   * inherited from tapsnap.net fail WCAG AA and were colouring every explanatory
   * paragraph on the site. Ratios below are measured against BOTH #fff and the
   * --surface band, because muted copy appears on both and checking only white is how
   * the original slipped through. */
  --text: var(--ink-800);    /* was #333333 (12.63) -> 15.90 on #fff, 14.58 on band */
  --muted: var(--ink-400);   /* was #7b7b80 — 4.21 / 3.86, FAILED -> 5.18 / 4.75 */
  --faint: var(--ink-500);   /* was #a2a2a8 — 2.54 / 2.33, FAILED -> 6.57 / 6.02 */
  --ink: var(--ink-950);     /* heading ink — replaces the bare #0a0a0a literal */
  --surface: var(--ink-050); /* section band — was #fafafa */
  --surface-2: #f3f3f6;      /* = site --ts4b-off-white */
  --surface-3: #ececee;
  --border: rgba(11, 11, 18, .10);
  --border-2: rgba(11, 11, 18, .17);

  --accent-grad: linear-gradient(135deg, #2467e5, #4f8bff);
  --accent-glow: 0 8px 20px rgba(36, 103, 229, .22);
  --elev-card: linear-gradient(180deg, #ffffff, #ffffff);   /* solid; depth from the shadow */
  --ring-top: inset 0 1px 0 rgba(255, 255, 255, .7);

  --ok: #0ec348;   /* = site --cta green */
  --warn: #8a6100;
  --err: #d9453f;

  --shadow: 0 10px 30px rgba(11, 11, 18, .09);
  --shadow-sm: 0 4px 14px rgba(11, 11, 18, .07);  /* soft, not deep */
}