/* tokens.css — the design brief, compiled. Inside Out Painting, Santa Fe NM.
   Source: runs/inside-out-painting-santa-fe-nm/brief.md (APPROVED, C3
   2026-10-03). THIS FILE IS THE ONLY PLACE RAW VALUES LIVE (spec §3). */

:root {

  /* --- Colour — brief §3. One deliberate mode: light. The footer is a dark
     BAND within this light-mode site, never a second mode (brief §3 note). */

  --scheme: light;

  --color-bg: #F6F1E7;                 /* warm chalk/bone — brief §3 */
  --color-surface: #EDE4D3;            /* deeper chalk — proof rows, footer meta role */
  --color-ink: #2B2420;                /* warm near-black */
  --color-ink-muted: #6B5F52;          /* secondary text, lead lines */
  --color-accent: #1F7A72;             /* kiva-turquoise — fills + large text/UI only */
  --color-accent-text: #1C6B64;        /* body-safe accent ink — eyebrows, numerals, links */
  --color-accent-ink: #FFFFFF;         /* text sitting ON accent fill */

  /* Chamisa-gold — imagery palette-echo role (brief §9) and the second
     swatch chip's own fill (brief §10's three drifting chips: turquoise,
     chamisa-gold, bone). Decorative only; never carries text. */
  --color-swatch-gold: #C98A1E;

  /* House-required structural colours (consumed by base.css). Not itemised
     in the brief's own §3 table (which covers only the six required text/bg
     roles); derived from the same palette, Builder's execution latitude —
     no new hue introduced, same latitude as the sibling painter sites'
     --color-border/--color-border-strong derivations. */
  --color-border: #C0B5A6;             /* DECORATIVE hairlines only — mix(surface, ink-muted, 35%) */
  --color-border-strong: #6B5F52;      /* = --color-ink-muted; control boundary, WCAG 1.4.11:
                                           5.51:1 vs bg, 4.92:1 vs surface (brief §3's own table) */

  --color-focus: #1F7A72;              /* = --color-accent; 4.57:1 vs bg, 4.07:1 vs surface */

  /* Dark-band-safe focus ring (house pattern, tokens.css comment). The
     footer is the one dark band on this site (brief §3: "a dark band
     within the light-mode site"). A light tint of the brief's accent,
     measured >= 3:1 against the band's own ground, --color-ink: 7.95:1. */
  --color-focus-on-band: #9AC3C0;

  --color-selection-bg: #1F7A72;
  --color-selection-ink: #FFFFFF;


  /* --- Typography — brief §5. Two families, three woff2 files (<=4 cap),
     SIL OFL 1.1, self-hosted. Petrona wght 400-600 (h1/h2, Index numerals)
     + italic (review blockquote, inline emphasis). Public Sans wght 400-700
     (body, CTA, strong). No `font-variation-settings` anywhere — weight is
     set with `font-weight` everywhere (spec §8's wght-in-variation-settings
     trap cannot occur on a property this site never sets). */

  --font-display: 'Petrona', 'Petrona Fallback', Georgia, serif;   /* italic resolved via font-style, same stack */
  --font-body: 'Public Sans', 'Public Sans Fallback', Arial, sans-serif;

  --font-weight-body: 400;
  --font-weight-body-strong: 700;      /* CTA labels, nav links, strong text — top of the 400–700 range */
  --font-weight-display: 600;          /* h1, h2 — top of the 400–600 range, "generous" (design-rules §5) */
  --font-weight-display-num: 400;      /* Index-of-Care proof-row numerals (01/02/03) only — brief §5 */

  /* --- Type scale — brief §5's table, every clamp() stated there verbatim.
     Floor/375px/1440px/ceiling all computed in the brief; this file carries
     the clamp() expressions unchanged. */

  --text-eyebrow: clamp(.72rem, .68rem + .2vw, .85rem);   /* 11.52px -> 13.6px (ceiling) */
  --text-body: clamp(1rem, .95rem + .25vw, 1.125rem);     /* 16px -> 18px (ceiling) */
  --text-lead: clamp(1.1rem, 1.02rem + .4vw, 1.35rem);    /* 17.6px -> 21.6px (ceiling) */
  --text-h2: clamp(1.7rem, 1.35rem + 1.5vw, 2.6rem);      /* 27.2px -> 41.6px (ceiling) */
  --text-h1: clamp(2.3rem, 1.7rem + 3vw, 4.2rem);         /* 36.8px -> 67.2px (ceiling) */

  /* House-structural sizes the brief's typography table does not itemise
     (site-header__brand, the Index tally numerals, .btn--quiet etc. are
     shared chrome / the brief's own numerals, not archetype-level content) —
     house default fluid scale kept where the brief argues no override. */
  --text-h3: clamp(1.3rem, 3vw, 1.75rem);
  --text-small: 0.9375rem;

  /* The Index-of-Care proof-row numerals (01/02/03) — Petrona, accent-text,
     distinct from --text-h2 (brief §5 names them as sharing the display
     face; size is the Builder's execution choice within the declared scale,
     same latitude as the sibling painter site's --text-index). */
  --text-index: clamp(1.125rem, 1.037rem + 0.376vw, 1.375rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;             /* eyebrows / small caps */


  /* --- Space — brief §5. Fixed, rem-based, identical in px at every
     viewport (brief §5's own statement). ------------------------------- */

  --space-3xs: 0.25rem;   /* 4px — not itemised by the brief; house default */
  --space-2xs: 0.5rem;    /* 8px — not itemised by the brief; house default */
  --space-xs: 0.5rem;     /* 8px, brief §5 */
  --space-sm: 1rem;       /* 16px, brief §5 */
  --space-md: 1.75rem;    /* 28px, brief §5 */
  --space-lg: 3rem;       /* 48px, brief §5 */
  --space-xl: 5rem;       /* 80px, brief §5 */
  --space-2xl: 6rem;      /* not itemised by the brief; house default, unused by this site's own rhythm */
  --space-3xl: 9rem;      /* not itemised by the brief; house default (textarea min-height only) */

  /* The ONE token setting space between sections (design-rules §7.1). Brief
     §5: two declared STEPS, not one fluid value — 48px below 768px, 80px at
     >=768px (both through 1440px). The >=768px step is redeclared in the
     @media block at the foot of this file, the house pattern for a
     breakpoint-conditional token (same shape as base.css's reduced-motion
     block), rather than nested inside this :root. */
  --section-gap: var(--space-lg);


  /* --- Layout — house defaults; the brief argues no override except the
     hero text-column measure below (brief §8). --------------------------- */

  /* 90rem = 1440px — brief §8's own repeated container cap ("<=1440px
     centred") and the figure its hero/Index-of-Care/Quote-form arithmetic is
     computed against: 1440 - 2*48 (--layout-gutter's own clamp ceiling) =
     1344px content width, the brief's own stated number (§8, hero row). The
     house default (72rem/1152px) would not reproduce that arithmetic. */
  --layout-container: 90rem;
  --layout-measure: 62ch;
  --layout-gutter: clamp(1.25rem, 5vw, 3rem);
  --layout-tap-min: 44px;

  /* Hero text column cap (brief §8: "text col ... capped max-width: 38rem
     (608px), so drawn narrower than the cap"), >=64em only. */
  --hero-col-measure: 38rem;

  /* Living-hero field height (brief §7's own arithmetic: "230px + margins"
     at 375px, single column, <64em). Builder-derived growth above 64em to
     the brief §8 drawn-size figure (≈420px at 1440) — no colour, font,
     archetype or motion value is set here, only the field's own height,
     same latitude as the sibling painter sites' --hero-field-height-lg. */
  --hero-field-height: 14.375rem;                      /* 230px, brief §7, <64em */
  --hero-field-height-lg: clamp(14.375rem, 29vw, 26.25rem); /* Builder-derived, >=64em, -> 420px @1440 */

  /* Living-hero execution geometry (brief §10), Builder-derived: the seam's
     own position, from the brief's anchor math (§9: coat ≈56% at 1440, so
     the seam sits at 44% from the field's left edge at >=64em; at <64em the
     field is single-column, effectively all-coat). */
  --seam-x: 44%;
  --seam-x-sm: 6%;              /* <64em: "effectively the full width... is coat" (brief §9) */
  --swatch-chip-size: 2.25rem;  /* each of the three drifting chips, brief §10 */

  /* Hero atmosphere gradient stops — brief §4's own literal, tokenised. */
  --color-atmosphere-hi: #fffaf0;
  --color-atmosphere-lo: #e9e0cf;

  /* Each swatch chip's own drift distance, Builder-derived choreography (the
     three loops' PERIODS are the brief's own numbers, §10; the distance each
     one travels is execution detail, same latitude as the chip-size token
     above) — a gentle few millimetres, never a layout-shifting distance. */
  --chip-1-drift-x: -0.4rem;
  --chip-1-drift-y: 0.5rem;
  --chip-2-drift-x: 0.5rem;
  --chip-2-drift-y: -0.4rem;
  --chip-3-drift-x: -0.3rem;
  --chip-3-drift-y: -0.6rem;

  /* Sub-container measures, brief §8's desktop composition table — one token
     per section, named for its row. */
  --measure-services: 56rem;
  --measure-cta-repeat: 40rem;
  --measure-quote-left: 28rem;
  --measure-quote-right: 30rem;
  --measure-service-area: 50rem;


  /* --- Radius / shadow / border — house defaults; brief argues no override,
     consistent with editorial-modern's restraint (brief §1). ------------- */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(43 36 32 / 0.06);
  --shadow-md: 0 6px 24px rgb(43 36 32 / 0.09);
  --shadow-lg: 0 24px 60px rgb(43 36 32 / 0.14);

  --border-hairline: 1px;
  --border-thick: 3px;
  --border-seam: 2px;                  /* the settled-seam head-rule, brief §12: "a static 2px hairline" */
  --border-style: solid;


  /* --- Motion — house architecture tokens, driving the standard
     IntersectionObserver reveal (Services rows, Index-of-Care rows, Service
     area, Footer — brief §10). -------------------------------------------- */

  --duration-fast: 140ms;
  --duration-base: 320ms;
  --duration-slow: 640ms;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --reveal-shift: 1.25rem;
  --reveal-stagger: 90ms;

  /* The one signature move, "the cut-in settles" (brief §10). One-shot
     settle on load, then two independent, non-synced ambient loops (the
     seam-glint, the three swatch chips) — different periods so they never
     lock into a visible combined cycle (brief §10 / design-rules §0). */
  --duration-settle: 1.1s;             /* the one-shot sliver-to-final-clip-path settle, brief §10 */
  --duration-glint: 4.4s;              /* seam-glint travel, continuous, brief §10 */
  --duration-chip-1: 7.1s;             /* swatch chip 1 (turquoise) drift, brief §10 */
  --duration-chip-2: 8.6s;             /* swatch chip 2 (chamisa-gold) drift, brief §10 */
  --duration-chip-3: 6.4s;             /* swatch chip 3 (bone) drift, brief §10 */

  /* --- Z layers ----------------------------------------------------------- */
  --z-base: 0;
  --z-header: 100;
  --z-nav-panel: 200;
  --z-skip-link: 300;
}

/* --section-gap's >=768px step (brief §5). The one breakpoint-conditional
   token on this site; see the :root comment above. */
@media (min-width: 48em) {
  :root {
    --section-gap: var(--space-xl);
  }
}

/* @font-face — brief §5. Three files/two families, SIL OFL 1.1, self-hosted,
   instanced to the brief's weight ranges (varLib.instancer: Petrona
   wght=400:600, Public Sans wght=400:700), subset to the house safe range
   (spec §8). Post-subset: 21,300 / 22,468 / 20,012 B = 63,780 B total, within
   budget. Fallbacks measured with scripts/font-metrics.mjs: Petrona vs
   Gelasio (Georgia's metric-compatible substitute, no local .ttf to measure
   Georgia itself against); Public Sans vs Liberation Sans (Arial's clone).
   TWO Public Sans cuts (400/700): the 700 CTA sits above the hero field
   (brief §7 order), so an unmatched regular fallback is exactly the width
   mismatch that moves it. Petrona gets one roman + one italic cut — h1/h2
   (600) and the numerals (400) share the roman fallback regardless of
   weight, since Gelasio has no local weight between 400 and 700 to split. */

@font-face {
  font-family: 'Petrona Fallback';
  src: local('Gelasio');
  size-adjust: 97.93%;
  ascent-override: 87.62%;
  descent-override: 27.57%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Petrona Fallback';
  src: local('Gelasio Italic');
  font-style: italic;
  size-adjust: 88.98%;
  ascent-override: 96.43%;
  descent-override: 30.34%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Public Sans Fallback';
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  size-adjust: 105.21%;
  ascent-override: 90.3%;
  descent-override: 21.39%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Public Sans Fallback';
  src: local('Arial Bold'), local('Liberation Sans Bold');
  font-weight: 700;
  size-adjust: 97.31%;
  ascent-override: 97.63%;
  descent-override: 23.12%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Petrona';
  src: url('../assets/fonts/petrona-roman-variable-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7,
    U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}

@font-face {
  font-family: 'Petrona';
  src: url('../assets/fonts/petrona-italic-variable-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7,
    U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}

@font-face {
  font-family: 'Public Sans';
  src: url('../assets/fonts/public-sans-variable-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7,
    U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033;
}