/* ============================================================
   Dek design tokens - source of truth: Design_idea/.../DESIGN.md
   ("Lumina Precision"). Every color, space, radius, shadow and
   font in the app comes from these custom properties.
   ============================================================ */

:root {
    /* ---- Color: brand ---- */
    --c-primary: #493ee5;            /* Electric Indigo (deep) */
    --c-action: #635bff;             /* Electric Indigo (action) */
    --c-action-hover: #5249e8;
    --c-ink: #0a2540;                /* Deep Ink - headings, nav */
    --c-cyan: #00d4ff;               /* success / "pro" accent */

    /* ---- Color: surfaces ---- */
    --c-bg: #f9f9fb;
    --c-surface: #ffffff;
    --c-surface-low: #f3f3f5;
    --c-surface-mid: #eeeef0;
    --c-surface-high: #e8e8ea;
    --c-apple-gray: #f5f5f7;

    /* ---- Color: text ---- */
    --c-text: #1a1c1d;
    --c-text-soft: #464555;
    --c-text-faint: #6b6979;
    --c-text-invert: #f0f0f2;

    /* ---- Color: lines ---- */
    --c-border: rgba(0, 0, 0, 0.05);
    --c-border-strong: #c7c4d8;

    /* ---- Color: status ---- */
    --c-success: #0a8754;
    --c-success-tint: #e0f5ec;
    --c-warning: #b45309;
    --c-warning-tint: #fef3c7;
    --c-error: #ba1a1a;
    --c-error-tint: #ffdad6;
    --c-info: #007f9a;
    --c-info-tint: #d8f4fb;
    --c-primary-tint: #e2dfff;

    /* ---- Gradients (the "modern" layer) ---- */
    --grad-primary: linear-gradient(135deg, #635bff 0%, #7c5cff 55%, #a855f7 100%);
    --grad-primary-soft: linear-gradient(135deg, rgba(99, 91, 255, 0.10), rgba(168, 85, 247, 0.10));
    --grad-hero: linear-gradient(160deg, #eef1ff 0%, #f9f9fb 45%, #f3e8ff 100%);
    --grad-ink: linear-gradient(135deg, #0a2540 0%, #1e2a5a 100%);
    --grad-success: linear-gradient(135deg, #0a8754, #00c389);

    /* ---- Typography ---- */
    --font-heading: 'Hanken Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --fs-display: clamp(2.5rem, 5vw, 4rem);      /* 64px cap */
    --fs-h1: clamp(1.75rem, 3.5vw, 2.5rem);      /* 40px cap */
    --fs-h2: 1.5rem;                             /* 24px */
    --fs-h3: 1.125rem;
    --fs-body-lg: 1.125rem;
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-label: 0.8125rem;                       /* 13px, mono labels */

    /* ---- Spacing (8px scale) ---- */
    --sp-1: 0.25rem;   /*  4 */
    --sp-2: 0.5rem;    /*  8 */
    --sp-3: 0.75rem;   /* 12 */
    --sp-4: 1rem;      /* 16 */
    --sp-5: 1.5rem;    /* 24 */
    --sp-6: 2rem;      /* 32 */
    --sp-7: 3rem;      /* 48 */
    --sp-8: 4rem;      /* 64 */
    --sp-9: 6rem;      /* 96 */
    --sp-10: 7.5rem;   /* 120 */

    /* ---- Radii ---- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 9999px;

    /* ---- Elevation ("Stripe shadows") ---- */
    --shadow-card: 0 2px 5px rgba(0, 0, 0, 0.03), 0 10px 20px rgba(0, 0, 0, 0.05);
    --shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.05), 0 16px 32px rgba(0, 0, 0, 0.08);
    --shadow-modal: 0 8px 20px rgba(10, 37, 64, 0.08), 0 30px 60px rgba(10, 37, 64, 0.14);
    --shadow-btn: 0 4px 14px rgba(99, 91, 255, 0.35);

    /* ---- Glass (Level-2 overlays) ---- */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-blur: 20px;

    /* ---- Motion ---- */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 150ms;
    --t-med: 250ms;
    --t-slow: 400ms;

    /* ---- Layout ---- */
    --container-max: 1200px;
    --gutter: 24px;

    /* ---- Z scale ---- */
    --z-dropdown: 30;
    --z-sticky: 40;
    --z-overlay: 50;
    --z-modal: 60;
    --z-toast: 70;

    /* ---- Focus ring ---- */
    --focus-ring: 0 0 0 3px rgba(99, 91, 255, 0.35);

    /* ---- Staff calendar palette (8 colors, WCAG-safe tints) ---- */
    --staff-1: #635bff;
    --staff-2: #0ea5e9;
    --staff-3: #10b981;
    --staff-4: #f59e0b;
    --staff-5: #ef4444;
    --staff-6: #ec4899;
    --staff-7: #8b5cf6;
    --staff-8: #14b8a6;
}