/* ================================================================
   NOIR PLATFORM v2 — DESIGN TOKENS
   Single source of truth for color, spacing, radius, type, motion.
   See /design-previews/glossary.md for usage rules.
   ================================================================ */

:root {
  /* ──────── COLOR · paper system ──────── */
  --noir-paper:   #F4F0E8;   /* page background */
  --noir-paper-2: #EBE6DB;   /* recessed surfaces */
  --noir-ink:     #0F0F0F;   /* primary text */
  --noir-ink-2:   #2A2A2A;   /* secondary text */
  --noir-muted:   #7A7468;   /* tertiary text, hints */
  --noir-line:    #1A1A1A;   /* divider lines (heavy) */
  --noir-hair:    rgba(15,15,15,.12); /* divider lines (light) */

  /* ──────── COLOR · brand ──────── */
  --noir-orange:   #CB360F;   /* primary brand + CTA */
  --noir-orange-2: #E85A2C;   /* hover / accent */

  /* ──────── COLOR · accent palette ──────── */
  --noir-plum:   #3D2A52;
  --noir-moss:   #3F4D2F;
  --noir-sky:    #A8C5DB;
  --noir-rose:   #F3C3B6;
  --noir-butter: #F4DC8A;
  --noir-lime:   #D6E36A;
  --noir-lilac:  #C9B8E0;

  /* ──────── COLOR · status (locked meanings — see glossary) ──────── */
  --st-success-bg:  var(--noir-lime);    --st-success-fg: #2D3A0F;  /* approved · hired · qualified */
  --st-warn-bg:     var(--noir-butter);  --st-warn-fg:    #5C4513;  /* pending · awaiting action */
  --st-info-bg:     #DCE8F4;             --st-info-fg:    #1d4ed8;  /* sent · forwarded · reviewing */
  --st-vet-bg:      var(--noir-lilac);   --st-vet-fg:     #3D2A52;  /* noir vetting · on hold */
  --st-danger-bg:   var(--noir-rose);    --st-danger-fg:  #7A1F12;  /* rejected · cancelled · edit-requested */
  --st-neutral-bg:  var(--noir-paper-2); --st-neutral-fg: var(--noir-ink-2); /* received · draft · new */
  --st-paid-bg:     #0F3D2E;             --st-paid-fg:    #D5F2D5;  /* paid · receipt issued */

  /* ──────── TYPE ──────── */
  --noir-serif: 'Roboto Slab', ui-serif, Georgia, serif;
  --noir-sans:  'Roboto', system-ui, -apple-system, sans-serif;
  --noir-mono:  'Roboto', system-ui, sans-serif; /* mono utility — uppercase + tracked, see .noir-mono */

  --t-hero: clamp(48px, 7vw, 108px);
  --t-h1:   clamp(36px, 5vw, 56px);
  --t-h2:   32px;
  --t-h3:   24px;
  --t-h4:   18px;
  --t-body: 15px;
  --t-sm:   13px;
  --t-mono: 11px;

  /* ──────── RADIUS ──────── */
  --r-sm:   8px;     /* pills, chips, small inputs */
  --r-md:   14px;    /* cards, fields, buttons */
  --r-lg:   20px;    /* panels, hero blocks */
  --r-pill: 999px;   /* status pills, tags */

  /* ──────── SPACING (4px base) ──────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* ──────── MOTION ──────── */
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .15s;
  --dur-med:  .25s;
  --dur-slow: .4s;

  /* ──────── ELEVATION ──────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 6px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.30);

  /* ──────── LAYOUT ──────── */
  --wrap: 1320px;
  --wrap-narrow: 880px;
  --wrap-form: 740px;
}

/* ──────── ACCESSIBILITY · global guards ──────── */

/* Reduced motion — collapse all transitions and animations */
@media (prefers-reduced-motion: reduce) {
  .noir-v2 *,
  .noir-v2 *::before,
  .noir-v2 *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Focus rings — keyboard accessibility baseline */
.noir-v2 :focus-visible {
  outline: 2px solid var(--noir-orange);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.noir-v2 button:focus-visible,
.noir-v2 a:focus-visible {
  outline-offset: 3px;
}
.noir-v2 input:focus-visible,
.noir-v2 select:focus-visible,
.noir-v2 textarea:focus-visible {
  outline: 2px solid var(--noir-orange);
  outline-offset: 0;
}