/**
 * Crown Services × Lionrock FE — design tokens
 * SoT: brand/CROWN-LIONROCK-FE-BRANDBOOK.md §14 (Desi V1 LOCKED)
 * Signal = telephony only. Seal = brand CTA. Fraunces banned.
 */

:root {
  /* Named palette */
  --ledger: #E8E2D6;
  --card-stock: #F7F3EA;
  --carbon: #161410;
  --walnut: #4A4036;
  --rule: #C9C0B2;
  --rule-soft: #D9D1C3;
  --seal: #6E1F24;
  --seal-deep: #4F1519;
  --signal: #0074ff; /* telephony only */
  --signal-ink: #0056c2;
  --warn-dust: #F0E4C8;
  --ivory: #FFFcf7;
  --danger: #8B1A1A;
  --ok: #1F6B3A;

  /* Type stacks */
  --display: "Newsreader", "Source Serif 4", Georgia, serif;
  --text: "IBM Plex Sans", "Source Sans 3", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Type scale */
  --type-display-xl: clamp(2.1rem, 4vw, 3.1rem);
  --type-display: clamp(1.7rem, 3.2vw, 2.35rem);
  --type-lede: 1.125rem;
  --type-body: 1.0625rem; /* 17px */
  --type-ui: 0.9375rem;
  --type-label: 0.72rem;
  --type-consent: 0.8125rem; /* ≥13px prefer */
  --type-eyebrow: 0.75rem;
  --type-fact: 0.95rem;

  --leading-display: 1.08;
  --leading-body: 1.5;
  --tracking-display: -0.02em;
  --tracking-label: 0.1em;

  /* Space (uneven on purpose — use selectively) */
  --space-1: 0.35rem;
  --space-2: 0.7rem;
  --space-3: 1.15rem;
  --space-4: 1.75rem;
  --space-5: 2.75rem;
  --space-6: 4.25rem;

  /* Chrome */
  --radius-panel: 0;
  --radius-control: 2px;
  --cta-min-height: 52px;
  --tap-min: 44px;
  --panel-seal-rule: 3px solid var(--seal);
  --focus-ring: 2px solid var(--seal);
  --focus-offset: 2px;

  /* Semantic aliases */
  --color-bg: var(--ledger);
  --color-panel: var(--card-stock);
  --color-ink: var(--carbon);
  --color-muted: var(--walnut);
  --color-cta: var(--seal);
  --color-cta-hover: var(--seal-deep);
  --color-call: var(--signal);
  --font-display: var(--display);
  --font-body: var(--text);
  --font-mono: var(--mono);
}

/* Utility hints for specimens / rebuilds — optional */
.u-display {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: var(--carbon);
}
.u-body {
  font-family: var(--text);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--carbon);
}
.u-label {
  font-family: var(--text);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--walnut);
}
.u-mono-chip {
  font-family: var(--mono);
  font-size: 0.75rem;
  background: var(--warn-dust);
  color: var(--carbon);
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
}
.u-cta-seal {
  font-family: var(--text);
  font-weight: 600;
  min-height: var(--cta-min-height);
  background: var(--seal);
  color: #fff;
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
}
.u-cta-seal:hover { background: var(--seal-deep); }
.u-cta-seal:disabled {
  background: var(--rule);
  color: var(--walnut);
  cursor: not-allowed;
}
.u-cta-signal {
  font-family: var(--text);
  font-weight: 600;
  min-height: var(--cta-min-height);
  background: var(--signal);
  color: #fff;
  border: none;
  border-radius: var(--radius-control);
}