/* Canonical design tokens for the application and authentication pages. */
:root {
    /* Color Palette */
    --bg-page: #f3f6fb;
    --bg-card: #fff;
    --bg-sidebar: #0f172a;
    --bg-sidebar-hover: #1e293b;
    --bg-sidebar-active: #2563eb;

    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #eff6ff;
    --primary-border: #bfdbfe;
    --primary-glow: rgba(37, 99, 235, 0.16);

    --success: #10b981;
    --success-hover: #059669;
    --success-light: #ecfdf5;
    --success-border: #a7f3d0;
    --success-glow: rgba(16, 185, 129, 0.18);

    --warning: #f59e0b;
    --warning-light: #fffbeb;
    --warning-border: #fde68a;

    --danger: #ef4444;
    --danger-hover: #dc2626;
    --danger-light: #fef2f2;
    --danger-border: #fecaca;

    --text-primary: #15243a;
    --text-secondary: #52637a;
    --text-muted: #64748b;
    --text-inverse: #ffffff;

    --border-color: #dce5ef;
    --border-subtle: #f1f5f9;

    /* Shadows */
    --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);

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

    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    /* Shared layout, controls and compatibility aliases. */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --control-height: 42px;
    --control-radius: 10px;
    --panel-radius: 16px;
    --panel-padding: clamp(16px, 2vw, 24px);
    --layout-gap: 24px;
    --surface-soft: #f7f9fc;
    --section-tint: #f1f6ff;
    --section-edge: var(--border-color);
    --section-shadow: 0 3px 14px #203c6409;
    --shadow-card: var(--section-shadow);
    --ui-accent: var(--primary);
    --ui-border: var(--border-color);
    --ui-shadow: var(--section-shadow);
    --ui-ring: #2563eb66;
    --ui-ease: cubic-bezier(.2,.7,.2,1);
}
/* Native button cards and form controls inherit the application typeface. */
button, input, select, textarea { font-family: var(--font-sans); }
button { color: inherit; }