/* Freeify design tokens — the canonical source for the whole family.
 *
 * Every tool copies this file rather than importing it across repo boundaries;
 * see brand/README.md. The light values are shared with Solomon's own
 * tokens.css, so the landing page and the apps read as one product.
 *
 * Restyling happens here. Component CSS references variables, never literals.
 */

:root {
  color-scheme: light dark;

  /* palette — light */
  --color-bg: #f7f7f5;
  --color-bg-alt: #eeeeeb;
  --color-surface: #ffffff;
  --color-surface-sunken: #f0f0ee;
  --color-border: #e4e4e0;
  --color-border-strong: #d2d2cc;
  --color-text: #1c1c1a;
  /* The greys and the two text accents run darker than Solomon's app tokens.
     Solomon puts small text on white cards; this page puts it on tinted section
     backgrounds, which costs contrast. Every value below clears WCAG AA (4.5:1)
     against --color-bg, --color-bg-alt AND --color-surface — verify before
     lightening anything. On a near-white background there is not enough room for
     three legible grey steps, so `faint` and `muted` land close together and the
     hierarchy comes from size, weight and the mono face instead. */
  --color-text-muted: #6a6a64;
  --color-text-faint: #666660;
  --color-accent: #10b981; /* fills and borders only — too light for text */
  --color-accent-strong: #07734d; /* the text-safe accent: links, CTAs, badges */
  --color-accent-soft: #d9f2e7;
  --color-danger: #dc2626;
  --color-danger-soft: #fde8e8;
  --color-positive: #07734d;
  --color-negative: #a1560b;

  /* type */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  /* spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;

  /* elevation */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.12);

  /* layout */
  --measure: 34rem;
  --container: 64rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0e0e0d;
    --color-bg-alt: #141413;
    --color-surface: #191918;
    --color-surface-sunken: #121211;
    --color-border: #2a2a27;
    --color-border-strong: #3d3d39;
    --color-text: #f4f4f1;
    --color-text-muted: #a8a8a1;
    /* Not a straight inversion of the light value: #6d6d67 on #0e0e0d is only
       3.8:1, which fails AA for the small print it is used on. */
    --color-text-faint: #8c8c85;
    --color-accent: #34d399;
    --color-accent-strong: #6ee7b7;
    --color-accent-soft: #10312a;
    --color-danger: #f87171;
    --color-danger-soft: #3a1a1a;
    --color-positive: #34d399;
    --color-negative: #fbbf24;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 2px 8px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.6);
  }
}