/* Prairie Desk design tokens. The only file in the site with hex values.
   Three layers (design-system skill): primitive -> semantic -> component.
   Source: context/sites/prairie-desk/02-design.md sections 5 to 7. */

@font-face { font-family: "Barlow"; src: url("/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/fonts/barlow-semi-condensed-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/fonts/barlow-semi-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- 1. Primitives ---------- */
  --green-800: #2F4A3A;
  --green-900: #22382B;
  --ink: #1F2B24;
  --cream: #F4EEDF;
  --cream-soft: #E6DCC3;
  --paper: #FFFDF8;
  --edge: #CFC6AE;
  --wheat: #C9A54A;
  --wheat-ink: #7A5F1C;
  --wheat-tint: #EADBB0;
  --muted: #4E5A52;
  --field-line: #6F7A72;
  --music: #1F6BB0;
  --life: #6B3A78;
  --social: #A3282B;
  --science: #9A5410;
  --reading: #6A2C55;
  --math: #1E6470;
  --ink-rgb: 31 43 36;        /* --ink as channels, for tinted shadows */
  --shadow-deep-rgb: 16 26 20;

  --font-display: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  /* Spacing scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Nothing off it. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Type scale (desktop values; phone values set in the media query below) */
  --fs-display: 64px; --lh-display: 1.02;
  --fs-h2: 44px;      --lh-h2: 1.08;
  --fs-h3: 26px;
  --fs-card: 21px;
  --fs-lead: 20px;
  --fs-body: 18px;
  --fs-ui: 17px;
  --fs-small: 15px;
  --fs-chip: 13px;

  /* Radius (shape lock, section 7) */
  --r-panel: 28px;
  --r-card: 16px;
  --r-tab: 10px;
  --r-pill: 999px;
  --r-paper: 2px;
  --r-input: 10px;

  /* Motion (emil-design-eng) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Layout */
  --container: 1152px;
  --gutter: 64px;
  --panel-inset: 16px;
  --header-h: 72px;
  --section-pad: var(--s-10);

  /* ---------- 2. Semantic ---------- */
  --bg: var(--cream);
  --surface: var(--paper);
  --field: var(--green-800);
  --text: var(--ink);
  --text-muted: var(--muted);
  --text-on-field: var(--cream);
  --text-on-field-soft: var(--cream-soft);
  --heading: var(--green-800);
  --link: var(--green-800);
  --action: var(--green-800);
  --action-hover: var(--green-900);
  --action-text: var(--cream);
  --focus: var(--green-800);
  --focus-on-field: var(--wheat);
  --rule-accent: var(--wheat);
  --placeholder-line: var(--wheat-ink);
  --placeholder-tint: var(--wheat-tint);
  --error: var(--social);
  --hairline: var(--edge);

  --shadow-float: 0 1px 2px rgb(var(--ink-rgb) / .08), 0 14px 32px -12px rgb(var(--ink-rgb) / .28);
  --shadow-float-lift: 0 2px 4px rgb(var(--ink-rgb) / .10), 0 22px 40px -14px rgb(var(--ink-rgb) / .34);
  --shadow-paper: 0 1px 0 rgb(var(--ink-rgb) / .10), 0 12px 28px -10px rgb(var(--shadow-deep-rgb) / .50);

  /* ---------- 3. Component ---------- */
  --button-h: 52px;
  --button-h-sm: 44px;
  --button-pad-x: var(--s-5);
  --tab-h: 36px;
  --input-h: 52px;
  --hero-page-w: 340px;
}

@media (max-width: 767px) {
  :root {
    --fs-display: 40px;
    --fs-h2: 30px;
    --fs-h3: 22px;
    --fs-card: 19px;
    --fs-lead: 18px;
    --fs-body: 17px;
    --r-panel: 20px;
    --r-card: 14px;
    --gutter: 16px;
    --panel-inset: 8px;
    --header-h: 64px;
    --section-pad: var(--s-8);
    --tab-h: 44px;
    --hero-page-w: 220px;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root { --gutter: 32px; --panel-inset: 12px; --section-pad: var(--s-9); --fs-display: 56px; }
}