/* Visual values from the Figma brand manual; names and structure follow 37signals.
   The Figma name for each token is in docs/design-system.md. Every text/background pair
   is AA in both modes; change a value there and recheck before changing it here. */

@font-face {
  font-family: "Manrope";
  src: url("/assets/manrope-latin-wght-757d91ba.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Raw oklch channels. Dark mode swaps only these. */
    --lch-bg: 98.4% 0.004 301.4;
    --lch-bg-raised: 100% 0 0;
    --lch-text: 22.1% 0.031 292.3;
    --lch-text-reversed: 100% 0 0;
    --lch-subtle: 49.2% 0.029 295.5;
    --lch-border: 89.3% 0.019 299;
    --lch-border-strong: 65.5% 0.013 296.2; /* 3:1, the edge of every input */
    --lch-link: 53.2% 0.228 283.5;
    --lch-link-hover: 45.3% 0.215 281.5;
    --lch-reward: 90.8% 0.184 123.4;
    --lch-positive: 53.5% 0.119 157.3; /* darker than Figma's success: AA on --color-bg too */
    --lch-warning: 56% 0.129 62.7;
    --lch-negative: 55% 0.174 19.9;
    --lch-info: 53% 0.161 260.4;
    --tint: 10%;

    --color-bg: oklch(var(--lch-bg));
    --color-bg-raised: oklch(var(--lch-bg-raised));
    --color-text: oklch(var(--lch-text));
    --color-text-reversed: oklch(var(--lch-text-reversed));
    --color-subtle: oklch(var(--lch-subtle));
    --color-border: oklch(var(--lch-border));
    --color-border-strong: oklch(var(--lch-border-strong));
    --color-link: oklch(var(--lch-link));
    --color-link-hover: oklch(var(--lch-link-hover));
    --color-reward: oklch(var(--lch-reward));
    --color-positive: oklch(var(--lch-positive));
    --color-warning: oklch(var(--lch-warning));
    --color-negative: oklch(var(--lch-negative));
    --color-info: oklch(var(--lch-info));

    /* Backgrounds only: text on a tint is always --color-text, never --color-subtle. */
    --color-link-tint: color-mix(in srgb, var(--color-link) var(--tint), var(--color-bg-raised));
    --color-reward-tint: color-mix(in srgb, var(--color-reward) 25%, var(--color-bg-raised));
    --color-positive-tint: color-mix(in srgb, var(--color-positive) var(--tint), var(--color-bg-raised));
    --color-warning-tint: color-mix(in srgb, var(--color-warning) var(--tint), var(--color-bg-raised));
    --color-negative-tint: color-mix(in srgb, var(--color-negative) var(--tint), var(--color-bg-raised));
    --color-info-tint: color-mix(in srgb, var(--color-info) var(--tint), var(--color-bg-raised));

    --font-sans: "Manrope", system-ui, sans-serif;
    --text-x-small: 0.75rem;
    --text-small: 0.875rem;
    --text-normal: 1rem;
    --text-medium: 1.125rem;
    --text-large: 1.375rem;
    --text-x-large: clamp(1.5rem, 1.2rem + 1.2vw, 1.75rem);
    --text-xx-large: clamp(1.75rem, 1.3rem + 2vw, 2.25rem);

    --block-space: 1rem;
    --block-space-half: calc(var(--block-space) / 2);
    --block-space-double: calc(var(--block-space) * 2);
    --inline-space: 1ch;
    --inline-space-half: calc(var(--inline-space) / 2);
    --inline-space-double: calc(var(--inline-space) * 2);

    --radius: 0.625rem;
    --radius-large: 1rem;
    --radius-x-large: 1.25rem;
    --radius-pill: 99rem;

    --shadow: 0 0.25rem 0.75rem oklch(var(--lch-text) / 0.08);
    --shadow-large: 0 0.75rem 2rem oklch(var(--lch-text) / 0.16);

    --focus-ring: 2px solid var(--color-link);
    --focus-offset: 2px;
    --touch-target: 2.75rem;
    --transition: 200ms ease;
  }

  /* Derived from the Figma hues by lightness, not designed in Figma: Ana to review. */
  @media (prefers-color-scheme: dark) {
    :root {
      --lch-bg: 17% 0.022 292.3;
      --lch-bg-raised: 22.1% 0.031 292.3;
      --lch-text: 98.4% 0.004 301.4;
      --lch-text-reversed: 22.1% 0.031 292.3;
      --lch-subtle: 61.5% 0.029 295.5;
      --lch-border: 32% 0.019 299;
      --lch-border-strong: 52% 0.013 296.2;
      --lch-link: 63% 0.206 283.5;
      --lch-link-hover: 71% 0.156 283.5;
      --lch-positive: 60% 0.119 157.3;
      --lch-warning: 62% 0.129 62.7;
      --lch-negative: 63.5% 0.174 19.9;
      --lch-info: 61.5% 0.161 260.4;
      --tint: 14%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --transition: 0ms; }
  }
}