/**
 * MCB Productions — Design Tokens
 *
 * The single source of truth for color, type, space, depth, and motion.
 * Every value here traces directly to DESIGN.md / DESIGN.json. Nothing in
 * this file is a judgement call; if a value needs to change, change
 * DESIGN.md first and mirror it here.
 *
 * This file is permanent. It is consumed by the public site, /admin, and
 * the future customer portal. It contains custom properties only — no
 * selectors beyond :root — so it can be included anywhere without side
 * effects.
 *
 * Load order: tokens.css → base.css → page stylesheet.
 */

:root {
  /* ===================================================================
     COLOR — two neutral families, deliberately opposite in temperature,
     plus one accent that only ever means "act" or "notice".
     See DESIGN.md §2 "The Two Materials Rule" and "The Signal Rule".
     =================================================================== */

  /* Paper — content surfaces. Warmed toward hue 82 the way uncoated
     stock warms under room light. Never used for controls. */
  --paper-000: oklch(97.5% 0.005 82);   /* page ground, card faces */
  --paper-100: oklch(94.5% 0.008 82);   /* recessed band, inset, table header */
  --paper-200: oklch(89% 0.010 82);     /* hairline rule — does most separating */
  --paper-300: oklch(82% 0.012 82);     /* structural rule, disabled fill */

  /* Graphite — equipment surfaces. Cooled toward the brand hue 252 the
     way anodized aluminium does. Never a page background; graphite
     always arrives as an object placed on the page. */
  --graphite-900: oklch(18% 0.014 252); /* nav, footer, spec panels */
  --graphite-800: oklch(24% 0.013 252); /* panel faces within a dark region */
  --graphite-700: oklch(31% 0.012 252); /* raised control, rule inside dark */
  --graphite-500: oklch(45% 0.010 252); /* border inside dark regions */
  --graphite-300: oklch(66% 0.008 252); /* secondary text inside dark regions */

  /* Ink — text on paper. Cooled toward 252 so it reads as part of the
     graphite family rather than as a separate black. */
  --ink: oklch(21% 0.012 252);          /* body and headings */
  --ink-muted: oklch(43% 0.010 252);    /* captions, helper copy, timestamps.
                                           Clears 4.5:1 on paper-000, so it is
                                           safe for real sentences. */

  /* Signal — the logo's electric blue. Interactive affordance and active
     state only. Under 10% of any screen. Never a background wash, never
     a decorative band, never behind body text. */
  --signal-ink: oklch(45% 0.19 252);    /* on paper: links, primary button fill */
  --signal: oklch(58% 0.20 252);        /* large fills, focus rings */
  --signal-bright: oklch(72% 0.16 252); /* on graphite only, where signal-ink dies */

  /* Status — readouts, not alarms. Muted on purpose so they are never
     mistaken for the signal blue that means "press this". Every use
     pairs the color with a word. */
  --available: oklch(48% 0.13 150);
  --caution: oklch(52% 0.14 65);
  --alert: oklch(50% 0.18 25);

  /* Scrim — the enforced contrast floor behind text on photography.
     Composed from graphite so the darkening stays in the cool family
     instead of muddying toward neutral black. */
  --scrim-strong: oklch(18% 0.014 252 / 0.74);
  --scrim-soft: oklch(18% 0.014 252 / 0.42);

  /* ===================================================================
     TYPOGRAPHY — serif explains, sans operates. No monospace anywhere.
     See DESIGN.md §3 "The Two Voices Rule".
     =================================================================== */

  --font-serif: Literata, Georgia, 'Times New Roman', serif;
  --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Display — page-opening statements. One per page, never twice.
     The tight tracking is required; Literata sets loose at this size
     and looks slack without it. */
  --type-display-size: clamp(2.75rem, 6vw, 4.5rem);
  --type-display-weight: 700;
  --type-display-leading: 1.02;
  --type-display-tracking: -0.021em;

  /* Headline — section openers. */
  --type-headline-size: clamp(2rem, 3.6vw, 2.75rem);
  --type-headline-weight: 600;
  --type-headline-leading: 1.12;
  --type-headline-tracking: -0.014em;

  /* Title — equipment names, card titles, subsection headings. */
  --type-title-size: 1.5rem;
  --type-title-weight: 600;
  --type-title-leading: 1.26;
  --type-title-tracking: -0.008em;

  /* Lede — the plain-English answer under a display or title. The
     highest-value type in the system: this is where "covers a 300-person
     banquet hall" lives. */
  --type-lede-size: clamp(1.125rem, 1.6vw, 1.375rem);
  --type-lede-weight: 400;
  --type-lede-leading: 1.55;

  /* Body — explanatory prose. Never below 17px; the audience skews
     non-technical and frequently over fifty. */
  --type-body-size: 1.0625rem;
  --type-body-weight: 400;
  --type-body-leading: 1.68;

  /* UI — form values, helper text, anything inside a control. */
  --type-ui-size: 1rem;
  --type-ui-weight: 400;
  --type-ui-leading: 1.5;

  /* Label — eyebrows, field labels, button text, nav items, status chips.
     The uppercase-with-tracking treatment is the system's connective
     tissue: it is the printed label on the case. */
  --type-label-size: 0.75rem;
  --type-label-weight: 700;
  --type-label-leading: 1.2;
  --type-label-tracking: 0.09em;

  /* Data — stock counts, dimensions, dates, used-sale prices. Tabular
     figures are mandatory so columns align without a monospace face. */
  --type-data-size: 0.9375rem;
  --type-data-weight: 500;
  --type-data-leading: 1.4;

  /* Measure — reading width caps from DESIGN.md §6. */
  --measure-lede: 60ch;
  --measure-prose: 68ch;

  /* ===================================================================
     RADIUS — hardware corners. Nothing is a pill; a pill reads as a
     consumer app and undercuts the equipment premise.
     =================================================================== */

  --radius-hairline: 2px;  /* status chips, printed-tag corners */
  --radius-control: 5px;   /* buttons, inputs */
  --radius-panel: 10px;    /* cards, spec panels */
  --radius-case: 16px;     /* largest framed regions only */

  /* ===================================================================
     SPACING — padding is deliberately not uniform. Rhythm comes from
     varying it; same padding everywhere is monotony.
     =================================================================== */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;
  --space-6xl: 128px;

  /* ===================================================================
     ELEVATION — real depth with short throws. Objects are seated on
     surfaces, not floating above them. Blur never exceeds twice the
     vertical offset. See DESIGN.md §4 "The Seated Rule".
     =================================================================== */

  /* The machined top edge. Every graphite surface carries it; no paper
     surface ever does. This one detail is the difference between
     "tactile" and "a card with a shadow". */
  --bevel: inset 0 1px 0 oklch(100% 0 0 / 0.07);

  --shadow-seated:
    0 1px 0 oklch(18% 0.014 252 / 0.10),
    inset 0 1px 0 oklch(100% 0 0 / 0.07);

  --shadow-raised:
    0 1px 1px oklch(18% 0.014 252 / 0.10),
    0 3px 6px oklch(18% 0.014 252 / 0.08),
    inset 0 1px 0 oklch(100% 0 0 / 0.09);

  --shadow-pressed: inset 0 2px 3px oklch(18% 0.014 252 / 0.22);

  /* Genuinely detached layers only: mobile menu, admin dialog, lightbox.
     Four uses site-wide at most. */
  --shadow-lifted:
    0 8px 12px oklch(18% 0.014 252 / 0.12),
    0 24px 48px oklch(18% 0.014 252 / 0.14);

  /* Paper cards are separated by rule and contact shadow together,
     never by a heavier stroke, and never with a bevel. */
  --shadow-paper: 0 1px 0 oklch(18% 0.014 252 / 0.06);

  /* ===================================================================
     MOTION — ease out with exponential curves. No bounce, no elastic.
     Only transform and opacity are animated.
     =================================================================== */

  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);

  --duration-press: 80ms;    /* must feel immediate */
  --duration-hover: 140ms;
  --duration-panel: 320ms;

  /* The entrance cue. A house lighting cue has a fade time, a stagger
     between channels, and it lands and holds; that is the whole grammar.
     The rise is deliberately shorter than one line of body type — the
     object was almost in place already and seats the last few pixels. */
  --duration-cue: 520ms;
  --cue-stagger: 70ms;
  --cue-rise: 14px;

  /* The acknowledgement. An entrance introduces a page; this confirms
     that something the visitor did has landed. Shorter and travelling
     less far, because it is a readout updating rather than an object
     being placed. See DESIGN.md §4 "The Two Registers Rule". */
  --duration-state: 180ms;
  --state-rise: 6px;

  /* ===================================================================
     LAYOUT
     Breakpoints are documented here for reference only — CSS custom
     properties cannot be used in media queries, so the literal values
     are repeated at each @media rule.
       sm 640px · md 768px · lg 1024px · xl 1280px
     =================================================================== */

  --shell-max: 1240px;      /* standard content shell */
  --shell-wide: 1480px;     /* full-bleed photographic regions */
  --shell-gutter: var(--space-xl);
}

@media (min-width: 768px) {
  :root {
    --shell-gutter: var(--space-2xl);
  }
}

@media (min-width: 1024px) {
  :root {
    --shell-gutter: var(--space-3xl);
  }
}