/* ============================================================
   tokens.css
   ----------
   CSS reset + :root design tokens (color, surface, text, font,
   spacing, motion, semantic state, breakpoints) and the utility
   classes derived directly from those tokens.

   MUST load before base.css and components*.css. Cascade-critical.
   ============================================================ */
/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
.balance-text { text-wrap: balance; }
h1, h2 { text-wrap: balance; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* --- Custom Properties --- */
:root {
  /* Brand */
  --teal:        #006B5E;
  --teal-dark:   #004D44;
  --teal-deeper: #0A1F1C;
  --teal-light:  #4A9B8E;
  --teal-on-dark:#5DB7A9;
  --gold:        #D4A84B;
  --gold-light:  #E8C989;
  --gold-dark:   #6E4F0E;
  --sage:        #7A9B8A;

  /* Surfaces */
  --surface:       #FAFAF7;
  --surface-dim:   #F0EDE8;
  --surface-dark:  #0D2925;
  --surface-card:  #FFFFFF;

  /* Text */
  --text:          #1A2A3A;
  --text-secondary:#465463;
  --text-muted:    #8A96A4;
  --text-inverse:  #F5F5F3;

  /* Fonts */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Tenor Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --section-pad: clamp(80px, 12vh, 140px);
  --container:   1140px;
  --gap:         clamp(16px, 3vw, 32px);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration:    0.7s;

  /* Semantic state colors (audit M1: stop hex leakage in HTML inline styles) */
  --success:       #66BB6A;
  --success-soft:  rgba(46, 125, 50, 0.18);
  --danger:        #A51C16; /* AAA on light surfaces */
  --danger-on-dark:#FF8A80; /* AAA on teal-deeper/dark surfaces */
  --danger-soft:   rgba(239, 83, 80, 0.18);
  --warn:          #FB8C00;
  --warn-soft:     rgba(251, 140, 0, 0.18);
  --neutral:       #B0BEC5;
  --neutral-soft:  rgba(120, 144, 156, 0.18);

  /* Canonical text-on-dark ramp (audit M1: stop alpha-value drift) */
  --text-on-dark:        rgba(255, 255, 255, 0.92);
  --text-on-dark-muted:  rgba(255, 255, 255, 0.70); /* >=4.5:1 on teal-deeper */
  --text-on-dark-subtle: rgba(255, 255, 255, 0.62); /* >=3.5:1 — large text only */

  /* Canonical breakpoints (audit H4: documentation only — CSS @media
     can't currently consume custom properties, so any media query MUST
     use these literal pixel values to stay aligned). */
  --bp-mobile:   640px;   /* sm: 1-col layouts */
  --bp-tablet:   1023px;  /* md: matches sidebar collapse */
  --bp-compact:  1407px;  /* lg: sidebar-visible but content well <1120px */
}

/* ============================================================
   Utility classes for the new tokens
   ============================================================ */
.text-success         { color: var(--success); }
.text-danger          { color: var(--danger); }
.text-warn            { color: var(--warn); }
.text-neutral         { color: var(--neutral); }
.text-on-dark         { color: var(--text-on-dark); }
.text-on-dark-muted   { color: var(--text-on-dark-muted); }
.text-on-dark-subtle  { color: var(--text-on-dark-subtle); }

/* Visually hidden but available to screen readers (audit L5) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}