/* ==========================================================================
   Obstoon Design System — Tokens
   Source of truth for colour, type, space, depth and motion.
   Brand palette is reconciled from the two real product palettes:
     Obstoon Library  pwa/static/style.css   (#4d9de0 / #7ad0b0 / #060913)
     Obstoon Speech  src/app/styles/tokens.css (#3355e0 / #f26645 / #e5b84c)
   ========================================================================== */

:root {
  /* ---- Brand primitives (theme independent) ---- */
  --ob-blue: #4d9de0;
  --ob-blue-bright: #6fb2ec;
  --ob-blue-deep: #1b5e8a;
  --ob-mint: #7ad0b0;
  --ob-indigo: #5b63e8;
  --ob-violet: #8b6ff0;
  --ob-cobalt: #3355e0;
  --ob-coral: #f26645;
  --ob-gold: #e5b84c;

  /* ---- Typography ---- */
  --font-sans: "Inter", "Inter Tight", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-3xs: 0.6875rem;
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-lg: clamp(1.1875rem, 1.1rem + 0.42vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.22rem + 0.72vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.42rem + 1.5vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --text-4xl: clamp(2.75rem, 1.6rem + 5.4vw, 5.5rem);

  --leading-tight: 1.06;
  --leading-snug: 1.22;
  --leading-normal: 1.55;
  --leading-relaxed: 1.72;

  --tracking-tight: -0.028em;
  --tracking-snug: -0.016em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;
  --tracking-widest: 0.28em;

  /* ---- Space scale (4px base, fluid at the top end) ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 2.75rem;
  --space-2xl: clamp(3rem, 2rem + 4vw, 4.5rem);
  --space-3xl: clamp(4rem, 2.6rem + 6vw, 7rem);
  --space-4xl: clamp(5rem, 3rem + 8vw, 9.5rem);

  /* ---- Page-role display scale
     Interior pages must not all reuse the homepage's H1. Each page type gets
     its own display size, lead size and metadata treatment, so hierarchy is
     carried by scale rather than by every page shouting identically. ---- */
  --display-home: clamp(2.85rem, 1.5rem + 6.2vw, 6.5rem);
  --display-product: clamp(2.5rem, 1.4rem + 4.9vw, 5rem);
  --display-editorial: clamp(2.35rem, 1.3rem + 4.4vw, 4.6rem);
  --display-utility: clamp(2rem, 1.3rem + 2.9vw, 3.1rem);
  --display-legal: clamp(1.6rem, 1.25rem + 1.35vw, 2.15rem);

  --lead-home: clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem);
  --lead-product: clamp(1.06rem, 0.99rem + 0.38vw, 1.24rem);
  --lead-editorial: clamp(1.1rem, 1rem + 0.48vw, 1.34rem);
  --lead-utility: clamp(1.02rem, 0.98rem + 0.24vw, 1.14rem);
  --lead-legal: clamp(1rem, 0.98rem + 0.16vw, 1.09rem);

  /* Measure: long-form copy needs a real line length, not a fluid guess */
  --measure-prose: 68ch;
  --measure-legal: 72ch;

  /* ---- Radius ---- */
  --radius-3xs: 4px;
  --radius-2xs: 8px;
  --radius-xs: 12px;
  --radius-sm: 16px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --width-content: 1240px;
  /* Composition width for two-column interior sections. At 1600px a
     1240px container leaves ~360px of empty margin beside every
     visual, which is the "narrow content floating in empty space"
     problem. Prose sections stay on --width-content for line length. */
  --width-composition: 1440px;
  --width-prose: 68ch;
  --width-wide: 1560px;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.25rem);
  --header-height: 74px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --dur-5: 820ms;

  /* ---- 3D ---- */
  --perspective-scene: 1500px;
  --perspective-card: 1000px;
  --z-depth-book: 0px;
  --z-depth-wave: 72px;
  --z-depth-bubble: 132px;
  --z-depth-rings: -56px;
  --z-depth-floor: -104px;
}

/* ==========================================================================
   DARK MODE (default) — deep navy / blue / indigo, layered surfaces
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Material grain. A single 140px fractal-noise tile, tiled, at very low
     alpha. It does not add content or decoration - it gives large uniform
     areas a surface texture, which is what stops the interior pages reading
     as flat vector panels. Alpha is baked into the tile so the overlay's own
     opacity cannot wash it out. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.2'/%3E%3C/svg%3E");

  --bg: #0d1119;
  --bg-deep: #080b12;
  --field: radial-gradient(
      120% 82% at 78% 6%,
      rgba(77, 157, 224, 0.16) 0%,
      rgba(77, 157, 224, 0) 58%
    ),
    radial-gradient(
      96% 70% at 8% 88%,
      rgba(91, 99, 232, 0.15) 0%,
      rgba(91, 99, 232, 0) 62%
    ),
    linear-gradient(180deg, #141a28 0%, #0d1119 46%, #0a0e16 100%);

  --surface: #121826;
  --surface-2: #172031;
  --surface-3: #1d2a40;
  --surface-4: #293a58;
  --surface-hover: #1e2c46;
  --surface-inset: rgba(255, 255, 255, 0.028);

  /* Interior band ladder.
     The audit found every interior section painting transparent over the same
     background, which is what produced 70-82% dead space. These are full-bleed
     band surfaces: adjacent sections sit on adjacent steps of this ladder, so
     the page reads as stacked strata instead of one empty field. Deliberately
     narrow in value so it stays editorial rather than striped. */
  --band-0: #0d1119;
  --band-1: #111725;
  --band-2: #141d2d;
  --band-3: #192338;
  --band-line: rgba(255, 255, 255, 0.062);
  --band-line-strong: rgba(255, 255, 255, 0.11);
  /* Ambient wash laid over a band, tinted per product */
  --band-wash: rgba(77, 157, 224, 0.05);
  --band-wash-2: rgba(139, 123, 243, 0.05);

  /* Band atmosphere.
     The old wash was a single alpha-0.05 pool sized in percentages, which on a
     3500px-tall section stretched to ~1500px and read as one flat tint. These
     pools are strong enough to register and are tiled at a FIXED pixel period,
     so every part of a tall band gets light structure at a consistent scale
     rather than one broad wash. */
  --band-pool-1: rgba(77, 157, 224, 0.27);
  --band-pool-2: rgba(139, 123, 243, 0.24);
  --band-pool-3: rgba(91, 99, 232, 0.22);
  --band-lift: rgba(255, 255, 255, 0.06);
  --band-fall: rgba(0, 0, 0, 0.3);
  /* Inset content panel that sits on a band */
  --panel-band: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.045) 0%,
    rgba(255, 255, 255, 0.014) 100%
  );

  /* Object / highlight ramp.
     The page surfaces above stay dark on purpose. Depth comes from a genuinely
     lit object sitting in that darkness, not from lifting the background.
     Reserved for large or decorative surfaces — never for small text, since
     --obj-4 and above fall below 4.5:1 against --text. */
  --obj-shadow: #040b18;
  --obj-1: #395170;
  --obj-2: #5f82b0;
  --obj-3: #91b4e1;
  --obj-spec: #cde0f9;
  --obj-hot: #f2f7ff;

  --text: #eef3fc;
  --text-soft: rgba(226, 234, 250, 0.74);
  --text-muted: #93a3bd;
  --text-faint: #7d8ea8;
  --text-inverse: #060a14;

  /* Text-safe variants of the raw product hues. The brand hues above stay
     for fills and graphics; these are tuned for >= 4.5:1 small text. */
  --ink-speech: #f58a6d;
  --ink-library: #7ad0b0;
  --ink-tracker: #a795f5;

  /* Speech audio-visual bars — warm orange / peach per spec, NOT coral-red.
     Warm base + hot tip give each bar a lit tip without a cold blue tail. */
  --wave-warm: #e8896f;
  --wave-hot: #f09a7d;
  --wave-core: rgba(238, 138, 109, 0.16);

  --accent: #5ea6ec;
  --accent-strong: #7ab8f2;
  --accent-deep: #2f6ea8;
  --accent-2: #8b7bf3;
  --accent-ink: #cfe4fb;
  --accent-tint: rgba(77, 157, 224, 0.13);
  --accent-tint-2: rgba(139, 123, 243, 0.14);
  --accent-line: rgba(94, 166, 236, 0.34);
  --on-accent: #04121f;

  --border: rgba(255, 255, 255, 0.075);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-accent: rgba(94, 166, 236, 0.4);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-rim: 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 2px 8px -2px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 14px 34px -12px rgba(0, 0, 0, 0.62);
  --shadow-lg: 0 30px 70px -22px rgba(0, 0, 0, 0.78);
  --shadow-xl: 0 52px 110px -34px rgba(0, 0, 0, 0.86);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --glow-accent: 0 26px 60px -22px rgba(77, 157, 224, 0.55);
  --glow-violet: 0 26px 64px -24px rgba(139, 123, 243, 0.5);

  --sheen: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.015) 42%,
    rgba(255, 255, 255, 0) 100%
  );
  --glass: rgba(255, 255, 255, 0.045);
  --glass-line: rgba(255, 255, 255, 0.1);
  --plate-line: rgba(255, 255, 255, 0.06);

  --edge-light: rgba(255, 255, 255, 0.16);
  --grid-line: rgba(120, 170, 235, 0.09);
}

/* ==========================================================================
   LIGHT MODE — soft cool neutral, dark readable text, indigo accents
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  /* Light mode needs a touch more grain to read as paper stock, and slightly
     less than dark so it does not look dirty. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");

  --bg: #f3f5f8;
  --bg-deep: #e8edf6;
  --field: radial-gradient(
      118% 78% at 80% 2%,
      rgba(45, 96, 196, 0.11) 0%,
      rgba(45, 96, 196, 0) 60%
    ),
    radial-gradient(
      92% 66% at 4% 92%,
      rgba(96, 88, 214, 0.1) 0%,
      rgba(96, 88, 214, 0) 62%
    ),
    linear-gradient(180deg, #fbfcfe 0%, #f3f5f8 46%, #eaeff7 100%);

  --surface: #f8fafc;
  --surface-2: #f5f8fb;
  --surface-3: #e7ecf2;
  --surface-4: #d6dde6;
  --surface-hover: #f2f6fc;
  --surface-inset: rgba(16, 28, 48, 0.028);

  /* Interior band ladder — light is a parallel system, not a recolour.
     A pure-white page with black text measured 77-83% dead space. These bands
     are cool neutral greys with real value separation, so light mode gets the
     same stacked-strata read as dark instead of a flat white field. None of
     them reach white, which would collapse the ladder again. */
  --band-0: #eef2f8;
  --band-1: #f5f8fc;
  --band-2: #e8eef7;
  --band-3: #e0e8f3;
  --band-line: rgba(16, 28, 48, 0.11);
  --band-line-strong: rgba(16, 28, 48, 0.2);
  --band-wash: rgba(45, 96, 196, 0.06);
  --band-wash-2: rgba(96, 88, 214, 0.06);

  /* Light mode gets its own values, not an inversion: white lift at the top of
     a band, a cool blue shadow at the foot, and pools that stay legible against
     a near-white base instead of washing out. */
  --band-pool-1: rgba(45, 96, 196, 0.68);
  --band-pool-2: rgba(96, 88, 214, 0.56);
  --band-pool-3: rgba(45, 96, 196, 0.5);
  --band-lift: rgba(255, 255, 255, 0.95);
  --band-fall: rgba(28, 52, 96, 0.2);
  --panel-band: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.55) 100%
  );

  /* Depth needs to be carried by shadow here, since value alone can't do it
     on a light field. Tighter and more present than the dark ramp. */
  --shadow-xs: 0 1px 2px rgba(19, 33, 56, 0.11);
  --shadow-rim: 0 0 0 1px rgba(16, 28, 48, 0.05),
    0 2px 6px -2px rgba(19, 33, 56, 0.1);

  /* Object / highlight ramp.
     Light mode inverts the direction of "lit": against a white page an object
     reads as lit through saturation and cast shadow, not through brightness.
     So this ramp runs shadow -> desaturated mid -> brand blue -> pale tint ->
     white specular. Reserved for large or decorative surfaces. */
  --obj-shadow: #46566b;
  --obj-1: #6d84a3;
  --obj-2: #4d7fae;
  --obj-3: #4d9de0;
  --obj-spec: #cfe4fb;
  --obj-hot: #ffffff;

  --text: #0e1a2b;
  --text-soft: rgba(14, 26, 43, 0.78);
  --text-muted: #465872;
  --text-faint: #55677f;
  --text-inverse: #ffffff;

  /* Text-safe variants of the raw product hues. The brand hues above stay
     for fills and graphics; these are tuned for >= 4.5:1 small text. */
  --ink-speech: #b8391a;
  --ink-library: #0d6b4c;
  --ink-tracker: #4b3bb5;

  /* Speech bars — slightly more saturated warm peach on the light field. */
  --wave-warm: #ee8a6b;
  --wave-hot: #f6a083;
  --wave-core: rgba(238, 138, 107, 0.2);

  --accent: #2456c4;
  --accent-strong: #1c46a6;
  --accent-deep: #1b5e8a;
  --accent-2: #5a4bd0;
  --accent-ink: #1a3f8f;
  --accent-tint: rgba(45, 96, 196, 0.09);
  --accent-tint-2: rgba(96, 88, 214, 0.1);
  --accent-line: rgba(45, 96, 196, 0.28);
  --on-accent: #ffffff;

  --border: rgba(16, 28, 48, 0.17);
  --border-strong: rgba(16, 28, 48, 0.29);
  --border-accent: rgba(45, 96, 196, 0.42);

  --shadow-sm: 0 1px 3px rgba(19, 33, 56, 0.13);
  --shadow-md: 0 14px 32px -16px rgba(19, 33, 56, 0.30);
  --shadow-lg: 0 30px 64px -26px rgba(19, 33, 56, 0.37);
  --shadow-xl: 0 54px 104px -38px rgba(19, 33, 56, 0.36);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glow-accent: 0 24px 56px -26px rgba(45, 96, 196, 0.5);
  --glow-violet: 0 24px 58px -28px rgba(96, 88, 214, 0.45);

  --sheen: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.2) 46%,
    rgba(255, 255, 255, 0) 100%
  );
  --glass: rgba(255, 255, 255, 0.6);
  --glass-line: rgba(16, 28, 48, 0.1);
  --plate-line: rgba(16, 28, 48, 0.07);

  --edge-light: rgba(255, 255, 255, 0.85);
  --grid-line: rgba(45, 96, 196, 0.09);
}