/* DimeDropper design tokens.
 *
 * Two layers, deliberately. Primitives (--n-*, --a-*, --z-*, --w-*) are raw
 * values and are never referenced by components. Semantics (--surface, --ink,
 * --accent...) name a role and are the only thing components may use. Dark mode
 * is therefore a remap of the semantic layer, not a second copy of the
 * stylesheet.
 *
 * The identity is a lit, high-clarity chassis with analytical discipline
 * underneath: a cool graphite base that stays out of the way, one vivid teal
 * accent that carries every action, an azure partner it gradients into so the
 * primary surfaces have depth rather than flat fill, gold reserved for
 * emphasis, and a density switch so marketing pages breathe while app pages
 * tighten.
 *
 * The base used to be warm near-monochrome. It read as calm on a swatch and as
 * dull on a screen: beige surfaces flatten a bright accent instead of letting
 * it ring, and the old teal was dark enough (#15565c) to look like chrome
 * rather than brand. Cool neutrals give the accent somewhere to sit.
 *
 * Every colour below is chosen against the WCAG AA floor that
 * tests/test_design_tokens.py enforces on both themes. Brighter is only worth
 * having if it still reads, so the vivid end of each ramp is used for fills,
 * rules and glows, and the AA-checked semantic points sit a step or two down.
 *
 * Fonts are system stacks on purpose. This product's pitch is that it does not
 * phone home; loading a webfont from a CDN on every page would undercut that.
 */

:root {
  /* ---- primitives: cool graphite ramp ---- */
  --n-50:  #f5f8fd;
  --n-100: #eaeff8;
  --n-200: #dae2f0;
  --n-300: #c2cce0;
  --n-400: #8e9bb3;
  --n-500: #5a6780;
  --n-600: #47536a;
  --n-700: #333d51;
  --n-800: #1e2635;
  --n-900: #111826;
  --n-950: #070b14;

  /* ---- primitives: accent, a lit teal.
   * 300/400 are the signal end -- rules, glows, dark-mode ink. 700 is the
   * light-mode text and fill point, and it is set by the hardest ground the
   * accent ever has to read on, not by white: an .access-pill or .badge.accent
   * is accent type on an accent-soft fill inside a sunken block, which is two
   * tints deep. Judged on white alone this ramp sat two steps brighter and that
   * pairing measured 3.8:1. */
  --a-50:  #e6fdfd;
  --a-100: #c0f7f9;
  --a-200: #86edf2;
  --a-300: #4ad9e0;
  --a-400: #1cc3cd;
  --a-500: #05a5b0;
  --a-600: #068892;
  --a-700: #056b75;
  --a-800: #085a62;
  --a-900: #0a464c;

  /* ---- primitives: azure, the accent's gradient partner.
   * A second hue inside the same cool family, so a filled control can have a
   * direction to it without the page turning into two competing brands. */
  --z-300: #7cb6fb;
  --z-400: #4a95f5;
  --z-500: #2575e4;
  --z-600: #1a5cc0;

  /* ---- primitives: warm secondary, used sparingly for emphasis ---- */
  --w-200: #ffeec4;
  --w-300: #f8d68d;
  --w-400: #f0b642;
  --w-500: #cf9412;
  --w-600: #97690e;

  /* ---- primitives: data signal ---- */
  --pos-500: #0b7a52;
  --pos-300: #4ade9f;
  --neg-500: #cf2e26;
  --neg-300: #ff8f85;
  --cau-500: #96660b;
  --cau-300: #f0c24f;

  /* ---- type ---- */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Source Serif 4", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo,
               Consolas, monospace;

  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  /* Display sizes are fluid: the hero headline set at a flat 3rem is 48px on a
   * 375px phone, which wraps to four cramped lines. These interpolate instead
   * of stepping at a breakpoint. */
  --text-2xl:  clamp(1.5rem, 1.28rem + 0.9vw, 1.75rem);
  --text-3xl:  clamp(1.75rem, 1.35rem + 1.7vw, 2.25rem);
  --text-4xl:  clamp(2.125rem, 1.4rem + 3.2vw, 3rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.6;

  --tracking-tight: -0.022em;
  --tracking-wide:  0.08em;

  /* ---- spacing, on a 4px grid ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ---- density: the analytical discipline underneath the calm chassis.
   * Marketing pages inherit the roomy default; app pages set
   * data-density="compact" on <html> to tighten the same components. */
  --pad-panel: var(--sp-6);
  --gap-stack: var(--sp-5);
  --shell-max: 1120px;

  /* ---- semantics: light ---- */
  --canvas: var(--n-50);
  /* A single wide wash behind the whole page. Flat canvas is what made the old
   * palette read as printed rather than lit; this is faint enough to never
   * compete with a panel and enough to keep the page from going dead. */
  --canvas-wash:
    radial-gradient(120% 70% at 12% -10%,
                    color-mix(in srgb, var(--a-400) 13%, transparent),
                    transparent 62%),
    radial-gradient(90% 60% at 92% 0%,
                    color-mix(in srgb, var(--z-400) 9%, transparent),
                    transparent 58%);
  --surface: #ffffff;
  --surface-sunken: var(--n-100);
  --surface-raised: #ffffff;
  /* The 1px lit top edge that separates a raised surface from a printed
   * rectangle. Applied as an inset shadow so it costs no layout. */
  --surface-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  --ink: var(--n-900);
  --ink-muted: var(--n-600);
  --ink-subtle: var(--n-500);
  --ink-inverse: var(--n-50);

  --line: color-mix(in srgb, var(--n-800) 13%, transparent);
  --line-strong: color-mix(in srgb, var(--n-800) 24%, transparent);

  --accent: var(--a-700);
  --accent-hover: var(--a-800);
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in srgb, var(--a-500) 10%, transparent);
  /* The signal end of the ramp: hairlines, rules, marker dots, the glow under a
   * primary action. Never carries text, so it is not AA-bound and can stay as
   * bright as it looks. */
  --accent-bright: var(--a-500);
  /* Two gradients, because a fill and a hairline want opposite things.
   * A filled control wants almost no hue travel -- deepening one colour down
   * the face reads as a lit surface, while a visible sweep from teal to blue
   * reads as a gradient for its own sake. A 3px rule is too thin to show
   * anything subtle, so that one is allowed the full sweep.
   *
   * The fill stays between --a-700 and --a-800 so that every point under a
   * white label clears AA -- 6.2:1 at the lightest. It started a step brighter
   * at --a-600, which is 4.25:1, and the only thing keeping that legible was
   * the button's padding holding the text off the top edge. The lit top edge
   * comes from --surface-sheen instead, which cannot fail that way. */
  --accent-gradient: linear-gradient(160deg, var(--a-700) 0%, var(--a-800) 100%);
  --accent-rule: linear-gradient(110deg, var(--a-400) 0%, var(--a-600) 45%, var(--z-500) 100%);
  --accent-glow: 0 6px 18px -8px color-mix(in srgb, var(--a-600) 70%, transparent),
                 0 2px 6px -2px color-mix(in srgb, var(--z-600) 35%, transparent);

  --emphasis: var(--w-600);
  --emphasis-soft: color-mix(in srgb, var(--w-400) 22%, transparent);

  --positive: var(--pos-500);
  --negative: var(--neg-500);
  --caution: var(--cau-500);

  /* Tinted with the ink hue rather than neutral black: a cool shadow under a
   * cool neutral reads as depth, a grey one reads as dirt. */
  --shadow-sm: 0 1px 2px rgba(17, 24, 38, 0.05),
               0 2px 8px rgba(17, 24, 38, 0.05);
  --shadow-md: 0 2px 4px rgba(17, 24, 38, 0.05),
               0 8px 20px rgba(17, 24, 38, 0.07),
               0 20px 44px rgba(17, 24, 38, 0.05);
  --shadow-lg: 0 4px 10px rgba(17, 24, 38, 0.07),
               0 18px 40px rgba(17, 24, 38, 0.10),
               0 40px 80px rgba(17, 24, 38, 0.08);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--a-400) 48%, transparent);

  color-scheme: light;
}

[data-density="compact"] {
  --pad-panel: var(--sp-4);
  --gap-stack: var(--sp-4);
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --radius-lg: 16px;
}

/* ---- semantics: dark.
 * Applied by system preference, and overridable by an explicit data-theme so a
 * future toggle wins in both directions. Surfaces lift rather than the ink
 * dropping, which keeps the chassis from turning into a black slab -- and the
 * canvas is a deep blue-black rather than brown, because that is what lets the
 * teal read as lit instead of sooty. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: var(--n-950);
    --canvas-wash: radial-gradient(120% 70% at 12% -10%, color-mix(in srgb, var(--a-400) 12%, transparent), transparent 62%), radial-gradient(90% 60% at 92% 0%, color-mix(in srgb, var(--z-500) 14%, transparent), transparent 58%);
    --surface: #111a2b;
    --surface-sunken: #0b1220;
    --surface-raised: #182238;
    --surface-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.07);

    --ink: var(--n-100);
    --ink-muted: var(--n-300);
    --ink-subtle: var(--n-400);
    --ink-inverse: var(--n-950);

    --line: color-mix(in srgb, var(--n-300) 18%, transparent);
    --line-strong: color-mix(in srgb, var(--n-300) 32%, transparent);

    --accent: var(--a-300);
    --accent-hover: var(--a-200);
    --accent-ink: var(--n-950);
    --accent-soft: color-mix(in srgb, var(--a-400) 22%, transparent);
    --accent-bright: var(--a-300);
    --accent-gradient: linear-gradient(160deg, var(--a-300) 0%, var(--a-400) 55%, var(--a-500) 100%);
    --accent-rule: linear-gradient(110deg, var(--a-200) 0%, var(--a-400) 45%, var(--z-400) 100%);
    --accent-glow: 0 8px 24px -10px color-mix(in srgb, var(--a-400) 85%, transparent), 0 2px 8px -3px color-mix(in srgb, var(--z-400) 45%, transparent);

    --emphasis: var(--w-300);
    --emphasis-soft: color-mix(in srgb, var(--w-400) 24%, transparent);

    --positive: var(--pos-300);
    --negative: var(--neg-300);
    --caution: var(--cau-300);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5), 0 28px 64px rgba(0, 0, 0, 0.62);

    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--a-300) 55%, transparent);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --canvas: var(--n-950);
  --canvas-wash: radial-gradient(120% 70% at 12% -10%, color-mix(in srgb, var(--a-400) 12%, transparent), transparent 62%), radial-gradient(90% 60% at 92% 0%, color-mix(in srgb, var(--z-500) 14%, transparent), transparent 58%);
  --surface: #111a2b;
  --surface-sunken: #0b1220;
  --surface-raised: #182238;
  --surface-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  --ink: var(--n-100);
  --ink-muted: var(--n-300);
  --ink-subtle: var(--n-400);
  --ink-inverse: var(--n-950);

  --line: color-mix(in srgb, var(--n-300) 18%, transparent);
  --line-strong: color-mix(in srgb, var(--n-300) 32%, transparent);

  --accent: var(--a-300);
  --accent-hover: var(--a-200);
  --accent-ink: var(--n-950);
  --accent-soft: color-mix(in srgb, var(--a-400) 22%, transparent);
  --accent-bright: var(--a-300);
  --accent-gradient: linear-gradient(160deg, var(--a-300) 0%, var(--a-400) 55%, var(--a-500) 100%);
  --accent-rule: linear-gradient(110deg, var(--a-200) 0%, var(--a-400) 45%, var(--z-400) 100%);
  --accent-glow: 0 8px 24px -10px color-mix(in srgb, var(--a-400) 85%, transparent), 0 2px 8px -3px color-mix(in srgb, var(--z-400) 45%, transparent);

  --emphasis: var(--w-300);
  --emphasis-soft: color-mix(in srgb, var(--w-400) 24%, transparent);

  --positive: var(--pos-300);
  --negative: var(--neg-300);
  --caution: var(--cau-300);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5), 0 28px 64px rgba(0, 0, 0, 0.62);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--a-300) 55%, transparent);

  color-scheme: dark;
}