/* Reel My Property — design tokens.
   One source for color, type, space, shape and motion, shared by the website and the studio.
   Roles and reasoning are in DESIGN.md. Pages use the names below, never raw values. */

:root {
  color-scheme: light;

  /* ---- Brand colors ---- */
  --paper: #faf8f2;        /* page */
  --paper-2: #f3f0e7;      /* alternate band */
  --paper-3: #e9e5da;      /* wells, tracks (no muted text on this) */
  --white: #ffffff;        /* cards and fields */
  --ink: #0f0f12;          /* text; the dark "screening room" */
  --ink-2: #44444b;        /* secondary text, 9.1:1 on paper */
  --ink-3: #6a6a72;        /* muted text, 5.0:1 on paper */
  --ink-soft: #2a2a31;     /* hover on ink fills */

  /* Cornflower: the one bright color. 500 is the brand value. */
  --cf-50: #f1f5fe;
  --cf-100: #e3ecfd;
  --cf-200: #c9dafa;
  --cf-300: #a6c1f6;
  --cf-400: #84aaf1;
  --cf-500: #6495ed;       /* fills only: ink text on it is 6.5:1, white text fails */
  --cf-600: #4678dc;
  --cf-700: #2f5fd0;       /* blue text, links and focus rings on paper, 5.4:1 */
  --cf-800: #21469e;
  --cf-900: #142b63;

  /* Status colors, studio only, never decorative */
  --ok: #1f7a4d;
  --ok-bg: #e4f3ea;
  --warn: #8a5a00;
  --warn-bg: #fbefd3;
  --bad: #b3261e;
  --bad-bg: #fbe6e3;

  /* ---- Semantic roles (re-scoped by [data-theme] below) ---- */
  --bg: var(--paper);
  --surface: var(--white);
  --well: var(--paper-2);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --line: rgb(15 15 18 / 0.12);
  --line-2: rgb(15 15 18 / 0.26);
  --accent: var(--cf-500);
  --accent-hover: var(--cf-400);
  --accent-press: var(--cf-600);
  --on-accent: var(--ink);
  --link: var(--cf-700);
  --focus: var(--cf-700);

  /* ---- Type ---- */
  --font-display: "Instrument Serif", "Instrument Serif Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-hero: clamp(3.25rem, 1.35rem + 7.4vw, 7.75rem);   /* 52 → 124 */
  --t-h1: clamp(2.75rem, 1.7rem + 4.4vw, 5.25rem);      /* 44 → 84 */
  --t-h2: clamp(2.25rem, 1.55rem + 3vw, 4rem);          /* 36 → 64 */
  --t-h3: clamp(1.625rem, 1.4rem + 0.95vw, 2.125rem);   /* 26 → 34 */
  --t-h4: 1.375rem;                                      /* 22 */
  --t-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);   /* 17 → 20 */
  --t-body: 1rem;                                        /* 16 */
  --t-small: 0.875rem;                                   /* 14 */
  --t-micro: 0.75rem;                                    /* 12, uppercase labels */

  /* ---- Space (4-point scale) ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section: clamp(4.5rem, 2.5rem + 8vw, 10rem);   /* vertical padding of a page section */
  --gutter: clamp(1.25rem, 0.5rem + 3.2vw, 3rem);  /* page side padding */
  --wrap: 75rem;                                   /* 1200: text and cards */
  --wrap-wide: 90rem;                              /* 1440: media */

  /* ---- Shape and depth ---- */
  --r-print: 6px;      /* photographs and film frames: crisp, like prints */
  --r-control: 12px;   /* fields, small tiles */
  --r-card: 18px;      /* cards and panels */
  --r-sheet: 24px;     /* dialogs, large panels */
  --r-pill: 999px;     /* buttons and chips */
  --shadow-1: 0 1px 2px rgb(15 15 18 / 0.05), 0 10px 28px -12px rgb(15 15 18 / 0.16);
  --shadow-2: 0 2px 6px rgb(15 15 18 / 0.08), 0 32px 80px -24px rgb(15 15 18 / 0.38);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-1: 140ms;
  --d-2: 280ms;
  --d-3: 560ms;
  --d-4: 900ms;

  /* ---- Layout ---- */
  --header-h: 4.5rem;
  --z-header: 50;
  --z-float: 60;
  --z-toast: 90;
}

/* Pale cornflower band */
[data-theme="wash"] {
  --bg: var(--cf-100);
  --well: var(--cf-200);
  --fg-3: var(--ink-2);
  --line: rgb(20 43 99 / 0.16);
  --line-2: rgb(20 43 99 / 0.34);
  --link: var(--cf-800);
  --focus: var(--cf-800);
}

/* Ink: the screening room */
[data-theme="ink"] {
  color-scheme: dark;
  --bg: var(--ink);
  --surface: #1a1a1f;
  --well: #1f1f25;
  --fg: var(--paper);
  --fg-2: #c2c0b9;
  --fg-3: #94928c;
  --line: rgb(250 248 242 / 0.14);
  --line-2: rgb(250 248 242 / 0.32);
  --link: var(--cf-300);
  --focus: var(--cf-300);
}

/* Solid cornflower field: ink does all the work, so the "accent" becomes ink */
[data-theme="cornflower"] {
  --bg: var(--cf-500);
  --surface: var(--cf-400);
  --well: var(--cf-400);
  --fg: var(--ink);
  --fg-2: #15151a;
  --fg-3: #1c1c23;
  --line: rgb(15 15 18 / 0.22);
  --line-2: rgb(15 15 18 / 0.45);
  --accent: var(--ink);
  --accent-hover: var(--ink-soft);
  --accent-press: #000;
  --on-accent: var(--paper);
  --link: var(--ink);
  --focus: var(--ink);
}

@media (max-width: 40rem) {
  :root { --header-h: 4rem; }
}