/*
 * Pacific Muse design tokens — CSS custom properties
 * Source of truth: tokens/tokens.json (Pacific Muse design system, v1).
 * Generated for the Vegan Fieldnotes handoff. Do not invent new values;
 * if a value is missing, add it to tokens.json first, then here.
 *
 * Naming: --pm-<group>-<token-name>. Role aliases (--pm-brand-*) point at
 * palette values; components should prefer role aliases where one exists.
 */
:root {
  /* ---------- Palette ---------- */
  --pm-color-pacific-blue: #0D3B66;     /* primary brand: navbar, primary buttons, links, focus */
  --pm-color-coastal-teal: #00A5CF;     /* water/coast; FILL ONLY (2.8:1 on canvas) */
  --pm-color-emerald-green: #50C878;    /* success/environment; FILL ONLY (2.1:1) */
  --pm-color-fire-orange: #FFA630;      /* CTA fill, hover of primary; text on it = isabelline-black */
  --pm-color-poppy-red: #DA2C38;        /* errors, alerts, link hover; 4.7:1 as text */
  --pm-color-seasalt-white: #F9F8F8;    /* footer, text on pacific-blue */
  --pm-color-olive-black: #262C26;      /* headings */
  --pm-color-isabelline-white: #fefdfb; /* page canvas */
  --pm-color-isabelline-black: #201908; /* body text */

  /* Supporting neutrals */
  --pm-color-stone-600: #57534E;  /* long-form body copy, secondary text (7.5:1) */
  --pm-color-stone-700: #44403C;  /* emphasis (10.1:1) */
  --pm-color-stone-800: #292524;  /* high-contrast text */
  --pm-color-slate-200: #E2E8F0;  /* hover grounds (light) */
  --pm-color-slate-300: #CBD5E1;  /* hairlines/dividers — never a control's only boundary */
  --pm-color-gray-300: #D1D5DB;   /* disabled fills/borders */
  --pm-color-gray-500: #6B7280;   /* placeholders (4.8:1) */

  /* Dark feature band (immersive/photographic sections ONLY) */
  --pm-color-night: #000010;
  --pm-color-night-mist: #a0d8ef;
  --pm-color-night-mist-40: #a0d8ef40;

  /* ---------- Theme roles ---------- */
  --pm-brand-canvas: var(--pm-color-isabelline-white);
  --pm-brand-text: var(--pm-color-isabelline-black);
  --pm-brand-heading: var(--pm-color-olive-black);
  --pm-brand-navbar: var(--pm-color-pacific-blue);
  --pm-brand-navbar-text: var(--pm-color-seasalt-white);
  --pm-brand-footer: var(--pm-color-seasalt-white);
  --pm-brand-accent: var(--pm-color-poppy-red);
  --pm-brand-highlight: var(--pm-color-fire-orange);
  --pm-brand-secondary: var(--pm-color-emerald-green);
  --pm-brand-tertiary: var(--pm-color-coastal-teal);
  --pm-brand-body: var(--pm-color-stone-600);
  --pm-brand-hairline: var(--pm-color-slate-300);

  /* ---------- Type ---------- */
  --pm-font-serif: "Noto Serif", ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --pm-font-sans: Arial, Helvetica, sans-serif;
  --pm-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* size / line-height / weight / tracking per text style */
  --pm-text-display-hero-size: 60px;  --pm-text-display-hero-lh: 1;    --pm-text-display-hero-weight: 700; --pm-text-display-hero-tracking: -0.025em;
  --pm-text-display-size: 48px;       --pm-text-display-lh: 1;         --pm-text-display-weight: 700;      --pm-text-display-tracking: -0.025em;
  --pm-text-heading-1-size: 36px;     --pm-text-heading-1-lh: 40px;    --pm-text-heading-1-weight: 700;
  --pm-text-heading-2-size: 30px;     --pm-text-heading-2-lh: 36px;    --pm-text-heading-2-weight: 700;
  --pm-text-heading-3-size: 24px;     --pm-text-heading-3-lh: 32px;    --pm-text-heading-3-weight: 600;
  --pm-text-heading-4-size: 20px;     --pm-text-heading-4-lh: 28px;    --pm-text-heading-4-weight: 600;
  --pm-text-lead-size: 18px;          --pm-text-lead-lh: 28px;
  --pm-text-body-size: 16px;          --pm-text-body-lh: 24px;
  --pm-text-body-relaxed-lh: 1.625;
  --pm-text-small-size: 14px;         --pm-text-small-lh: 20px;
  --pm-text-label-size: 14px;         --pm-text-label-lh: 20px;        --pm-text-label-weight: 500;        --pm-text-label-tracking: 0.025em;
  --pm-text-caption-size: 12px;       --pm-text-caption-lh: 16px;

  /* ---------- Spacing (4px base) ---------- */
  --pm-space-1: 0.25rem;  /* 4 */
  --pm-space-2: 0.5rem;   /* 8 */
  --pm-space-3: 0.75rem;  /* 12 */
  --pm-space-4: 1rem;     /* 16 */
  --pm-space-6: 1.5rem;   /* 24 */
  --pm-space-8: 2rem;     /* 32 */
  --pm-space-10: 2.5rem;  /* 40 */
  --pm-space-12: 3rem;    /* 48 */
  --pm-space-16: 4rem;    /* 64 */

  /* ---------- Radius ---------- */
  --pm-radius-md: 0.375rem;  /* inputs, small buttons */
  --pm-radius-lg: 0.5rem;    /* buttons, cards */
  --pm-radius-xl: 0.75rem;   /* feature panels */
  --pm-radius-full: 9999px;  /* pills, chips */

  /* ---------- Shadow ---------- */
  --pm-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --pm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --pm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --pm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* ---------- Measures / containers ---------- */
  --pm-measure-md: 28rem;
  --pm-measure-lg: 32rem;
  --pm-measure-xl: 36rem;
  --pm-measure-2xl: 42rem;
  --pm-measure-3xl: 48rem;
  --pm-measure-4xl: 56rem;
  --pm-container-7xl: 80rem;

  /* ---------- Breakpoints (reference only; CSS vars can't drive @media) ----------
     sm 640px  → gutter space-6
     md 768px  → grids go 2 columns
     lg 1024px → grids go 3 columns, gutter space-8, directory sidebar layout
  */
}