/* Hallmark · macrostructure: Narrative Workflow · nav: N9 Edge-aligned minimal · footer: Ft1 Mast-headed · tone: editorial-executive · anchor hue: navy-244 (10°, 0.05 chroma) · pre-emit critique: P5 H5 E5 S5 R4 V5 */
/* =====================================================================
   SalesCoach.id — Design Token Layer  (tokens.css)
   Owned by Hallmark. Single source of truth for web surfaces.
   style.md remains the MASTER document for palette / typography / DO-DON'T.
   This file is the machine-readable projection of style.md §6.
   Namespace: --color-* / --font-* / --space-*  (Consulo contract)
   ===================================================================== */

:root {
  /* ---------- Colour · Brand core (style.md §2 Palette A) ---------- */
  --color-navy: #0A2540;
  --color-navy-dark: #061830;
  --color-navy-light: #1B3A5C;
  --color-navy-deep: #04101F;
  --color-gold: #C9A961;
  --color-gold-light: #E5C77F;
  --color-gold-dark: #9C8042;
  --color-paper: #FFFFFF;
  --color-paper-warm: #F8F6F0;
  --color-paper-2: #F2F0E9;
  --color-ink: #1E293B;
  --color-ink-muted: #5A6675;
  --color-ink-faint: #94A3B8;
  --color-rule: #E8EAED;
  --color-rule-warm: #E3DECE;

  /* ---------- Colour · Status (style.md §2 Palette C) ---------- */
  --color-status-pain: #B91C1C;
  --color-status-outcome: #056B4F;

  /* ---------- Colour · Consulo contract aliases ---------------------
     These are the names the existing assets/css/style.css consumes.
     Never redefine them elsewhere — always point at the brand token. */
  --color-background: var(--color-paper);
  --color-foreground: var(--color-ink);
  --color-foreground-heading: var(--color-navy);
  --color-foreground-subheading: var(--color-ink-faint);
  --color-background-subheading: rgba(201, 169, 97, 0.12);
  --color-primary: var(--color-navy);
  --color-primary-hover: var(--color-gold);
  --color-border: rgba(201, 169, 97, 0.25);
  --color-border-hover: var(--color-gold);
  --color-overlay: rgba(10, 37, 64, 0.72);
  --color-focus: var(--color-gold-dark);

  --color-primary-button-text: var(--color-paper);
  --color-primary-button-background: var(--color-navy);
  --color-primary-button-border: var(--color-navy);
  --color-primary-button-icon: var(--color-gold);
  --color-primary-button-icon-background: transparent;
  --color-primary-button-hover-text: var(--color-navy);
  --color-primary-button-hover-background: var(--color-gold);
  --color-primary-button-hover-border: var(--color-gold);
  --color-primary-button-hover-icon: var(--color-navy);
  --color-primary-button-hover-icon-background: transparent;

  --color-secondary-button-text: var(--color-navy);
  --color-secondary-button-background: var(--color-paper);
  --color-secondary-button-border: var(--color-navy);
  --color-secondary-button-hover-text: var(--color-paper);
  --color-secondary-button-hover-background: var(--color-gold);
  --color-secondary-button-hover-border: var(--color-gold);

  --color-input-text: var(--color-ink);
  --color-input-background: var(--color-paper);
  --color-input-border: var(--color-rule);
  --color-input-border-hover: var(--color-gold);
  --color-input-placeholder: var(--color-ink-faint);
  --color-input-error: var(--color-status-pain);
  --color-input-success: var(--color-status-outcome);

  /* ---------- Typography (style.md §3 — 2+1 rule) ---------- */
  --font-heading--family: "Georgia", "Times New Roman", serif;
  --font-heading--weight: 700;
  --font-heading--style: normal; /* headers are ROMAN — never italic */
  --font-body--family: "Calibri", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-body--weight: 400;
  --font-body--style: normal;
  --font-button--family: "Georgia", "Times New Roman", serif;
  --font-button--weight: 700;
  --font-outlier--family: "Consolas", "Courier New", monospace;

  --font-h1--size: clamp(2.5rem, 5.2vw, 3.75rem);   /* 40 → 60px */
  --font-h2--size: clamp(2rem, 4vw, 3rem);          /* 32 → 48px */
  --font-h3--size: clamp(1.625rem, 3vw, 2.25rem);   /* 26 → 36px */
  --font-h4--size: clamp(1.25rem, 2vw, 1.5rem);     /* 20 → 24px */
  --font-h5--size: 1.25rem;
  --font-h6--size: 1rem;
  --font-body-size: 1rem;
  --font-label-size: 0.6875rem;
  --font-button-size: 1rem;
  --font-button-size-mobile: 0.9375rem;
  --font-nav-main: 1rem;

  /* ---------- Spacing scale (new — was ad-hoc) ---------- */
  --space-3xs: 0.25rem;   /*  4px */
  --space-2xs: 0.5rem;    /*  8px */
  --space-xs:  0.75rem;   /* 12px */
  --space-sm:  1rem;      /* 16px */
  --space-md:  1.5rem;    /* 24px */
  --space-lg:  2rem;      /* 32px */
  --space-xl:  2.5rem;    /* 40px */
  --space-2xl: 3.75rem;   /* 60px */
  --space-3xl: 5rem;      /* 80px */
  --space-4xl: 6.25rem;   /* 100px */
  --space-5xl: 8.75rem;   /* 140px */

  --measure: 68ch;        /* prose max-width */
  --page-inline: clamp(1rem, 4vw, 1.5rem);

  /* ---------- Shape & rule ---------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 40px;
  --rule-hairline: 1px;
  --rule-double-gap: 4px;

  /* ---------- Motion ---------- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Layout ---------- */
  --bp-layout: 60rem;    /* 960px — multi-column → single */
  --bp-type: 40rem;      /* 640px — display type steps down */

  /* ---------- Consulo legacy aliases ---------- */
  --style-border-width-buttons-primary: 1px;
  --style-cta-underline-thickness: 1px;
}

/* ---------- Page-edge safety (Hallmark gate 34) ---------- */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: clip;
}

/* ---------- Focus visibility (instant, never faded) ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- Typography defaults ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading--family);
  font-weight: var(--font-heading--weight);
  font-style: normal;
  color: var(--color-foreground-heading);
  text-wrap: balance;
}
p, li, dd, dt { text-wrap: pretty; }
.prose { max-width: var(--measure); }

/* Small-caps display label — editorial workhorse */
.hm-label {
  font-family: var(--font-body--family);
  font-size: var(--font-label-size);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}

/* Numeral register — the one mono slot */
.hm-numeral {
  font-family: var(--font-outlier--family);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Double rule — editorial separator */
.hm-double-rule {
  border-top: var(--rule-hairline) solid var(--color-rule-warm);
  padding-top: var(--rule-double-gap);
  border-bottom: var(--rule-hairline) solid var(--color-rule-warm);
  height: calc(var(--rule-double-gap) + 2px);
}

/* Fleuron — editorial ornament */
.hm-fleuron {
  color: var(--color-gold-dark);
  letter-spacing: 0.4em;
  text-align: center;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Mobile typography step-down ---------- */
@media (max-width: 40rem) {
  :root {
    --font-h1--size: 2rem;
    --font-h2--size: 1.625rem;
    --font-h3--size: 1.375rem;
    --font-h4--size: 1.125rem;
  }
  :where(a.button, button.button, [role="button"]) { min-height: 44px; }
}