/* Hallmark · macrostructure: Photographic (08) — adapted for a conversion page: full-bleed
 * image bands alternate with dark type-led bands; captions are small annotations, never
 * competing display headlines · theme: Dark Gallery (custom, tuned) · nav: N9 edge-aligned
 * minimal · footer: Ft2 inline rule, single line
 * vibe: "premium interior studio portfolio, after hours — quiet, expensive, warm wood glowing
 * on a dark ground" · paper: oklch(16% 0.024 50) · accent: oklch(74% 0.150 75)
 * display: Bricolage Grotesque · body: Karla · axes: dark / geometric-sans /
 * chromatic-other (chromatic-amber ~75°) · studied: no · context: explicit (dark-gallery brief)
 * pre-emit critique: P5 H4 E5 S4 R5 V4
 * contrast: pass (40–41, verified via OKLab→linear-sRGB WCAG calc, see report)
 */

:root {
  /* ---------------------------------------------------------------------
     COLOR — Dark Gallery: espresso-brown ground, warm bone ink, amber LED accent.
     OKLCH only. Paper never pure black; ink never pure white. Anchor hue 50 (espresso)
     for the neutral ramp, accent pulled independently to hue 75 (amber glow) — the same
     dual-anchor technique as any tuned custom palette: one hue tints the ground, a second
     (chromatic-other) carries the single accent. See references/custom-theme.md §G.3.
     --------------------------------------------------------------------- */

  --color-paper:        oklch(16% 0.024 50);   /* deep espresso-brown ground */
  --color-paper-2:      oklch(20% 0.026 50);   /* one elevation step — cards, panels */
  --color-paper-3:      oklch(24% 0.028 50);   /* two elevation steps — nav-on-scroll, chips */
  --color-rule:         oklch(32% 0.022 50);   /* hairline dividers */
  --color-rule-2:       oklch(26% 0.020 50);   /* quieter secondary dividers */

  --color-ink:          oklch(94% 0.014 70);   /* warm bone — primary text */
  --color-ink-2:        oklch(80% 0.016 65);   /* warm oat — secondary text */
  --color-muted:        oklch(66% 0.020 60);   /* de-emphasised text, captions */

  --color-accent:       oklch(74% 0.150 75);   /* amber LED glow — the one accent */
  --color-accent-ink:   oklch(16% 0.024 50);   /* dark text set on an accent fill */
  --color-focus:        oklch(80% 0.170 75);   /* focus ring — higher L/C for instant visibility */

  --color-overlay-scrim: oklch(10% 0.020 50 / 0.72); /* photo-legibility scrim, bottom-anchored */
  --color-scrim-soft:    oklch(10% 0.020 50 / 0.25); /* hero top fade-in */
  --color-scrim-side:    oklch(10% 0.020 50 / 0.55); /* hero left-side fade, backs the text block */
  --color-scrim-strong:  oklch(9%  0.020 50 / 0.86); /* final-CTA base — near-opaque for contact block */
  --color-nav-bg:        oklch(16% 0.024 50 / 0.82); /* nav resting state — paper, translucent */

  /* ---------------------------------------------------------------------
     TYPE — display + body, 2-family pairing (2+1 rule; no outlier needed on this brief).
     --------------------------------------------------------------------- */

  --font-display: "Bricolage Grotesque", ui-sans-serif, sans-serif;
  --font-body:    "Karla", ui-sans-serif, sans-serif;

  --text-xs:      0.75rem;    /* 12px */
  --text-sm:      0.875rem;   /* 14px */
  --text-base:    1rem;       /* 16px */
  --text-md:      1.25rem;    /* 20px */
  --text-lg:      1.5625rem;  /* 25px */
  --text-xl:      1.953rem;   /* 31px */
  --text-2xl:     2.441rem;   /* 39px */
  --text-3xl:     3.052rem;   /* 49px */
  --text-display: clamp(2.5rem, 4.4vw + 1rem, 4.75rem);
  --text-display-s: clamp(2rem, 3vw + 1rem, 3.25rem);

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

  --tracking-tight: -0.02em;
  --tracking-wide:  0.09em;

  /* ---------------------------------------------------------------------
     SPACE — 4pt scale, named by role.
     --------------------------------------------------------------------- */

  --space-3xs: 0.125rem;  /*  2px */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs:  0.5rem;    /*  8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2.5rem;    /* 40px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */
  --space-4xl: 9rem;      /* 144px */

  /* ---------------------------------------------------------------------
     MOTION — transform/opacity only. Three named easings. Instant focus.
     --------------------------------------------------------------------- */

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);  /* slight overshoot — the lightbox only */

  --dur-fast:   120ms;
  --dur-short:  220ms;
  --dur-med:    420ms;
  --dur-long:   700ms;

  /* ---------------------------------------------------------------------
     RADIUS — near-sharp. A material, architectural feel, not a soft-app feel.
     --------------------------------------------------------------------- */

  --radius-sm: 0.125rem;  /* 2px */
  --radius-md: 0.25rem;   /* 4px */

  /* ---------------------------------------------------------------------
     Z-INDEX — six named levels.
     --------------------------------------------------------------------- */

  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */

  --measure: 65ch;
  --container-max: 84rem;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --nav-height: 4.75rem; /* nav sits in normal flow above the hero; the hero's fold math subtracts it */
}