/* ============================================================
   VNP — SHARED DESIGN TOKENS  (canonical: /shared-css/tokens.css)
   The volunteer portal and staff dashboard are separate git
   repos / Vercel projects, so this file is SYNCED: edit the
   canonical here, then copy into each repo's assets/css/.
   Keep all copies byte-identical.
   ============================================================ */
:root {
  /* Brand */
  --c-brand-blue:       #20566F;
  /* Decorative accent — strictly non-semantic. Used for visual warmth
     only (divider rules, dingbats). Never carries state or action.
     Three-step palette mirroring the brand-blue tint/default/light
     pattern, so future surfaces (cards filled with gold-tint, dividers
     in gold-light, dingbats in gold) can pull from the same family.
     May 2026 — being pitched to VNP as palette neutrals. */
  --c-accent-gold-tint: #F0EBDF;
  --c-accent-gold:      #9C7A3F;
  --c-accent-gold-light: #C9AC72;
  --c-brand-blue-light: #2A7293;
  --c-brand-blue-tint:  #EBF4F8;
  /* Soft tint — barely-there blue cast, just enough to register as "this
     row is open." Sits very close to white so the EV icon circle (which
     is at brand-blue-tint) clearly pops against the row background. */
  --c-brand-blue-tint-soft: #FAFCFD;
  --c-brand-red:        #EE3C26;
  --c-brand-red-dark:   #C8321E;
  --c-brand-red-tint:   #FEF0EE;
  --c-brand-blush:      #E8D1D1;
  /* Accent green — semantic positive state (Live, Complete, verified).
     Three-step tint/default/dark family per ref doc §08 "Semantic accents
     — green palette" (replaces a legacy one-off #166534 that lived only on
     the verified chip). Default #7AC266 = MichiganEarlyVote logo green,
     reserved/sparing; -dark is the AA-contrast text/icon on -tint. */
  --c-accent-green-tint: #D6F7D3;
  --c-accent-green:      #7AC266;
  --c-accent-green-dark: #3D7A2E;

  /* Text */
  --c-text-primary:    #2A2E31;
  --c-text-secondary:  #444444;
  --c-text-muted:      #6B6B6B;
  --c-text-faint:      #A3A3A3;
  --c-text-on-dark:    #FFFFFF;

  /* Surfaces */
  --c-surface-page:    #FFFFFF;    /* Cards — stay clean white so they rest visibly on canvas */
  --c-surface-canvas:  #FFFEFB;    /* Page bg — softest cream, barely warm. The foundational page layer. */
  --c-surface-subtle:  #F2F2F2;

  /* Borders */
  --c-border-default:  #666666;
  --c-border-subtle:   #CCCCCC;    /* VNP brand gray */
  --c-border-input:    #D6D9E1;
  --c-border-error:    var(--c-brand-red-dark);

  /* Status-chip colors — named by COLOR so both dashboards' status vocabularies
     map to one set (volunteer change-pending = staff in-progress = blue;
     volunteer verified = staff complete = green; etc.). Canonical: Figma. */
  --c-chip-blue-bg:   var(--c-brand-blue-tint);     /* change-pending / in-progress */
  --c-chip-blue-fg:   var(--c-brand-blue);
  --c-chip-green-bg:  var(--c-accent-green-tint);   /* verified / complete */
  --c-chip-green-fg:  var(--c-accent-green-dark);
  --c-chip-red-bg:    var(--c-brand-red-tint);      /* rejected */
  --c-chip-red-fg:    var(--c-brand-red-dark);
  --c-chip-gold-bg:   var(--c-accent-gold-tint);    /* "Submitted" acknowledgment */
  --c-chip-gold-fg:   var(--c-accent-gold);         /* darkest gold token, AA on gold tint */
  --c-chip-blush-bg:  var(--c-brand-blush);         /* needs-attention (advisory caution) */
  --c-chip-blush-fg:  #7F1D1D;
  --c-chip-muted-bg:  var(--c-surface-subtle);      /* inactive */
  --c-chip-muted-fg:  var(--c-text-muted);

  /* Type icons */
  --c-icon-dropbox:    var(--c-brand-red);
  --c-icon-dropbox-bg: var(--c-brand-red-tint);
  --c-icon-ev:         var(--c-brand-blue);
  --c-icon-ev-bg:      var(--c-brand-blue-tint);

  /* Action (button) semantic tokens — mirror the Figma action/* layer.
     Buttons reference these, not primitives directly. Inactive fills
     intentionally alias border tokens (per Figma action/inactive/*). */
  --c-action-primary-surface:          var(--c-brand-blue);     /* #20566F (blue/default canonical) */
  --c-action-primary-text:             var(--c-text-on-dark);
  --c-action-secondary-surface:        var(--c-surface-page);
  --c-action-secondary-text:           var(--c-brand-blue);
  --c-action-secondary-border:         var(--c-brand-blue);
  --c-action-tertiary-surface:         var(--c-text-primary);   /* #2A2E31 */
  --c-action-tertiary-text:            var(--c-text-on-dark);
  --c-action-text:                     var(--c-brand-blue);     /* primary-text */
  --c-action-text-on-dark:             var(--c-text-on-dark);   /* on-dark-text */
  --c-action-inactive-surface:         var(--c-border-subtle);  /* #CCC light fill */
  --c-action-inactive-text:            var(--c-text-muted);     /* #6B6B6B label */
  --c-action-inactive-surface-on-dark: var(--c-border-default); /* #666 dark fill */
  --c-action-inactive-text-on-dark:    var(--c-border-subtle);  /* #CCC label */

  /* Type */
  --ff-serif: "Lora", Georgia, serif;
  --ff-sans:  "Livvic", system-ui, -apple-system, sans-serif;

  /* Font weight */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Font size */
  --fs-display: 39px;
  --fs-h1:      31px;
  --fs-h2:      25px;
  --fs-h3:      22px;
  --fs-h4:      20px;
  --fs-body:    16px;
  --fs-small:   13px;
  --fs-label:   11px;

  /* Letter-spacing — the uppercase "label" type style (Figma label token). */
  --ls-label: 1.2px;

  /* State overlays — hover/pressed. Composited via box-shadow:inset so
     they darken any surface (solid, tinted, or transparent) uniformly. */
  --state-hover: rgba(0, 0, 0, 0.05);
  --state-hover-inverse: rgba(255, 255, 255, 0.10);

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;  --s-8: 64px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-tab: 20px;  /* folder-tab corner — intentional strong curve */
  --r-button: 16px;  /* Buttons — Figma borderRadius/lg. Set to 16 (June 2026) to match the Figma button radius; retires the unused 8px "button semi round" token. */
  --r-pill: 999px;

  /* Border width */
  --bw-default: 1px;
  --bw-medium:  1.5px;
  --bw-thick:   2px;
  --bw-heavy:   3px;

  --content-width: 1200px;
}