/* ═══════════════════════════════════════════════════════════
   Drive — Design Tokens v3
   Clean, warm, premium sans-serif
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ─── Palette ─────────────────────────────────────────── */
    --color-surface:        #F5F3EF;
    --color-surface-raised: rgba(255, 255, 255, 0.72);
    --color-surface-solid:  #FFFFFF;
    --color-surface-dim:    #EDEBE6;
    --color-surface-hover:  #E4E2DC;
    --color-border:         rgba(0, 0, 0, 0.08);
    --color-border-subtle:  rgba(0, 0, 0, 0.04);
    --color-border-strong:  rgba(0, 0, 0, 0.12);

    --color-text-primary:   #0F0F0F;
    --color-text-secondary: #555550;
    --color-text-tertiary:  #8A8A82;
    --color-text-inverse:   #FAFAF7;

    --color-accent:         #4F46E5;
    --color-accent-hover:   #4338CA;
    --color-accent-light:   #818CF8;
    --color-accent-subtle:  rgba(79, 70, 229, 0.06);
    --color-accent-muted:   rgba(79, 70, 229, 0.12);

    --color-success:        #16A34A;
    --color-success-bg:     rgba(22, 163, 74, 0.08);
    --color-error:          #DC2626;
    --color-error-bg:       rgba(220, 38, 38, 0.06);
    --color-warning:        #EA580C;
    --color-warning-bg:     rgba(234, 88, 12, 0.06);

    /* ─── Gradient Palette ────────────────────────────────── */
    --grad-mesh:    radial-gradient(ellipse at 20% 50%, rgba(79, 70, 229, 0.045) 0%, transparent 50%),
                    radial-gradient(ellipse at 80% 20%, rgba(245, 158, 11, 0.035) 0%, transparent 50%),
                    radial-gradient(ellipse at 50% 80%, rgba(236, 72, 153, 0.025) 0%, transparent 50%);
    --grad-accent:  linear-gradient(135deg, #4F46E5, #7C3AED, #EC4899);
    --grad-card:    linear-gradient(135deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));

    /* ─── Typography ──────────────────────────────────────── */
    --font-primary:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:    0.75rem;
    --text-sm:    0.8125rem;
    --text-base:  0.9375rem;
    --text-md:    1.0625rem;
    --text-lg:    1.25rem;
    --text-xl:    1.5rem;
    --text-2xl:   2rem;
    --text-3xl:   2.75rem;
    --text-4xl:   3.5rem;

    --leading-tight:   1.1;
    --leading-snug:    1.25;
    --leading-normal:  1.55;

    --tracking-tight:  -0.03em;
    --tracking-normal:  0;
    --tracking-wide:    0.02em;
    --tracking-wider:   0.06em;

    /* ─── Spacing ─────────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ─── Radii ───────────────────────────────────────────── */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-2xl:  36px;
    --radius-full: 9999px;

    /* ─── Shadows (layered for realism) ───────────────────── */
    --shadow-sm:    0 1px 2px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md:    0 2px 4px rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg:    0 4px 8px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.06), 0 24px 48px rgba(0,0,0,0.04);
    --shadow-xl:    0 8px 16px rgba(0,0,0,0.03), 0 16px 48px rgba(0,0,0,0.08), 0 48px 96px rgba(0,0,0,0.06);
    --shadow-glass: 0 8px 32px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
    --shadow-glow:  0 0 60px rgba(79,70,229,0.15), 0 0 120px rgba(79,70,229,0.05);

    /* ─── Transitions ─────────────────────────────────────── */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast:   120ms;
    --duration-normal: 250ms;
    --duration-slow:   500ms;
    --duration-reveal: 800ms;

    /* ─── Z-index ─────────────────────────────────────────── */
    --z-base:     1;
    --z-above:    10;
    --z-modal:    100;
    --z-overlay:  200;
    --z-toast:    300;
}