@layer reset, base, layout, components, utilities;

/* Tokens. The brand palette is private: components use only the semantic names below. */
:root {
  --brand-green: oklch(0.8 0.17 158);
  --brand-blue: oklch(0.68 0.12 262);
  --brand-ink: oklch(0.96 0.005 260);
  --brand-night: oklch(0.16 0.012 265);
  --brand-coffee: oklch(0.82 0.15 85);

  --white: oklch(1 0 0);
  --black: oklch(0 0 0);

  --color-primary: var(--brand-green);
  --color-accent: var(--brand-blue);
  --color-coffee: var(--brand-coffee);
  --color-on-primary: oklch(0.2 0.05 160);
  --color-canvas: var(--brand-night);
  --color-surface: oklch(0.21 0.014 265);
  --color-surface-raised: oklch(0.26 0.014 265);
  --color-ink: var(--brand-ink);
  --color-ink-muted: oklch(0.72 0.015 260);
  --color-line: color-mix(in oklch, var(--color-ink) 12%, transparent);
  --color-primary-surface: color-mix(in oklch, var(--color-primary) 14%, transparent);
  --color-accent-surface: color-mix(in oklch, var(--color-accent) 18%, transparent);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --radius: 14px;
  --radius-large: 22px;
  --width: 1120px;
}

@layer reset {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  h1,
  h2,
  h3,
  p,
  figure {
    margin: 0;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
}