/* Colour tokens. 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.
   --lch-link is the brand violet, #6448e8. */

@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));

    /* Text on lime is always ink, in either mode (design-system.md, contrast rules). */
    --color-text-on-reward: oklch(22.1% 0.031 292.3);

    /* 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));
  }

  /* 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%;
    }
  }
}