/* Layer order for the whole site — declared once, here, since this file
   loads first. A rule in a later layer always wins over an earlier layer,
   regardless of selector specificity or which file happens to load first.
   That's the whole reason these are named layers instead of just being 14
   files relying on <link> tag order: `overrides` and `responsive` need to
   reliably beat `components` no matter how these files get reordered later. */
@layer tokens, base, components, overrides, responsive, motion;

@layer tokens {
:root {
  /*  ========================================
    COLOR PRIMITIVES
    ======================================== */
  --neutral-200: #f5f5f5;
  --neutral-300: #f9f8ef;
  --neutral-500: #6b6b6b;
  --neutral-700: #4d4d4d;
  --green-300: #74b238;
  --green-500: #1b7b01;
  --green-900: #0A4C00;
  --orange-500: #f8991d;
  --orange-700: #E1A660;
  --orange-900: #977241;
  --white: #ffffff;
  --black: #000000;
  --pink-500: #ff9999;

  /*  ========================================
    SEMANTIC COLORS
    ======================================== */
  --brand-primary: var(--green-500);
  --brand-secondary: var(--orange-500);
  --brand-tertiary: var(--neutral-300);
  --brand-primary-dark: var(--green-900);
  --brand-primary-light: var(--green-300);
  --color-bg: var(--white);
  --color-bg-alt: var(--neutral-300);
  --color-text: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-border: #e0e0e0;
  --color-dark: #262626;
  --color-placeholder: #cfcfcf;

  /*  ========================================
    TYPOGRAPHY
    ======================================== */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Fredoka', sans-serif;
  --font-condensed: 'Arial Narrow', Arial, sans-serif;

  --container-max: 1200px;
  --gutter: 5vw;
}
}