/* ==========================================================================
   EDAMA QMS Design Tokens
   Single source of truth for all CSS custom properties.
   Brand Colors: Deep Blue (#003B7A), Medium Blue (#0072BC),
                 Teal (#27A9B8), Light Teal (#5ABFCA), Gray (#8C8C8C)
   ========================================================================== */

:root {
    /* Brand palette (from EDAMA logo) */
    --brand-primary: #0072BC;
    --brand-secondary: #003B7A;
    --brand-deep: #003B7A;
    --brand-blue: #0072BC;
    --brand-teal: #27A9B8;
    --brand-teal-light: #5ABFCA;
    --brand-navy: #003B7A;

    /* Neutrals */
    --bg-1: #F5F8FA;
    --bg-2: #EAF6F8;
    --ink: #1A2035;
    --ink-soft: #475569;
    --neutral-50: #F8FAFB;
    --neutral-100: #F0F4F7;
    --neutral-200: #DDE8EF;
    --neutral-400: #8C8C8C;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-900: #003B7A;
    --text-muted: #8C8C8C;
    --card: rgba(255, 255, 255, 0.95);
    --line: rgba(0, 59, 122, 0.1);

    /* Semantic */
    --success: #059669;
    --success-bg: #ECFDF5;
    --success-border: #6dd4a0;
    --warning: #D97706;
    --warning-bg: #FEF9C3;
    --warning-border: #f0d060;
    --danger: #DC2626;
    --danger-bg: #FEF2F2;
    --danger-border: #e4938a;
    --info: #0072BC;
    --info-bg: #EEF6FF;
    --info-border: #80b3ff;

    /* Spacing scale (4px rhythm) */
    --sp-1: 0.25rem;    /* 4px */
    --sp-2: 0.5rem;     /* 8px */
    --sp-3: 0.75rem;    /* 12px */
    --sp-4: 1rem;       /* 16px */
    --sp-5: 1.25rem;    /* 20px */
    --sp-6: 1.5rem;     /* 24px */
    --sp-8: 2rem;       /* 32px */

    /* Typography — Fonts */
    --font-body: 'DM Sans', system-ui, sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    --font-mono: 'JetBrains Mono', 'Menlo', monospace;
    --font-ar: 'IBM Plex Sans Arabic', 'DM Sans', sans-serif;

    /* Typography — Scale (modular 1.25) */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;

    /* Typography — Weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Tabular numbers for data alignment */
    --font-tabular: 'tnum';

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius: 10px;
    --radius-full: 9999px;

    /* Surface and border */
    --surface: rgba(255, 255, 255, 0.95);
    --border: rgba(0, 59, 122, 0.12);

    /* Layout tokens */
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 60px;
    --header-height: 48px;
    --content-max-width: 1120px;

    /* Animation */
    --duration: 200ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Motion — named curves */
    --motion-spring: cubic-bezier(.22, .8, .22, 1);
    --motion-ease:   cubic-bezier(.4, 0, .2, 1);
    --motion-duration: 200ms;
    --motion-duration-slow: 480ms;

    /* Shadows — named for context */
    --shadow-drawer: -1px 0 0 rgba(0,59,122,0.04), -36px 0 100px -24px rgba(0,59,122,0.18);
    --shadow-modal:  0 20px 60px -20px rgba(0,59,122,0.25), 0 4px 12px rgba(0,59,122,0.08);
    --shadow-editor: 0 1px 3px rgba(0,59,122,0.04);
    --shadow-strip:  0 1px 2px rgba(0,59,122,0.06);

    /* Glassmorphism System */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-heavy: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-blur: 12px;
    --glass-shadow-sm: 0 1px 3px rgba(0,59,122,0.04), 0 1px 2px rgba(0,59,122,0.06);
    --glass-shadow-md: 0 4px 12px rgba(0,59,122,0.06), 0 2px 4px rgba(0,59,122,0.04);
    --glass-shadow-lg: 0 12px 32px rgba(0,59,122,0.08), 0 4px 8px rgba(0,59,122,0.04);

    /* Extended Spacing */
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;

    /* RGB variant for rgba() usage */
    --primary-rgb: 0, 114, 188;
}