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

/* ── FONT DECLARATIONS ── */
/* Gilroy: local first, then woff2, then ttf fallback.          */
/* Only the 5 weights used in the design system are declared.   */
@font-face {
	font-family: 'Gilroy';
	src: local('Gilroy-ExtraBold'), local('Gilroy ExtraBold'), url('/design-system/fonts/Gilroy/GilroyExtraBold/font.woff2') format('woff2'), url('/design-system/fonts/Gilroy/GilroyExtraBold/font.woff') format('woff');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Gilroy';
	src: local('Gilroy-Bold'), local('Gilroy Bold'), url('/design-system/fonts/Gilroy/GilroyBold/font.woff2') format('woff2'), url('/design-system/fonts/Gilroy/GilroyBold/font.woff') format('woff');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Gilroy';
	src: local('Gilroy-SemiBold'), local('Gilroy SemiBold'), url('/design-system/fonts/Gilroy/GilroySemiBold/font.woff2') format('woff2'), url('/design-system/fonts/Gilroy/GilroySemiBold/font.woff') format('woff');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Gilroy';
	src: local('Gilroy-Medium'), local('Gilroy Medium'), url('/design-system/fonts/Gilroy/GilroyMedium.woff2/font') format('woff2'), url('/design-system/fonts/Gilroy/GilroyMedium/font.woff') format('woff');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Gilroy';
	src: local('Gilroy-Regular'), local('Gilroy Regular'), url('/design-system/fonts/Gilroy/GilroyRegular/font.woff2') format('woff2'), url('/design-system/fonts/Gilroy/GilroyRegular/font.woff') format('woff');
	font-weight: 400;
	font-style: normal;
}

/* ── 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', system-ui, sans-serif;
	--mea-font-body: 'Gilroy', system-ui, sans-serif;
	--mea-font-citizen: 'Gilroy', system-ui, sans-serif;
	--mea-font-citizen-body: 'Gilroy', system-ui, sans-serif;
	--mea-font-officer: 'Gilroy', system-ui, sans-serif;
	--mea-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Scale – mobile (citizen app) */
	--mea-text-base: 1rem;
	--mea-text-xs: calc(0.8 * var(--mea-text-base));
	--mea-text-sm: calc(0.9 * var(--mea-text-base));
	--mea-text-md: calc(1.1 * var(--mea-text-base));
	--mea-text-lg: calc(1.3 * var(--mea-text-base));
	--mea-text-xl: calc(1.5 * var(--mea-text-base));
	--mea-text-2xl: calc(1.6 * var(--mea-text-base));
	--mea-text-3xl: calc(1.7 * var(--mea-text-base));
	--mea-text-4xl: calc(2 * var(--mea-text-base));
	--mea-text-hero: calc(3 * var(--mea-text-base));

	/* Scale – desktop (dashboard) */
	--mea-desk-xs: var(--mea-text-xs);
	--mea-desk-sm: var(--mea-text-sm);
	--mea-desk-base: var(--mea-text-base);
	--mea-desk-md: var(--mea-text-md);
	--mea-desk-lg: var(--mea-text-lg);
	--mea-desk-xl: var(--mea-text-xl);
	--mea-desk-2xl: var(--mea-text-2xl);
	--mea-desk-3xl: var(--mea-text-3xl);

	/* 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;
}