/* ============================================================
   Jaydeck Interiors — design tokens

   Paper is the ground; blue is the punctuation.

   The palette is a duotone, not a theme with an accent colour bolted
   on: white paper carries the reading, and the deep corporate blue
   arrives in full-bleed bands between the paper sections. Nothing on
   this site is coloured for decoration — a colour here means "this is
   a different room".

   Sections declare which room they are with [data-ground]; every
   component reads --bg / --fg / --rule / --muted / --accent and never
   a literal. That is what makes a band invertible without a single
   component knowing it inverted.
   ============================================================ */

:root {
  /* ---- The two absolutes ---- */
  --paper:      #ffffff;
  --blue:       #0a1628;

  /* Papers. warm is the gallery ground, cool the blue-tinted one that
     sits next to a blue band without reading as a second white. */
  --paper-warm: #f5f4f1;
  --paper-cool: #eef2f7;

  /* Blues. deep grounds the footer; mid is the ink-blue that carries
     links, labels and rules on paper; soft is its counterpart on the
     blue ground, where mid would disappear. */
  --blue-deep:  #060e1c;
  --blue-mid:   #14417d;
  --blue-soft:  #a9c3e6;

  /* ---- Resolved per section by [data-ground]. Defaults are paper. ---- */
  --bg:     var(--paper);
  --fg:     var(--blue);
  /* 0.62 puts small text at 5.8:1 on paper — anything lighter fails AA
     at --t-micro, which is where most of the labels on this site live. */
  --muted:  rgb(10 22 40 / 0.62);
  --rule:   rgb(10 22 40 / 0.14);
  --rule-strong: rgb(10 22 40 / 0.34);
  --accent: var(--blue-mid);
  --accent-rgb: 20, 65, 125;
  --btn-bg: var(--blue);
  --btn-fg: var(--paper);
  --tint:   rgb(20 65 125 / 0.06);

  /* ---- Type — two sans faces, no serif.
     The same pair the architecture practice uses: Montserrat carries
     the headlines, Google Sans everything read at length. Both are
     geometric, so the contrast between them is weight and scale
     rather than style — which is why the page reads as drawn rather
     than decorated. ---- */
  --display: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Google Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---- Fluid type scale (320 -> 1600) ---- */
  --t-micro: clamp(0.625rem, 0.6rem + 0.12vw, 0.6875rem);   /* 10 -> 11 */
  --t-small: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12 -> 13 */
  --t-body:  clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);  /* 15 -> 17 */
  --t-lead:  clamp(1.125rem, 1rem + 0.7vw, 1.625rem);       /* 18 -> 26 */
  --t-h3:    clamp(1.25rem, 1.05rem + 0.9vw, 1.875rem);     /* 20 -> 30 */
  /* Section headings used to run to 72px, which made every section
     announce itself louder than the work inside it. A section heading
     is a label for what follows, not a hero — so it now tops out just
     above the lead size and lets the photography carry the scale. */
  --t-h2:    clamp(1.5rem, 1.22rem + 1.25vw, 2.375rem);     /* 24 -> 38 */
  /* The one heading that is still allowed to be a statement: the
     closing CTA, and the standfirst on the services page. */
  --t-h2-big: clamp(2rem, 1.3rem + 3vw, 3.75rem);           /* 32 -> 60 */
  --t-hero:  clamp(2.75rem, 1rem + 5.6vw, 6.5rem);          /* 44 -> 104 */
  --t-numeral: clamp(2.5rem, 1rem + 4.4vw, 5rem);           /* 40 -> 80 */

  /* ---- Rhythm ---- */
  --gutter:  clamp(1.25rem, 0.8rem + 2.2vw, 3.5rem);        /* 20 -> 56 */
  --section: clamp(5rem, 3rem + 9vw, 12rem);                /* 80 -> 192 */
  --measure: 62ch;
  --nav-h: 80px;

  /* ---- Motion ----
     `ease` is the site's exit curve: fast off the mark, long settle.
     `wipe` is the curtain curve — the one every clip-path reveal
     uses, so a panel uncovering an image and a band uncovering a
     section read as the same gesture at two scales. */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --wipe:        cubic-bezier(0.76, 0, 0.24, 1);

  /* ---- Texture ---- */
  --grain: 0.05;

  /* ---- Drafting field dials (read by js/motion.js) ---- */
  --field-cell: 32;
  --field-radius: 210;
  --field-alpha: 0.34;
}

@media (max-width: 767px) {
  :root { --nav-h: 64px; }
}

/* ============================================================
   Ground system — one attribute re-resolves the section palette.
   ============================================================ */

[data-ground='paper'] {
  --bg: var(--paper);
  --fg: var(--blue);
  --muted: rgb(10 22 40 / 0.62);
  --rule: rgb(10 22 40 / 0.14);
  --rule-strong: rgb(10 22 40 / 0.34);
  --accent: var(--blue-mid);
  --accent-rgb: 20, 65, 125;
  --btn-bg: var(--blue);
  --btn-fg: var(--paper);
  --tint: rgb(20 65 125 / 0.06);
}

[data-ground='warm'] {
  --bg: var(--paper-warm);
  --fg: var(--blue);
  --muted: rgb(10 22 40 / 0.62);
  --rule: rgb(10 22 40 / 0.14);
  --rule-strong: rgb(10 22 40 / 0.34);
  --accent: var(--blue-mid);
  --accent-rgb: 20, 65, 125;
  --btn-bg: var(--blue);
  --btn-fg: var(--paper);
  --tint: rgb(20 65 125 / 0.06);
}

[data-ground='cool'] {
  --bg: var(--paper-cool);
  --fg: var(--blue);
  --muted: rgb(10 22 40 / 0.62);
  --rule: rgb(10 22 40 / 0.16);
  --rule-strong: rgb(10 22 40 / 0.34);
  --accent: var(--blue-mid);
  --accent-rgb: 20, 65, 125;
  --btn-bg: var(--blue);
  --btn-fg: var(--paper);
  --tint: rgb(20 65 125 / 0.08);
}

/* The band. Everything inverts, including which blue is legible: on
   ink-blue, --blue-mid is invisible, so the accent becomes the soft
   steel that reads against it. */
[data-ground='blue'] {
  --bg: var(--blue);
  --fg: var(--paper);
  --muted: rgb(255 255 255 / 0.66);
  --rule: rgb(255 255 255 / 0.2);
  --rule-strong: rgb(255 255 255 / 0.42);
  --accent: var(--blue-soft);
  --accent-rgb: 169, 195, 230;
  --btn-bg: var(--paper);
  --btn-fg: var(--blue);
  --tint: rgb(255 255 255 / 0.06);
}

[data-ground='deep'] {
  --bg: var(--blue-deep);
  --fg: var(--paper);
  --muted: rgb(255 255 255 / 0.6);
  --rule: rgb(255 255 255 / 0.16);
  --rule-strong: rgb(255 255 255 / 0.36);
  --accent: var(--blue-soft);
  --accent-rgb: 169, 195, 230;
  --btn-bg: var(--paper);
  --btn-fg: var(--blue);
  --tint: rgb(255 255 255 / 0.05);
}