/*!
 * ratemy.photos — Design Tokens v1
 * Owner: Sonnet (Design & Polish). See reports/sonnet-design-spec.md for rationale.
 *
 * Usage: link this file once, globally. Everything downstream (components,
 * the share-card renderer, ad-slot chrome) should read these custom
 * properties rather than hardcoding values. Theme is light-first with a
 * dark override via prefers-color-scheme and a manual [data-theme] hook for
 * an in-app toggle (optional, Phase 2).
 *
 * Font: Bricolage Grotesque (SIL OFL 1.1), self-hosted, variable on the
 * `wght` axis only (500–800). Subset to basic Latin + typographic
 * punctuation actually used in our copy. File: shared/fonts/
 * bricolage-grotesque-subset.woff2 — 20.5 KB gzipped-equivalent (woff2 is
 * already compressed), well inside the 150 KB shell budget. Used ONLY for
 * the score hero, headings, and the wordmark — never for body copy, which
 * stays on the system stack at zero transfer cost. License file alongside:
 * shared/fonts/OFL.txt (required by SIL OFL — keep it if you redistribute
 * the font, including this subset).
 */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("./fonts/bricolage-grotesque-subset.woff2") format("woff2-variations"),
       url("./fonts/bricolage-grotesque-subset.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+2013-2014, U+2018-201D, U+2026;
}

:root {
  color-scheme: light dark;

  /* ---------------------------------------------------------------- *
   * TYPOGRAPHY
   * ---------------------------------------------------------------- */

  /* Display face: score hero, big headlines, the "ratemy.photos" wordmark.
     Variable weight 500–800 via font-variation-settings; use --weight-*. */
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI",
    sans-serif;
  /* Body face: everything else — zero extra bytes, native on every platform. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --weight-body-regular: 400;
  --weight-body-medium: 500;
  --weight-body-bold: 700;
  --weight-display-semibold: 600; /* dimension labels, card headers */
  --weight-display-bold: 700; /* verdict headline, wordmark */
  --weight-display-extrabold: 800; /* the score number itself */

  /* Fluid modular scale, 1.2 ratio, mobile-first (clamps prevent overflow
     on small viewports and cap growth on desktop/share-card contexts). */
  --text-xs: 0.75rem; /* 12px — legal fine print, timestamps */
  --text-sm: 0.875rem; /* 14px — captions, meta */
  --text-base: 1rem; /* 16px — body */
  --text-md: 1.125rem; /* 18px — lead paragraph, tip body */
  --text-lg: 1.375rem; /* 22px — card titles */
  --text-xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); /* 28–36px — section heads */
  --text-2xl: clamp(2.25rem, 1.9rem + 1.5vw, 3rem); /* 36–48px — verdict headline */
  --text-3xl: clamp(3rem, 2.4rem + 2.5vw, 4.5rem); /* 48–72px — dimension score chips */
  --text-hero: clamp(5rem, 3.5rem + 8vw, 9rem); /* 80–144px — THE score number */

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em; /* hero number, big display */
  --tracking-normal: 0;
  --tracking-wide: 0.04em; /* small caps labels, eyebrow text */

  /* ---------------------------------------------------------------- *
   * SPACING (4px base unit)
   * ---------------------------------------------------------------- */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /* Page-level rhythm */
  --gutter: clamp(1rem, 0.75rem + 2vw, 2rem);
  --content-max: 640px; /* single-column result screen cap on desktop */

  /* ---------------------------------------------------------------- *
   * RADII
   * ---------------------------------------------------------------- */
  --radius-sm: 8px; /* chips, tags */
  --radius-md: 14px; /* buttons, inputs */
  --radius-lg: 20px; /* tip cards */
  --radius-xl: 28px; /* score ring container, hero panel */
  --radius-full: 999px; /* pills, avatar-ish elements */

  /* ---------------------------------------------------------------- *
   * MOTION
   * ---------------------------------------------------------------- */
  --motion-instant: 80ms;
  --motion-fast: 150ms;
  --motion-base: 240ms;
  --motion-slow: 400ms;
  --motion-celebrate: 900ms; /* score count-up + ring sweep on reveal */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* score pop, banger confetti */

  /* Respect reduced motion at the component layer:
     @media (prefers-reduced-motion: reduce) { … swap celebrate for a fade } */

  /* ---------------------------------------------------------------- *
   * SCORE BAND COLORS (cool → warm as craft quality rises)
   * Used for: score ring gradient, dimension bars, band chips, share card.
   * Same hex in light & dark — these are saturated enough to hold up on
   * both, and consistency between the in-app result and the share card
   * matters more here than theme-perfect contrast.
   * ---------------------------------------------------------------- */
  --band-rough: #8b93a7; /* cool slate — never red; this is "keep shooting," not "fail" */
  --band-okay: #4fb8b0; /* teal */
  --band-good: #4f8ef7; /* blue */
  --band-great: #a56bff; /* violet */
  --band-banger: #ffb020; /* trophy gold */
  --band-banger-glow: #ffd666; /* highlight/glow accent for the banger celebration */

  /* ---------------------------------------------------------------- *
   * LIGHT THEME (default)
   * ---------------------------------------------------------------- */
  --bg: #faf9f7;
  --bg-elevated: #ffffff;
  --bg-elevated-2: #f1f0ee;
  --bg-sunken: #eeece9;

  --text-primary: #14161c;
  --text-secondary: #565c6d;
  --text-tertiary: #8a90a0;
  --text-on-brand: #ffffff;
  --text-on-banger: #2a1d00; /* dark text on gold banger surfaces */

  --border: #e4e2de;
  --border-strong: #cfccc6;

  --brand: #7b61ff; /* Aperture Violet — primary accent, CTAs, links, focus */
  --brand-strong: #6247e0;
  --brand-soft: #efe9ff; /* tints, hover backgrounds */

  --color-error: #e0483e;
  --color-error-soft: #fbe9e7;

  --shadow-color: 220 20% 20%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.08);
  --shadow-md: 0 4px 16px hsl(var(--shadow-color) / 0.1);
  --shadow-lg: 0 12px 40px hsl(var(--shadow-color) / 0.14);
  --shadow-glow-banger: 0 0 0 1px hsl(38 100% 55% / 0.35),
    0 8px 32px hsl(38 100% 55% / 0.35);

  --scrim: hsl(220 20% 10% / 0.5); /* modal/sheet backdrop */
}

/* ---------------------------------------------------------------- *
 * DARK THEME
 * Mirrors the brand's "spiritual home": the share card and the hero
 * result moment are designed dark-first (photos, and gold/violet
 * accents, pop harder on near-black). Auto-applies via OS preference;
 * [data-theme] attributes let a future in-app toggle force either mode.
 * ---------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0d12;
    --bg-elevated: #14171f;
    --bg-elevated-2: #1c202b;
    --bg-sunken: #07080b;

    --text-primary: #f5f6fa;
    --text-secondary: #a8aec0;
    --text-tertiary: #6b7180;
    --text-on-brand: #ffffff;
    --text-on-banger: #2a1d00;

    --border: #262b38;
    --border-strong: #363c4b;

    --brand: #9583ff; /* lighter tint for AA contrast on dark bg */
    --brand-strong: #ab9dff;
    --brand-soft: #221c3d;

    --color-error: #ff6b61;
    --color-error-soft: #3a1613;

    --shadow-color: 220 60% 2%;
    --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.4);
    --shadow-md: 0 4px 20px hsl(var(--shadow-color) / 0.5);
    --shadow-lg: 0 16px 48px hsl(var(--shadow-color) / 0.6);
    --shadow-glow-banger: 0 0 0 1px hsl(38 100% 55% / 0.4),
      0 0 40px hsl(38 100% 60% / 0.45);

    --scrim: hsl(220 40% 2% / 0.65);
  }
}

/* Manual overrides (optional Phase-2 theme toggle) win over OS preference. */
:root[data-theme="light"] {
  --bg: #faf9f7;
  --bg-elevated: #ffffff;
  --bg-elevated-2: #f1f0ee;
  --bg-sunken: #eeece9;
  --text-primary: #14161c;
  --text-secondary: #565c6d;
  --text-tertiary: #8a90a0;
  --border: #e4e2de;
  --border-strong: #cfccc6;
  --brand: #7b61ff;
  --brand-strong: #6247e0;
  --brand-soft: #efe9ff;
  --color-error: #e0483e;
  --color-error-soft: #fbe9e7;
  --shadow-color: 220 20% 20%;
}

:root[data-theme="dark"] {
  --bg: #0b0d12;
  --bg-elevated: #14171f;
  --bg-elevated-2: #1c202b;
  --bg-sunken: #07080b;
  --text-primary: #f5f6fa;
  --text-secondary: #a8aec0;
  --text-tertiary: #6b7180;
  --border: #262b38;
  --border-strong: #363c4b;
  --brand: #9583ff;
  --brand-strong: #ab9dff;
  --brand-soft: #221c3d;
  --color-error: #ff6b61;
  --color-error-soft: #3a1613;
  --shadow-color: 220 60% 2%;
}