/* ============================================================
   MEA Design Tokens
   Single source of truth for all color, typography, spacing,
   elevation, motion, and layout primitives.
   ============================================================ */

/* ── COLOR PRIMITIVES ── */
:root {
  /* Brand */
  --mea-navy:           #0A1628;
  --mea-navy-70:        rgba(10, 22, 40, 0.7);
  --mea-blue:           #1442D9;
  --mea-blue-dark:      #0F33B5;
  --mea-blue-bright:    #2D5BF7;
  --mea-blue-light:     #DCF0FB;
  --mea-baby-blue:      #82CBF5;
  --mea-baby-mid:       #4EB3EE;
  --mea-baby-pale:      #EAF6FD;
  --mea-blue-50:        #eff6ff;
  --mea-blue-200:       #bfdbfe;

  /* Core neutrals */
  --mea-white:          #FFFFFF;
  --mea-black:          #000000;

  /* Accent */
  --mea-purple:         #A78BFA;

  /* Citizen app dark theme */
  --mea-dark:           #060A1E;
  --mea-dark-2:         #0A0F30;
  --mea-card-dark:      #0F1540;
  --mea-dark-navy:      #00003C;
  --mea-navy-mid:       #0D1B36;
  --mea-navy-light:     #162848;
  --mea-navy-deep:      #1A2E50;   /* hero-gradient mid stop */

  /* Officer portal */
  --mea-officer-navy:       #0F1140;
  --mea-officer-navy-mid:   #1A1D5A;
  --mea-officer-navy-light: #252A6A;
  --mea-officer-accent:     #4A5FE0;
  --mea-officer-bright:     #5B6FFF;

  /* Semantic – status */
  --mea-green:          #22C55E;
  --mea-green-light:    #DCFCE7;
  --mea-green-hover:    #16A34A;
  --mea-green-dark:     #166534;
  --mea-green-bright:   #2ecc71;
  --mea-green-mobile:   #00B67A;   /* citizen app success/active accent (distinct from dashboard --mea-green) */
  --mea-mint:           #3BEBA7;   /* Figma participant signature accent — Passed badges, location banner, progress (reconciliation 2026-06-09) */
  --mea-mint-ink:       #0A4A33;   /* text on mint surfaces (>=4.5:1) */
  --mea-rose:           #F72064;   /* chat unread badges (Figma frame 79) */
  --mea-checkout-orange: #F97316;  /* check-OUT flow accent — semantic pair to check-in blue (Figma frames 86-91) */
  --mea-green-deep:     #15803D;   /* done-state chip text */
  --mea-red:            #EF4444;
  --mea-red-light:      #FEE2E2;
  --mea-red-hover:      #DC2626;
  --mea-red-dark:       #991B1B;
  --mea-red-muted:      #FCA5A5;
  --mea-amber:          #F59E0B;
  --mea-amber-light:    #FEF3C7;
  --mea-amber-dark:     #92400E;
  --mea-orange:         #E8744F;

  /* Neutrals – dashboard (blue-tinted grays) */
  --mea-gray-50:        #EEF5FF;
  --mea-gray-100:       #E4EFFA;
  --mea-gray-200:       #D2E6F5;
  --mea-gray-300:       #B0CEEA;
  --mea-gray-400:       #7AAFD4;
  --mea-gray-500:       #4A7FA0;
  --mea-gray-600:       #2E6683;
  --mea-gray-700:       #1E4D6B;
  --mea-gray-900:       #0A1628;

  /* Neutrals – citizen app (cool grays) */
  --mea-cg-off:         #F4F6FF;
  --mea-cg-1:           #F0F2FA;
  --mea-cg-2:           #E2E6F3;
  --mea-cg-3:           #B8BFD8;
  --mea-cg-4:           #7B84A3;

  /* Gradients */
  --mea-grad-blue:      linear-gradient(160deg, #2D5BF7 0%, #1442D9 100%);
  --mea-grad-blue-btn:  linear-gradient(90deg, #2D5BF7 0%, #1442D9 100%);
  /* Citizen primary CTA — the meagitgit 3-stop pill gradient (reconciliation
     2026-06-09: both references specify this treatment for participant CTAs) */
  --mea-grad-cta:       linear-gradient(160deg, #4A7AFF 0%, #2D5BF7 55%, #144BD8 100%);
  --mea-grad-dark-card: linear-gradient(160deg, #151945 0%, #0C1238 100%);
  --mea-grad-officer:   linear-gradient(180deg, #0A0D2E 0%, #111650 50%, #1A2070 100%);
  --mea-grad-sidebar:   linear-gradient(160deg, rgba(130, 203, 245, 0.15) 0%, transparent 100%);
  --mea-grad-navy-blue: linear-gradient(135deg, #0D1B36, #1442D9);
  --mea-grad-navy-mid:  linear-gradient(135deg, #0D1B36, #162848);
  --mea-grad-navy-primary: linear-gradient(135deg, #0A1628, #1442D9);
  --mea-grad-officer-card: linear-gradient(160deg, #2A5298, #1A3575);
  --mea-grad-officer-dark: linear-gradient(160deg, #1A4060, #0D2840);
  --mea-grad-officer-deep: linear-gradient(160deg, #1E4A8A, #0A1F45);

  /* Logo */
  --mea-logo-blue:      #3A9AE8;
  --mea-logo-grad:      linear-gradient(90deg, #3A9AE8 0%, #82CBF5 100%);

  /* Surfaces */
  --mea-surface-page:   #EEF5FF;       /* dashboard bg */
  --mea-surface-card:   #FFFFFF;
  --mea-surface-dark:   #060A1E;        /* citizen app bg */
  --mea-surface-sidebar:#0A1628;

  /* Derived interaction */
  --mea-blue-hover-light:#7BC4FF;

  /* Component-specific neutrals */
  --mea-gray-bg:        #F9FAFB;
  --mea-gray-pressed:   #D4D6DC;

  /* Charge tag / badge palette */
  --mea-teal:           #14B8A6;
  --mea-teal-light:     #F0FFFE;
  --mea-teal-dark:      #0F766E;
  --mea-violet:         #7C3AED;
  --mea-violet-light:   #EDE9FE;
  --mea-indigo:         #6366F1;
  --mea-pink:           #DB2777;
  --mea-yellow-light:   #FEF9C3;
  --mea-yellow-dark:    #A16207;
  --mea-orange-light:   #FFEDD5;
  --mea-orange-dark:    #C2410C;
  --mea-slate:          #475569;
  --mea-slate-light:    #F1F5F9;
  --mea-green-success:  #D1FAE5;
  --mea-green-success-dark: #065F46;

  /* Alert border palette */
  --mea-yellow-border:  #FDE68A;
  --mea-blue-border:    #BFDBFE;
  --mea-green-border:   #86EFAC;
  --mea-red-border:     #FCA5A5;
}

/* ── TYPOGRAPHY ── */
:root {
  /* Font stacks */
  --mea-font-heading:   'Gilroy', 'Plus Jakarta Sans', system-ui, sans-serif;
  --mea-font-body:      'Neue Montreal', 'DM Sans', 'Inter', system-ui, sans-serif;
  --mea-font-citizen:   'Plus Jakarta Sans', system-ui, sans-serif;
  --mea-font-citizen-body: 'Inter', system-ui, sans-serif;
  --mea-font-officer:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mea-font-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scale – mobile (citizen app) */
  --mea-text-xs:    11px;
  --mea-text-sm:    13px;
  --mea-text-base:  15px;
  --mea-text-md:    17px;
  --mea-text-lg:    18px;
  --mea-text-xl:    20px;
  --mea-text-2xl:   22px;
  --mea-text-3xl:   24px;
  --mea-text-4xl:   36px;
  --mea-text-hero:  48px;

  /* Scale – desktop (dashboard) */
  --mea-desk-xs:    10px;
  --mea-desk-sm:    11px;
  --mea-desk-base:  13px;
  --mea-desk-md:    13.5px;
  --mea-desk-lg:    14px;
  --mea-desk-xl:    17px;
  --mea-desk-2xl:   20px;
  --mea-desk-3xl:   28px;

  /* Weights */
  --mea-w-regular:  400;
  --mea-w-medium:   500;
  --mea-w-semibold: 600;
  --mea-w-bold:     700;
  --mea-w-extrabold:800;
  --mea-w-black:    900;

  /* Line heights */
  --mea-lh-tight:   1.2;
  --mea-lh-snug:    1.3;
  --mea-lh-normal:  1.5;
  --mea-lh-relaxed: 1.6;

  /* Letter spacing */
  --mea-ls-tight:   -0.5px;
  --mea-ls-normal:  0;
  --mea-ls-wide:    0.4px;
  --mea-ls-caps:    0.8px;
}

/* ── SPACING ── */
:root {
  --mea-space-1:   4px;
  --mea-space-2:   8px;
  --mea-space-3:   12px;
  --mea-space-4:   16px;
  --mea-space-5:   20px;
  --mea-space-6:   24px;
  --mea-space-7:   28px;
  --mea-space-8:   32px;
  --mea-space-10:  40px;
  --mea-space-12:  48px;
  --mea-space-16:  64px;

  /* Screen gutters */
  --mea-gutter-mobile:   16px;
  --mea-gutter-mobile-l: 20px;
  --mea-gutter-desktop:  28px;
}

/* ── BORDER RADIUS ── */
:root {
  --mea-radius-sm:   6px;
  --mea-radius-md:   8px;
  --mea-radius-lg:   12px;
  --mea-radius-xl:   14px;
  --mea-radius-2xl:  16px;
  --mea-radius-3xl:  20px;
  --mea-radius-pill:  9999px;
  --mea-radius-circle:50%;
}

/* ── ELEVATION ── */
:root {
  --mea-shadow-sm:    0 1px 4px rgba(20, 80, 140, 0.04);
  --mea-shadow-md:    0 4px 16px rgba(20, 80, 140, 0.08);
  --mea-shadow-lg:    0 8px 28px rgba(20, 75, 216, 0.15);
  --mea-shadow-btn:   0 8px 28px rgba(20, 75, 216, 0.35);
  --mea-shadow-phone: 0 40px 80px rgba(0, 0, 0, 0.8);
  /* meagitgit citizen light-card shadow + hero-card depth (reconciliation 2026-06-09) */
  --mea-shadow-card:  0 2px 12px rgba(0, 0, 20, 0.08);
  --mea-shadow-hero:  0 8px 32px rgba(0, 0, 20, 0.25);
  /* Modal/sheet scrim — translucent by design, never an opaque surface token */
  --mea-scrim:        rgba(0, 0, 20, 0.75);
}

/* ── MOTION ── */
:root {
  --mea-ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --mea-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --mea-dur-fast:      0.12s;
  --mea-dur-normal:    0.15s;
  --mea-dur-smooth:    0.28s;
  --mea-dur-slow:      0.4s;
}

/* ── LAYOUT ── */
:root {
  /* Dashboard */
  --mea-sidebar-w:    240px;
  --mea-header-h:     64px;

  /* Citizen app — responsive widths */
  --mea-app-max-w:         430px;
  --mea-app-max-w-tablet:  680px;
  --mea-app-max-w-desktop: 1200px;
  --mea-tab-h:        0px;
  --mea-safe-top:     env(safe-area-inset-top, 0px);
  --mea-safe-bottom:  env(safe-area-inset-bottom, 0px);

  /* Breakpoints (for reference — use in media queries) */
  /* --bp-mobile:  430px   citizen app max width */
  /* --bp-tablet:  768px   officer portal */
  /* --bp-desktop: 1024px  dashboard minimum */
  /* --bp-wide:    1440px  dashboard design width */
}

/* ── Z-INDEX SCALE ── */
:root {
  --mea-z-base:      1;
  --mea-z-card:      10;
  --mea-z-dropdown:  100;
  --mea-z-sticky:    200;
  --mea-z-modal:     500;
  --mea-z-toast:     700;
  --mea-z-overlay:   900;
  --mea-z-top:       1000;
}

/* ── SENTINEL CANARY ── */
/* Defined ONLY here. The render-integrity tokens sentinel (app/sentinels.css)
   hides itself with var(--mea-sentinel-hidden); if tokens.css fails to load,
   the var is undefined, the fallback value reveals the tokens sentinel, telling
   us custom-property resolution broke. */
:root { --mea-sentinel-hidden: none; }