/* keel's only colours and fonts: the two `initial`s turn Tailwind's palette and font stacks off
   for everything that imports this file. */
:root {
  --color-*: initial;
  --font-*: initial;

  /* Black card stock on a darker table, type in the white of the paper figure. */
  --color-keel-ground: oklch(10.5% 0.004 70);
  --color-keel-paper: oklch(15.5% 0.005 70);
  --color-keel-ink: oklch(94% 0.008 85);
  --color-keel-soft: oklch(66% 0.008 85);
  --color-keel-hair: oklch(32% 0.006 85);
  --color-keel-error: oklch(72% 0.13 30);

  /* Chart series, in order of use, each distinct on keel-paper. */
  --color-series-1: oklch(78% 0.11 85);
  --color-series-2: oklch(72% 0.11 230);
  --color-series-3: oklch(72% 0.13 30);
  --color-series-4: oklch(76% 0.12 150);
  --color-series-5: oklch(70% 0.12 300);
  --color-series-6: oklch(80% 0.1 190);
  --color-series-7: oklch(70% 0.13 350);
  --color-series-8: oklch(66% 0.01 85);

  --font-keel:
    "Schibsted Grotesk Variable", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui:
    "JetBrains Mono Variable", ui-monospace, "SFMono-Regular", Menlo, Consolas,
    monospace;

  --text-fine: 13px;
  --text-blurb: clamp(16px, 1.15vw + 9px, 21px);
  --text-lead: clamp(17px, 1.2vw + 10px, 22px);
  --text-done: clamp(20px, 1.6vw + 12px, 28px);
  --text-wordmark: clamp(96px, 30vw, 440px);

  --leading-wordmark: 0.78;
  --tracking-wordmark: -0.055em;

  --spacing-sheet: clamp(10px, 1.6vw, 24px);
  --spacing-sheet-pad: clamp(18px, 3vw, 44px);

  --ease-keel: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Paper grain on a sheet. */
@utility grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@layer base {
  .keel :focus-visible {
    outline: 2px solid var(--color-keel-ink);
    outline-offset: 3px;
  }
}