/* Plot Photography: design tokens.
   Source: brand-kit/tokens.css v3 (28 Sep 2026, approved by Nicolas), copied value for value.
   The two choices that file left open are resolved to the locked ones: General Sans (display 600,
   text 400) and the window-glow accent #E9B872. The Satoshi / Schibsted / orange option blocks are gone,
   so no data-type or data-accent attribute is needed on <html>.
   One addition: --radius-photo (4px), the standing rule from Nicolas's 2026-09-29 review that image
   corners are small. The mockups wrote it as a literal 4px; it is a token here so it stays one value.
   Every colour, type, space and motion value in the theme resolves to a property in this file. */

:root {
  /* ---------- Color ----------
     Warm dark ground (not pure black), bone for light sections, one THIN accent. */
  --plot-night:      #15120F;  /* default ground, warm charcoal. Bone on it 16.2:1 */
  --plot-night-2:    #201C18;  /* card and panel surface on night. Bone on it 14.7:1 */
  --plot-night-3:    #2A2520;  /* hover surface, borders that need to read */
  --plot-bone:       #F3EEE6;  /* light ground AND the primary button on dark. Night on it 16.2:1 */
  --plot-ink:        #14110E;  /* text and buttons on bone (16.3:1) */
  --plot-ash:        #ADA597;  /* secondary text on night 7.7:1, on night-2 6.9:1 */
  --plot-slate:      #3A352F;  /* secondary text on bone 10.5:1 (was #5C554B, 6.4:1; darkened 30 Sep at Nicolas's request) */
  --plot-line-dark:  #36302A;  /* hairlines on night (decorative) */
  --plot-line-light: #D6CFC3;  /* hairlines on bone (decorative) */
  --plot-dusk:       #26213A;  /* colour-block ground from the twilight skies. Bone on it 13.4:1, glow 8.5:1 */

  /* Accent: a THIN accent only:
     a 1px border, a small mark, a star, a hover or focus state. Never a filled block,
     never a pill or button, never on a light ground. */
  --plot-orange:     #FF7900;  /* the logo orange. 7.1:1 on night */
  --plot-glow:       #E9B872;  /* window glow, sampled from lit windows in Jon's twilight shots. 10.3:1 on night */

  /* Semantic aliases: build against these */
  --ground:        var(--plot-night);
  --surface:       var(--plot-night-2);
  --surface-hover: var(--plot-night-3);
  --text:          var(--plot-bone);
  --text-muted:    var(--plot-ash);
  --rule:          var(--plot-line-dark);
  --accent:        var(--plot-glow);     /* locked 28 Sep: window glow */
  --btn-bg:        var(--plot-bone);
  --btn-text:      var(--plot-night);
  --focus:         var(--plot-bone);

  /* ---------- Type ---------- (default option: General Sans) */
  --font-display: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "General Sans", "Helvetica Neue", Arial, sans-serif;
  --wt-display: 600;
  --wt-heading: 600;
  --wt-text:    400;
  --wt-strong:  500;
  --track-display: -0.035em;
  --track-heading: -0.02em;

  --fs-display: clamp(2.75rem, 1.4rem + 5.6vw, 6.75rem);  /* 44 → 108 */
  --fs-h1:      clamp(2.375rem, 1.5rem + 3.6vw, 4.75rem); /* 38 → 76 */
  --fs-h2:      clamp(2rem, 1.5rem + 2.2vw, 3.5rem);      /* 32 → 56 */
  --fs-h3:      clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem); /* 22 → 30 */
  --fs-price:   clamp(3rem, 2rem + 3.4vw, 4.75rem);       /* 48 → 76 */
  --fs-lead:    clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem); /* 20 → 23 */
  --fs-body:    1.125rem;   /* 18px, never below 17px */
  --fs-small:   0.9375rem;  /* 15px captions, badges. The floor for any text. */

  --lh-display: 0.96;
  --lh-heading: 1.06;
  --lh-text:    1.6;
  --measure:    60ch;

  /* ---------- Shape ---------- */
  --radius-card:   20px;
  --radius-media:  14px;   /* photos on the grid (mockup token; see --radius-photo) */
  --radius-photo:  4px;    /* image corners: small, per the 2026-09-29 review */
  --radius-print:  16px;   /* the print mat */
  --radius-button: 999px;  /* pill */
  --radius-badge:  999px;
  --radius-input:  12px;

  /* ---------- Depth (on dark) ---------- */
  --shadow-card:  0 1px 0 rgba(255,255,255,.05) inset, 0 10px 20px -12px rgba(0,0,0,.55), 0 28px 56px -28px rgba(0,0,0,.7);
  --shadow-lift:  0 1px 0 rgba(255,255,255,.07) inset, 0 16px 28px -14px rgba(0,0,0,.6), 0 48px 80px -32px rgba(0,0,0,.8);
  --shadow-print: 0 2px 3px rgba(0,0,0,.35), 0 14px 28px -10px rgba(0,0,0,.55), 0 48px 90px -30px rgba(0,0,0,.75);
  --lift: -6px;   /* hover translateY for cards and prints */

  /* ---------- Space ---------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  4rem;
  --space-2xl: clamp(5rem, 3rem + 6vw, 9rem);
  --space-3xl: clamp(7rem, 4rem + 10vw, 14rem);

  /* ---------- Grid ---------- */
  --grid-cols:   12;
  --grid-gutter: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
  --grid-margin: clamp(1.25rem, 5vw, 4.5rem);
  --grid-max:    90rem;

  /* ---------- Photo ratios ---------- */
  --ratio-native:   3 / 2;   /* Sony A7 III */
  --ratio-hero:     21 / 9;
  --ratio-wide:     16 / 9;  /* DJI aerials */
  --ratio-portrait: 4 / 5;   /* Instagram feed */
  --ratio-square:   1 / 1;

  /* ---------- Motion ---------- (from motion-lab/drone-about.html) */
  --ease-lift:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:   cubic-bezier(0.5, 0, 0.75, 0);
  --ease-press:  cubic-bezier(0.2, 0, 0, 1);
  --dur-press:  160ms;
  --dur-ui:     280ms;
  --dur-lift:   420ms;   /* card and print hover lift */
  --dur-reveal: 700ms;   /* device previews, print entrance */
  --dur-pass:   1800ms;
  --scroll-inertia: 0.12;

  /* ---------- Focus reveal (signature pattern) ----------
     Blur the surroundings, bring the context in. Device previews, package deliverables,
     portfolio to listing card, floor plan rooms, reviews. */
  --reveal-blur:  14px;
  --reveal-dim:   0.45;   /* brightness of the blurred surroundings */
  --reveal-scale: 1.08;   /* hides blurred edges */
  --reveal-rise:  16px;   /* context object rises this far into place */
  --reveal-from:  0.965;  /* ...from this scale */

  /* ---------- Cutouts ----------
     A house cut from its sky, sitting on a colour block with the roofline breaking above it. */
  --cutout-break: 41.5%;  /* where the block's top edge meets the cutout, per asset */

  /* ---------- Photo edges ----------
     Photos keep hard, clean edges. No gradients or fades into the ground.
     Text on a photo sits on a solid chip that contrasts with the section (never matches it). */
  --chip-bg:   rgba(243,238,230,.94);
  --chip-text: var(--plot-ink);
}

/* ---------- Light sections: no accent at all ---------- */
.ground-bone, [data-ground="bone"] {
  --ground:        var(--plot-bone);
  --surface:       #FFFFFF;
  --surface-hover: #FFFFFF;
  --text:          var(--plot-ink);
  --text-muted:    var(--plot-slate);
  --rule:          var(--plot-line-light);
  --accent:        var(--plot-ink);
  --btn-bg:        var(--plot-ink);
  --btn-text:      var(--plot-bone);
  --focus:         var(--plot-ink);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-press: 0ms; --dur-ui: 0ms; --dur-lift: 0ms; --dur-reveal: 0ms; --dur-pass: 0ms; --lift: 0px; }
}