/* PlanWatch "Site Plan" marketing tokens.
   Ben, 15 Oct 2026: SF Pro, but the marketing site must not be plain — expressive scale, confident weights
   (up to semibold), colour, rich graphics and motion. The embedded product UI keeps the client workspace's
   own tokens (--ws-* in workspace.css), so the dashboard on the page is the real dashboard. */

:root {
  /* ---------- Type: SF Pro through the system stack (never self-hosted: Apple's licence) ---------- */
  --font-display: "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "SF Pro Text", "SF Pro Display", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --w-h1: 600; --w-h2: 600; --w-h3: 600; --w-num: 600; --w-quote: 500;   /* confident, never heavy (no 700+) */
  --em-style: normal;

  /* ---------- Neutrals: deep ink on white and drawing-paper bands ---------- */
  --paper: #FFFFFF;
  --paper-2: #F7F5F0;      /* drawing-paper band */
  --paper-3: #EFECE4;
  --sheet: #FFFFFF;
  --rule: #E7E4DD; --rule-soft: #F0EEE9; --rule-2: #D5D1C7;
  --ink: #111214;          /* 18:1 on white */
  --ink-2: #3F434A;        /* 10:1 */
  --ink-3: #6B6F77;        /* 5:1, AA for meta */
  --ink-4: #B8B5AE;        /* linework */

  /* ---------- Colour: PlanWatch amber is the brand; the rest are planning-drawing conventions ---------- */
  --amber: #F59E0B;        /* brand, same as the product accent */
  --amber-field: #FFBE3B;  /* big colour fields with ink type (10:1) */
  --amber-deep: #D97706;   /* proposed work in drawings, amber lines */
  --amber-ink: #8A4B04;    /* amber text on light grounds (6.4:1) */
  --amber-soft: #FFF0CF;
  --amber-wash: #FFF8EA;
  --site-red: #E5412D;     /* the red line: application site boundaries ONLY (Ben, 17 Oct) */
  /* Legacy --red* names now resolve to amber, so every non-boundary accent is PlanWatch amber. */
  --red: var(--amber-deep);       /* thin lines, ticks, bars, dots on white (#D97706) */
  --red-ink: var(--amber-ink);    /* small amber text */
  --red-wash: var(--amber-wash);
  --blue: #2E62F0;         /* blueprint: your patch, maps, links in data */
  --blue-ink: #1F47B8;
  --blue-wash: #EAF0FF;
  --green: #16A34A;        /* approved, won, trees */
  --green-ink: #15803D;
  --green-wash: #E7F7EC;
  --accent: var(--amber); --accent-strong: var(--amber-deep); --accent-soft: var(--amber-soft); --accent-ink: var(--amber-ink); --accent-wash: var(--amber-wash);
  --red-hatch: rgba(245, 158, 11, .28);   /* hatch for proposed work (amber) */
  --draw-proposed: var(--amber-deep);

  --focus: 0 0 0 3px rgba(245, 158, 11, .35);
  --scrim: rgba(17, 18, 20, .045);

  /* ---------- Expressive scale ---------- */
  --t-hero: clamp(46px, 6.7vw, 104px);
  --t-h2: clamp(36px, 4.7vw, 70px);
  --t-h3: clamp(26px, 2.6vw, 38px);
  --t-lead: clamp(18px, 1.45vw, 21px);
  --t-body: 17px;
  --track-display: -0.045em;
  --track-ui: -0.01em;
  --track-label: 0.02em;

  /* ---------- Space ---------- */
  --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; --s-11: 176px;
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1240px;

  /* ---------- Radius ---------- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --r-btn: 12px;   /* buttons, chips and fields are squared-off rounded rectangles, not pills */

  /* ---------- Depth ---------- */
  --sh-1: 0 0 0 1px var(--rule);
  --sh-2: 0 0 0 1px var(--rule), 0 10px 30px -12px rgba(17, 18, 20, .16);
  --sh-3: 0 0 0 1px rgba(17, 18, 20, .06), 0 30px 80px -28px rgba(17, 18, 20, .32);

  /* ---------- Motion: expressive; every move shows the product ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out */
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-instant: 120ms; --dur-quick: 200ms; --dur-enter: 360ms; --dur-exit: 220ms; --dur-draw: 800ms; --dur-slow: 560ms;
  --stagger: 40ms;
  --rise: 14px;

  color-scheme: light;
}

/* ---------- Dark bands and opt-in dark theme ---------- */
:root[data-theme="dark"], .theme-dark {
  --paper: #0F1012; --paper-2: #16181B; --paper-3: #1E2024; --sheet: #191B1F;
  --rule: #2A2D33; --rule-soft: #22252A; --rule-2: #3A3E46;
  --ink: #F4F2EC; --ink-2: #B9BCC3; --ink-3: #8C9098; --ink-4: #4E525A;
  --amber: #FFB52E; --amber-deep: #FFB52E; --amber-ink: #FFC95C; --amber-soft: rgba(255, 181, 46, .16); --amber-wash: rgba(255, 181, 46, .08);
  --site-red: #FF5A44;
  --blue: #7CA0FF; --blue-ink: #9DB8FF; --blue-wash: rgba(124, 160, 255, .14);
  --green: #4ADE80; --green-ink: #4ADE80; --green-wash: rgba(74, 222, 128, .14);
  --red-hatch: rgba(255, 181, 46, .3);
  --focus: 0 0 0 3px rgba(255, 181, 46, .4);
  --scrim: rgba(255, 255, 255, .04);
  --sh-1: 0 0 0 1px var(--rule);
  --sh-2: 0 0 0 1px var(--rule), 0 18px 40px -18px rgba(0, 0, 0, .6);
  --sh-3: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 90px -30px rgba(0, 0, 0, .8);
  color-scheme: dark;
}
.theme-amber {
  --paper: var(--amber-field); --paper-2: #FFC955; --sheet: #FFFFFF; --rule: rgba(17, 18, 20, .14); --rule-soft: rgba(17, 18, 20, .08);
  --ink: #111214; --ink-2: #2B2D31; --ink-3: #4A4C50; --amber-ink: #111214; --amber-deep: #111214;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant: .01ms; --dur-quick: .01ms; --dur-enter: .01ms; --dur-exit: .01ms; --dur-draw: .01ms; --dur-slow: .01ms; --stagger: 0ms; --rise: 0px; }
}