/* =============================================
   Depctor Design Tokens (shared: auth + app)
   Single source of truth — :root scope
   ============================================= */
:root {
    /* Surfaces */
    --dep-bg: #09090B;
    --dep-surface: #0E0E11;
    --dep-surface-2: #141418;
    --dep-surface-3: #1A1A1F;

    /* Borders */
    --dep-border: rgba(255, 255, 255, 0.07);
    --dep-border-strong: rgba(255, 255, 255, 0.12);

    /* Text (dim bumped for WCAG AA on #09090B) */
    --dep-text: #E4E4E7;
    --dep-text-muted: #A1A1AA;
    --dep-text-dim: #8A8A96;

    /* Brand accent (default / org) */
    --dep-accent: #818CF8;
    --dep-accent-soft: rgba(129, 140, 248, 0.12);
    --dep-accent-glow: rgba(129, 140, 248, 0.35);

    /* Semantic — status only */
    --dep-success: #34D399;
    --dep-success-soft: rgba(52, 211, 153, 0.12);
    --dep-warning: #FBBF24;
    --dep-warning-soft: rgba(251, 191, 36, 0.12);
    --dep-danger: #F87171;
    --dep-danger-soft: rgba(248, 113, 113, 0.12);
    --dep-info: #22D3EE;
    --dep-info-soft: rgba(34, 211, 238, 0.12);

    /* Role accents (auth pages) */
    --auth-accent: var(--dep-accent);
    --auth-accent-soft: var(--dep-accent-soft);
    --auth-accent-glow: var(--dep-accent-glow);

    /* Layout */
    --sidebar-width: 260px;
    --sidebar-width-icon: 72px;

    /* Spacing — 4px grid */
    --dep-space-1: 0.25rem;  /* 4px */
    --dep-space-2: 0.5rem;   /* 8px */
    --dep-space-3: 0.75rem;  /* 12px */
    --dep-space-4: 1rem;     /* 16px */
    --dep-space-5: 1.25rem;  /* 20px */
    --dep-space-6: 1.5rem;   /* 24px */
    --dep-space-8: 2rem;     /* 32px */
    --dep-space-10: 2.5rem;  /* 40px */
    --dep-space-12: 3rem;    /* 48px */

    /* Radius */
    --dep-radius: 12px;
    --dep-radius-sm: 8px;
    --dep-radius-lg: 16px;

    /* Shadows */
    --dep-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    --dep-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);

    /* Motion */
    --dep-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dep-duration: 0.2s;
    --dep-duration-slow: 0.35s;

    /* Typography */
    --dep-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --dep-font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', monospace;

    --dep-text-display: 2rem;       /* 32px */
    --dep-text-display-lh: 2.5rem;  /* 40px */
    --dep-text-h1: 1.5rem;          /* 24px */
    --dep-text-h1-lh: 2rem;         /* 32px */
    --dep-text-body: 0.875rem;      /* 14px */
    --dep-text-body-lh: 1.25rem;    /* 20px */
    --dep-text-caption: 0.75rem;    /* 12px */
    --dep-text-caption-lh: 1rem;    /* 16px */
    --dep-tracking-tight: -0.02em;

    /* Focus ring */
    --dep-focus-ring: 0 0 0 2px var(--dep-bg), 0 0 0 4px var(--dep-accent);

    /* Legacy aliases (app compatibility) */
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --success-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --header-bg: var(--dep-bg);
    --header-border: var(--dep-border);
    --header-shadow: none;
}

/* Role-specific accent overrides */
.auth-page--org {
    --auth-accent: #818CF8;
    --auth-accent-soft: rgba(129, 140, 248, 0.12);
    --auth-accent-glow: rgba(129, 140, 248, 0.4);
}

.auth-page--unit {
    --auth-accent: #34D399;
    --auth-accent-soft: rgba(52, 211, 153, 0.12);
    --auth-accent-glow: rgba(52, 211, 153, 0.35);
}

.auth-page--admin {
    --auth-accent: #FBBF24;
    --auth-accent-soft: rgba(251, 191, 36, 0.12);
    --auth-accent-glow: rgba(251, 191, 36, 0.35);
}