/* ============================================================
   Ahmed Masum & Co. — Design Tokens
   Usage: import this file and use var(--amc-*) anywhere
   ============================================================ */

:root {

    /* ── Brand Core ─────────────────────────────────────────── */
    --amc-navy-primary: #1B3A6B;
    --amc-royal-blue: #2A5BA0;
    --amc-deep-navy: #153059;
    --amc-midnight: #0F2347;
    --amc-sky-blue: #4A7CC4;
    --amc-mist-blue: #C5D3E8;
    --amc-ice-blue: #EBF0F8;

    /* ── Background ─────────────────────────────────────────── */
    --amc-bg-primary: #FAFAFA;
    --amc-bg-secondary: #F5F7FA;
    --amc-bg-accent: #EBF0F8;
    --amc-bg-dark: #1B3A6B;
    --amc-bg-darkest: #0F2347;

    /* ── Text ───────────────────────────────────────────────── */
    --amc-text-primary: #0F2347;
    --amc-text-secondary: #2A5BA0;
    --amc-text-muted: #6B87B0;
    --amc-text-on-dark: #FAFAFA;
    --amc-text-on-dark-muted: #EBF0F8;

    /* ── Button ─────────────────────────────────────────────── */
    --amc-btn-fill-bg: #1B3A6B;
    --amc-btn-fill-text: #FAFAFA;
    --amc-btn-fill-hover-bg: #153059;
    --amc-btn-outline-border: #1B3A6B;
    --amc-btn-outline-text: #1B3A6B;
    --amc-btn-outline-hover-bg: #EBF0F8;
    --amc-btn-ghost-bg: rgba(27, 58, 107, 0.09);
    --amc-btn-ghost-text: #1B3A6B;
    --amc-btn-disabled-bg: #C5D3E8;
    --amc-btn-disabled-text: #6B87B0;

    /* ── Link ───────────────────────────────────────────────── */
    --amc-link-default: #2A5BA0;
    --amc-link-hover: #153059;
    --amc-link-visited: #1B3A6B;
    --amc-link-underline: #C5D3E8;

    /* ── Border ─────────────────────────────────────────────── */
    --amc-border-default: #C5D3E8;
    --amc-border-strong: #1B3A6B;
    --amc-border-accent: #2A5BA0;
    --amc-border-hover: #2A5BA0;
    --amc-border-focus: #1B3A6B;
    --amc-border-disabled: #DDE7F4;

    /* ── Hover States ───────────────────────────────────────── */
    --amc-hover-btn: #153059;
    --amc-hover-bg: #EBF0F8;
    --amc-hover-link: #153059;
    --amc-hover-border: #C5D3E8;
    --amc-hover-nav: #DDE7F4;
    --amc-hover-row: #F5F7FA;

    /* ── Box Shadow ─────────────────────────────────────────── */
    --amc-shadow-sm: 0 1px 4px rgba(27, 58, 107, 0.10);
    --amc-shadow-md: 0 4px 16px rgba(27, 58, 107, 0.16);
    --amc-shadow-lg: 0 8px 32px rgba(27, 58, 107, 0.22);
    --amc-shadow-focus: 0 0 0 3px rgba(27, 58, 107, 0.30);
    --amc-shadow-card: 0 2px 8px rgba(27, 58, 107, 0.12);

    /* ── Gradients ──────────────────────────────────────────── */
    --amc-gradient-brand: linear-gradient(135deg, #1B3A6B 0%, #2A5BA0 100%);
    --amc-gradient-deep: linear-gradient(135deg, #0F2347 0%, #1B3A6B 50%, #4A7CC4 100%);
    --amc-gradient-light: linear-gradient(180deg, #EBF0F8 0%, #FAFAFA 100%);

    /* ── Semantic / Status ──────────────────────────────────── */
    --amc-success-bg: #EAF6EF;
    --amc-success-text: #1B6B3A;
    --amc-success-border: #A3D9B8;
    --amc-warning-bg: #FEF6E7;
    --amc-warning-text: #8A5A00;
    --amc-warning-border: #F5D48A;
    --amc-error-bg: #FDECEA;
    --amc-error-text: #C0392B;
    --amc-error-border: #F5A9A3;
    --amc-info-bg: #EBF0F8;
    --amc-info-text: #1B3A6B;
    --amc-info-border: #C5D3E8;
    --amc-disabled-bg: #F5F7FA;
    --amc-disabled-text: #6B87B0;
    --amc-disabled-border: #DDE7F4;

    /* ── Overlay & Backdrop ─────────────────────────────────── */
    --amc-overlay: rgba(27, 58, 107, 0.55);
    --amc-overlay-light: rgba(27, 58, 107, 0.12);

    /* ── Typography ─────────────────────────────────────────── */
    --amc-font-sans: 'Inter', 'Segoe UI', sans-serif;
    --amc-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --amc-font-size-xs: 11px;
    --amc-font-size-sm: 13px;
    --amc-font-size-base: 16px;
    --amc-font-size-lg: 18px;
    --amc-font-size-xl: 22px;
    --amc-font-size-2xl: 28px;
    --amc-font-size-3xl: 36px;
    --amc-font-weight-regular: 400;
    --amc-font-weight-medium: 500;
    --amc-font-weight-bold: 700;
    --amc-line-height-tight: 1.3;
    --amc-line-height-base: 1.6;
    --amc-line-height-loose: 1.8;

    /* ── Spacing ────────────────────────────────────────────── */
    --amc-space-1: 4px;
    --amc-space-2: 8px;
    --amc-space-3: 12px;
    --amc-space-4: 16px;
    --amc-space-5: 24px;
    --amc-space-6: 32px;
    --amc-space-8: 48px;
    --amc-space-10: 64px;

    /* ── Border Radius ──────────────────────────────────────── */
    --amc-radius-sm: 4px;
    --amc-radius-md: 8px;
    --amc-radius-lg: 12px;
    --amc-radius-xl: 16px;
    --amc-radius-pill: 999px;

    /* ── Transition ─────────────────────────────────────────── */
    --amc-transition-fast: 150ms ease;
    --amc-transition-base: 250ms ease;
    --amc-transition-slow: 400ms ease;

    /* ── Z-index ────────────────────────────────────────────── */
    --amc-z-base: 1;
    --amc-z-dropdown: 100;
    --amc-z-sticky: 200;
    --amc-z-modal: 300;
    --amc-z-toast: 400;
    --amc-z-tooltip: 500;

}


/* ============================================================
   Dark Theme
   Apply via: <html data-theme="dark"> or <body data-theme="dark">
   ============================================================ */

[data-theme='dark'] {

    /* ── Background ─────────────────────────────────────────── */
    --amc-bg-primary: #0D1F3C;
    --amc-bg-secondary: #132748;
    --amc-bg-accent: #1B3A6B;
    --amc-bg-dark: #091629;
    --amc-bg-darkest: #060E1B;

    /* ── Text ───────────────────────────────────────────────── */
    --amc-text-primary: #EBF0F8;
    --amc-text-secondary: #A8C2E0;
    --amc-text-muted: #6B87B0;
    --amc-text-on-dark: #FAFAFA;
    --amc-text-on-dark-muted: #C5D3E8;

    /* ── Button ─────────────────────────────────────────────── */
    --amc-btn-fill-bg: #2A5BA0;
    --amc-btn-fill-text: #FAFAFA;
    --amc-btn-fill-hover-bg: #4A7CC4;
    --amc-btn-outline-border: #4A7CC4;
    --amc-btn-outline-text: #A8C2E0;
    --amc-btn-outline-hover-bg: #1B3A6B;
    --amc-btn-ghost-bg: rgba(74, 124, 196, 0.15);
    --amc-btn-ghost-text: #A8C2E0;
    --amc-btn-disabled-bg: #132748;
    --amc-btn-disabled-text: #3A5478;

    /* ── Link ───────────────────────────────────────────────── */
    --amc-link-default: #7AAED9;
    --amc-link-hover: #A8C2E0;
    --amc-link-visited: #6B87B0;
    --amc-link-underline: #2A5BA0;

    /* ── Border ─────────────────────────────────────────────── */
    --amc-border-default: #1E3D6E;
    --amc-border-strong: #4A7CC4;
    --amc-border-accent: #2A5BA0;
    --amc-border-hover: #4A7CC4;
    --amc-border-focus: #4A7CC4;
    --amc-border-disabled: #132748;

    /* ── Hover States ───────────────────────────────────────── */
    --amc-hover-btn: #4A7CC4;
    --amc-hover-bg: #1B3A6B;
    --amc-hover-link: #A8C2E0;
    --amc-hover-border: #4A7CC4;
    --amc-hover-nav: #132748;
    --amc-hover-row: #132748;

    /* ── Box Shadow ─────────────────────────────────────────── */
    --amc-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.30);
    --amc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
    --amc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50);
    --amc-shadow-focus: 0 0 0 3px rgba(74, 124, 196, 0.40);
    --amc-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);

    /* ── Gradients ──────────────────────────────────────────── */
    --amc-gradient-brand: linear-gradient(135deg, #0F2347 0%, #1B3A6B 100%);
    --amc-gradient-deep: linear-gradient(135deg, #060E1B 0%, #0F2347 50%, #1B3A6B 100%);
    --amc-gradient-light: linear-gradient(180deg, #132748 0%, #0D1F3C 100%);

    /* ── Semantic / Status ──────────────────────────────────── */
    --amc-success-bg: #0D2B1A;
    --amc-success-text: #5DC987;
    --amc-success-border: #1B6B3A;
    --amc-warning-bg: #2A1F05;
    --amc-warning-text: #F5C842;
    --amc-warning-border: #8A5A00;
    --amc-error-bg: #2B0E0E;
    --amc-error-text: #F47C7C;
    --amc-error-border: #C0392B;
    --amc-info-bg: #0D1F3C;
    --amc-info-text: #7AAED9;
    --amc-info-border: #1E3D6E;
    --amc-disabled-bg: #0D1F3C;
    --amc-disabled-text: #3A5478;
    --amc-disabled-border: #132748;

    /* ── Overlay & Backdrop ─────────────────────────────────── */
    --amc-overlay: rgba(0, 0, 0, 0.70);
    --amc-overlay-light: rgba(0, 0, 0, 0.30);

}