/* =========================================================================
   Clawdia — web-only design tokens (authored by hand)
   The fluid type scale, editorial rhythm, layout measures, radii, edges, and
   the composition tokens (hairlines, elevations, highlights, CTA reflection +
   glow, pointer-tilt) that ONLY the web surface consumes. Brand colors and
   font families are NOT here — they come from tokens.generated.css (emitted
   from src/clawdia/design/tokens.py). Load order in styles.css:
       @import 'tokens.generated.css';   (colors + fonts — generated)
       @import 'tokens.web.css';         (this file)
   …then component rules.

   Variable names are preserved EXACTLY as the prior styles.css :root used them
   so no component rule needs to change. Dark-mode composition retune mirrors
   the prior @media block (ink shadows vanish on graphite → pump opacity; CTA
   reflection flips soft-light → screen; glow shifts warm-amber hotter).
   ========================================================================= */

:root {
  /* === Pointer-tilt (tvOS-style cards + CTA, fine-pointer only) === */
  --tilt-sheen:            rgba(255, 247, 235, 0.22);
  --tilt-lift:             0 18px 34px -14px rgba(26, 24, 20, 0.28);

  /* === Hairlines (warm-ink, four weights) === */
  --hairline-strong:       rgba(26, 24, 20, 0.16);
  --hairline-soft:         rgba(26, 24, 20, 0.10);
  --hairline-faint:        rgba(26, 24, 20, 0.08);
  --hairline-hair:         rgba(26, 24, 20, 0.07);

  /* === Elevations (low + warm; depth = hierarchy) === */
  --elevation-rest:        0 4px 10px -4px rgba(26, 24, 20, 0.12);
  --elevation-card:        0 22px 60px rgba(26, 24, 20, 0.08);
  --elevation-bullet:      0 18px 40px -22px rgba(26, 24, 20, 0.18);
  --elevation-ledger:      0 18px 40px -22px rgba(26, 24, 20, 0.16);
  --elevation-cta-floor:   0 8px 16px -6px rgba(26, 24, 20, 0.14);

  /* === Top-edge highlights === */
  --highlight-inset:       inset 0 1px 0 rgba(247, 243, 236, 0.82);
  --highlight-card-inset:  inset 0 1px 0 rgba(247, 243, 236, 0.80);

  /* === Surface washes / diagonals === */
  --surface-veil:          rgba(247, 243, 236, 0.6);
  --panel-diag-from:       rgba(239, 234, 224, 0.72);
  --panel-diag-to:         rgba(247, 243, 236, 0.38);

  /* === CTA reflection (matte single-band, panned by tilt) === */
  --cta-reflection-1:      rgba(252, 240, 218, 0.18);
  --cta-reflection-2:      rgba(252, 240, 218, 0.07);
  --cta-reflection-3:      rgba(252, 240, 218, 0);
  --cta-reflection-blend:  soft-light;

  /* === CTA glow: 4-layer warm luminance lift (hover only) === */
  --cta-glow-1:            0 0 8px -1px rgba(255, 198, 132, 0.55);
  --cta-glow-2:            0 0 30px -4px rgba(255, 246, 226, 0.90);
  --cta-glow-3:            0 0 64px -14px rgba(255, 250, 236, 0.72);
  --cta-glow-4:            0 0 120px -32px rgba(255, 252, 244, 0.52);
  --cta-text-emboss:       0 1px 0 rgba(0, 0, 0, 0.16);

  /* === Fluid type scale (clamp: mobile floor → desktop ceiling) === */
  --fs-hero:        clamp(2.75rem, 4.2vw + 1rem, 5rem);      /* 44 → 80 */
  --fs-display:     clamp(2.25rem, 2.4vw + 1.25rem, 3.5rem); /* 36 → 56 */
  --fs-section:     clamp(1.625rem, 0.8vw + 1.25rem, 2rem);  /* 26 → 32 */
  --fs-bullet:      clamp(1.5rem, 1vw + 1.25rem, 1.875rem);  /* 24 → 30 */
  --fs-body-lead:   clamp(1.125rem, 0.4vw + 1rem, 1.25rem);  /* 18 → 20 */
  --fs-body:        1rem;       /* 16 */
  --fs-meta:        0.875rem;   /* 14 */
  --fs-mono:        0.8125rem;  /* 13 */

  /* === Signature sizes (the Caveat character moment) === */
  --fs-signature-closing: clamp(2.75rem, 3.5vw + 1rem, 4.25rem); /* 44 → 68 */
  --fs-bullet-numeral:    clamp(1.5rem, 1vw + 1.125rem, 1.875rem);/* 24 → 30 */

  /* === Editorial rhythm (variable pacing, fluid) === */
  --rhythm-tight:   clamp(72px, 7vw, 112px);
  --rhythm-default: clamp(112px, 11vw, 180px);
  --rhythm-loose:   clamp(160px, 16vw, 240px);

  /* === Layout === */
  --page-max:    1200px;
  --page-gutter: 24px;

  /* === Edges (reference colors from tokens.generated.css) === */
  --hairline: 1px solid var(--color-surface-subtle);
  --rule:     1.5px solid var(--color-ink);
}

@media (min-width: 900px) {
  :root { --page-gutter: 48px; }
}

/* =========================================================================
   Dark-mode composition retune — mirrors the prior styles.css @media block.
   Authored under BOTH scopes so composition tracks the dark brand colors that
   tokens.generated.css applies under each: `@media (prefers-color-scheme: dark)`
   (OS-dark) and `[data-theme="dark"]` (forced dark — a share-node export on a
   light-OS page, or the always-dark product dashboard). Vanilla CSS can't share
   a block across the @media boundary, so the two are duplicated on purpose —
   the same dual-emit tokens.generated.css does for colors. KEEP THE TWO BLOCKS
   IN SYNC (or fold the composition tokens into the codegen later).
   ========================================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    --hairline-strong:       rgba(244, 237, 224, 0.18);
    --hairline-soft:         rgba(244, 237, 224, 0.12);
    --hairline-faint:        rgba(244, 237, 224, 0.09);
    --hairline-hair:         rgba(244, 237, 224, 0.07);

    --elevation-rest:        0 6px 14px -4px rgba(0, 0, 0, 0.55);
    --elevation-card:        0 22px 60px rgba(0, 0, 0, 0.50);
    --elevation-bullet:      0 18px 40px -18px rgba(0, 0, 0, 0.60);
    --elevation-ledger:      0 18px 40px -18px rgba(0, 0, 0, 0.55);
    --elevation-cta-floor:   0 8px 16px -6px rgba(0, 0, 0, 0.55);

    --highlight-inset:       inset 0 1px 0 rgba(244, 237, 224, 0.10);
    --highlight-card-inset:  inset 0 1px 0 rgba(244, 237, 224, 0.08);

    --surface-veil:          rgba(28, 23, 18, 0.55);
    --panel-diag-from:       rgba(34, 29, 24, 0.78);
    --panel-diag-to:         rgba(26, 22, 18, 0.40);

    --tilt-sheen:            rgba(255, 255, 255, 0.30);
    --tilt-lift:             0 24px 44px -16px rgba(0, 0, 0, 0.55);

    --cta-reflection-1:      rgba(255, 220, 178, 0.32);
    --cta-reflection-2:      rgba(255, 220, 178, 0.14);
    --cta-reflection-3:      rgba(255, 220, 178, 0);
    --cta-reflection-blend:  screen;

    --cta-glow-1:            0 0 10px -1px rgba(255, 175, 100, 0.85);
    --cta-glow-2:            0 0 34px -4px rgba(255, 205, 145, 0.70);
    --cta-glow-3:            0 0 70px -14px rgba(255, 230, 180, 0.55);
    --cta-glow-4:            0 0 130px -32px rgba(255, 245, 215, 0.40);
    --cta-text-emboss:       0 1px 0 rgba(0, 0, 0, 0.45);
  }
}

/* Forced dark — KEEP IN SYNC with the @media (prefers-color-scheme: dark) block above. */
[data-theme="dark"] {
  --hairline-strong:       rgba(244, 237, 224, 0.18);
  --hairline-soft:         rgba(244, 237, 224, 0.12);
  --hairline-faint:        rgba(244, 237, 224, 0.09);
  --hairline-hair:         rgba(244, 237, 224, 0.07);

  --elevation-rest:        0 6px 14px -4px rgba(0, 0, 0, 0.55);
  --elevation-card:        0 22px 60px rgba(0, 0, 0, 0.50);
  --elevation-bullet:      0 18px 40px -18px rgba(0, 0, 0, 0.60);
  --elevation-ledger:      0 18px 40px -18px rgba(0, 0, 0, 0.55);
  --elevation-cta-floor:   0 8px 16px -6px rgba(0, 0, 0, 0.55);

  --highlight-inset:       inset 0 1px 0 rgba(244, 237, 224, 0.10);
  --highlight-card-inset:  inset 0 1px 0 rgba(244, 237, 224, 0.08);

  --surface-veil:          rgba(28, 23, 18, 0.55);
  --panel-diag-from:       rgba(34, 29, 24, 0.78);
  --panel-diag-to:         rgba(26, 22, 18, 0.40);

  --tilt-sheen:            rgba(255, 255, 255, 0.30);
  --tilt-lift:             0 24px 44px -16px rgba(0, 0, 0, 0.55);

  --cta-reflection-1:      rgba(255, 220, 178, 0.32);
  --cta-reflection-2:      rgba(255, 220, 178, 0.14);
  --cta-reflection-3:      rgba(255, 220, 178, 0);
  --cta-reflection-blend:  screen;

  --cta-glow-1:            0 0 10px -1px rgba(255, 175, 100, 0.85);
  --cta-glow-2:            0 0 34px -4px rgba(255, 205, 145, 0.70);
  --cta-glow-3:            0 0 70px -14px rgba(255, 230, 180, 0.55);
  --cta-glow-4:            0 0 130px -32px rgba(255, 245, 215, 0.40);
  --cta-text-emboss:       0 1px 0 rgba(0, 0, 0, 0.45);
}