/*
 * Roost design tokens — the single source of truth.
 *
 * website/css/tokens.css is a byte-for-byte copy of this file (CI checks it).
 * The app maps these onto Tailwind's @theme in src/app/globals.css; see
 * design/IMPLEMENTATION_PROMPT.md.
 *
 * The idea in one line: warm paper, pencil ink, one terracotta accent — and a
 * "dusk" surface reserved for the moments where a render is the hero.
 */
:root {
  /* ── colour: paper (light surfaces) ── */
  --paper: #faf7f2;          /* page */
  --paper-raised: #ffffff;   /* cards, panels, inputs */
  --paper-sunk: #f2ece2;     /* wells, table stripes, hover on paper */
  --line: #e9e2d6;           /* hairlines */
  --line-strong: #d9cfbf;    /* input borders, dividers that must be seen */

  /* ── colour: ink (text) ── */
  --ink: #1d1b18;            /* headings, body */
  --ink-2: #4a463f;          /* secondary text */
  --ink-3: #7a746a;          /* captions, placeholders — 4.6:1 on --paper */

  /* ── colour: clay (the one accent) ── */
  --clay: #b8552f;           /* selection, focus, the primary action on dusk */
  --clay-hover: #a3482a;
  --clay-bright: #d9764a;    /* on dusk surfaces only */
  --clay-soft: #f6e9e1;      /* tinted backgrounds, selected rows */

  /* ── colour: supporting, used sparingly ── */
  --sun: #e2a94f;            /* light, time of day, "render" moments */
  --sun-soft: #fbf0d9;
  --sage: #6f8f68;           /* success, "fits", living things */
  --sage-soft: #e8efe5;
  --sky: #4f7fa8;            /* measurements and guides on the plan */
  --sky-soft: #e6eef5;
  --danger: #b3372f;
  --danger-soft: #f8e4e1;

  /* ── colour: dusk (dark surfaces — the render viewer, hero moments) ── */
  --dusk: #15171d;
  --dusk-raised: #1e2129;
  --dusk-line: #2e323d;
  --on-dusk: #f4efe7;
  --on-dusk-2: #b5b0a6;

  /* ── type ── */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive; /* annotations only */
  --display-settings: "SOFT" 60, "WONK" 0;

  --text-xs: 0.75rem;    /* 12 — labels, captions */
  --text-sm: 0.8125rem;  /* 13 — app UI default */
  --text-base: 1rem;     /* 16 — reading */
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --text-4xl: clamp(2.6rem, 1.5rem + 5vw, 5rem);

  /* ── space: a 4px grid ── */
  --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;

  /* ── shape ── */
  --r-sm: 6px;     /* inputs, chips */
  --r-md: 10px;    /* buttons, popovers */
  --r-lg: 16px;    /* cards, panels */
  --r-xl: 28px;    /* the viewport, hero media */
  --r-full: 999px;

  /* ── depth: warm-tinted, never grey ── */
  --shadow-1: 0 1px 2px rgba(58, 44, 30, 0.06), 0 1px 1px rgba(58, 44, 30, 0.04);
  --shadow-2: 0 4px 14px rgba(58, 44, 30, 0.08), 0 1px 3px rgba(58, 44, 30, 0.06);
  --shadow-3: 0 18px 50px rgba(58, 44, 30, 0.14), 0 4px 12px rgba(58, 44, 30, 0.06);
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--clay);

  /* ── motion ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* things arriving */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* things moving */
  --ease-settle: cubic-bezier(0.34, 1.4, 0.64, 1);  /* furniture landing: one small overshoot */
  --dur-1: 120ms;   /* hover, press */
  --dur-2: 220ms;   /* popovers, toggles */
  --dur-3: 420ms;   /* panels, view changes */
  --dur-4: 900ms;   /* walls rising, light changing */
}

/* The app's dark theme: the dusk palette becomes the default surface. */
[data-theme="dusk"] {
  --paper: #15171d; --paper-raised: #1e2129; --paper-sunk: #101217;
  --line: #2a2e38; --line-strong: #3a3f4c;
  --ink: #f4efe7; --ink-2: #c4beb3; --ink-3: #8f897e;
  --clay: #d9764a; --clay-hover: #e58a60; --clay-soft: #3a2419;
  --sun-soft: #3a2e17; --sage-soft: #1f2b1f; --sky-soft: #1a2633; --danger-soft: #3a1b18;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
}