/* tokens.css — design tokens + base reset, lifted from HTML-Templates/shared.css.
   All other stylesheets (auth-layout.css, portal.css, scoped page CSS) consume these. */

:root {
    /* Brand */
    --brand-primary: #2ED4A5;
    --brand-primary-strong: #14B88A;
    --brand-primary-soft: #E5FAF2;
    --brand-dark: #0B0F1E;
    --brand-dark-alt: #111827;
    --brand-accent: #A78BFA;
    --brand-accent-soft: #F1ECFE;

    /* Surfaces */
    --surface-primary: #FFFFFF;
    --surface-secondary: #F7F8FA;
    --surface-tertiary: #EEF1F5;
    --surface-sunken: #F1F3F6;

    /* Text */
    --text-primary: #0B0F1E;
    --text-secondary: #475569;
    --text-tertiary: #94A3B8;
    --text-on-dark: #E2E8F0;
    --text-on-dark-muted: #94A3B8;

    /* Borders */
    --border-default: #E2E8F0;
    --border-strong: #CBD5E1;
    --border-dark: #1F2937;

    /* Status */
    --status-success: #10B981;
    --status-success-soft: #D1FAE5;
    --status-warning: #F59E0B;
    --status-warning-soft: #FEF3C7;
    --status-danger: #EF4444;
    --status-danger-soft: #FEE2E2;
    --status-info: #3B82F6;
    --status-info-soft: #DBEAFE;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Shadows */
    --shadow-focus: 0 0 0 3px rgba(46, 212, 165, 0.25);
    --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.2);
    --shadow-card: 0 2px 8px rgba(11, 15, 30, 0.04);
    --shadow-elevated: 0 8px 24px rgba(11, 15, 30, 0.08);
    --shadow-drawer: -12px 0 32px rgba(11, 15, 30, 0.12);

    /* Layout dims */
    --top-nav-height: 56px;
    --sidebar-width: 240px;
    --sidebar-collapsed-width: 64px;
}

[data-theme="dark"] {
    --surface-primary: #111827;
    --surface-secondary: #1F2937;
    --surface-tertiary: #374151;
    --surface-sunken: #0B0F1E;
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-tertiary: #9CA3AF;
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.18);
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-drawer: -12px 0 32px rgba(0, 0, 0, 0.5);
    --brand-primary-soft: rgba(46, 212, 165, 0.12);
    --brand-accent-soft: rgba(167, 139, 250, 0.14);
    --status-success-soft: rgba(16, 185, 129, 0.18);
    --status-warning-soft: rgba(245, 158, 11, 0.18);
    --status-danger-soft: rgba(239, 68, 68, 0.18);
    --status-info-soft: rgba(59, 130, 246, 0.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    min-height: 100%;
    font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14.5px;
    color: var(--text-primary);
    background: var(--surface-secondary);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-primary-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }