/* ============================================================
   CSS VARIABLES — UserAuth light theme
   2px radius throughout.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Fonts */
    --font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:    'SF Mono', 'Fira Code', monospace;

    /* Typography scale — rem throughout (respects user font-size preference) */
    --text-xs:   0.6875rem;  /* 11px */
    --text-sm:   0.75rem;    /* 12px */
    --text-base: 0.875rem;   /* 14px — body text */
    --text-md:   0.875rem;   /* 14px — alias kept for compatibility */
    --text-lg:   1rem;       /* 16px */
    --text-xl:   1.125rem;   /* 18px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */

    /* Font weights */
    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;

    /* Backgrounds */
    --color-bg-page:     #f8faff;
    --color-bg-surface:  #ffffff;
    --color-bg-surface2: #e8f0fd;
    --color-bg-hover:    rgba(37,99,235,0.04);
    --color-bg-active:   rgba(37,99,235,0.08);
    --color-bg-subtle:   #f0f6ff;
    --color-bg-elevated: #fafcff;

    /* Text */
    --color-text-primary:   #03091a;
    --color-text-secondary: #1a325a;
    --color-text-muted:     #4d6585;
    --color-text-faint:     #8aa5c4;
    --color-text-disabled:  #b8cfe0;

    /* Borders */
    --color-border-default: #c5d6ed;
    --color-border-light:   #d9e6f5;
    --color-border-subtle:  #edf3fc;

    /* Accent — strong blue */
    --color-accent:      #2563eb;
    --color-accent-text: #ffffff;
    --color-accent-glow: rgba(37,99,235,0.10);

    /* Status */
    --color-success:        #059669;
    --color-success-bg:     rgba(5,150,105,0.08);
    --color-success-text:   #065f46;
    --color-success-border: #059669;

    --color-danger:         #e11d48;
    --color-danger-bg:      rgba(225,29,72,0.08);
    --color-danger-text:    #9f1239;
    --color-danger-border:  #e11d48;

    --color-warning:        #d97706;
    --color-warning-bg:     rgba(217,119,6,0.08);
    --color-warning-text:   #92400e;
    --color-warning-border: #d97706;

    --color-info-bg:     rgba(29,78,216,0.06);
    --color-info-text:   #1d4ed8;
    --color-info-border: #1d4ed8;

    /* Legacy status aliases */
    --color-status-success-bg:     var(--color-success-bg);
    --color-status-success-text:   var(--color-success-text);
    --color-status-success-border: var(--color-success-border);
    --color-status-danger-bg:      var(--color-danger-bg);
    --color-status-danger-text:    var(--color-danger-text);
    --color-status-danger-border:  var(--color-danger-border);
    --color-status-warning-bg:     var(--color-warning-bg);
    --color-status-warning-text:   var(--color-warning-text);
    --color-status-warning-border: var(--color-warning-border);
    --color-status-info-bg:        var(--color-info-bg);
    --color-status-info-text:      var(--color-info-text);
    --color-status-info-border:    var(--color-info-border);
    --color-status-neutral-bg:     rgba(0,0,0,0.04);
    --color-status-neutral-text:   var(--color-text-muted);
    --color-status-neutral-border: var(--color-border-default);
    --color-status-purple-bg:      rgba(29,78,216,0.08);
    --color-status-purple-text:    #1d4ed8;
    --color-status-purple-border:  rgba(29,78,216,0.3);

    /* Shadows */
    --shadow-subtle: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.10);
    --shadow-md:     0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg:     0 20px 50px rgba(0,0,0,0.20);

    /* Radius — 2 px minimal */
    --radius-sm: 2px;
    --radius-md: 2px;

    /* Chrome — nav and admin-nav always use a dark background for contrast */
    --color-bg-chrome:   oklch(5% 0.010 262);

    /* Nav tokens (menu redesign) */
    --nav-bg:        #0B1220;
    --nav-border:    #18223A;
    --nav-fg:        #FFFFFF;
    --nav-fg-muted:  #C9D2E3;
    --nav-fg-dim:    #9AA9C5;
    --nav-hover:     rgba(255,255,255,.07);
    --nav-active:    rgba(255,255,255,.10);
    --nav-rule:      rgba(255,255,255,.10);
    --accent-on-nav: #7FA7FF;
    --role-admin-bg: rgba(184,137,58,.14);
    --role-admin-fg: #E8C588;
    --role-admin-bd: rgba(232,197,136,.25);
    --shadow-pop:    0 24px 60px -20px rgba(11,18,32,.22), 0 6px 16px -8px rgba(11,18,32,.10);

    /* Layout */
    --sidebar-width:    220px;
    --header-height:      68px;
    --admin-bar-height:   38px;
    --admin-nav-height:   36px;
    --secondary-nav-height: 36px;

    /* Transitions */
    --transition-fast:    0.1s ease;
    --transition-default: 0.15s ease;
    --transition-base:    0.2s ease;

    /* Spacing (4px base) */
    --space-1:  2px;
    --space-2:  4px;
    --space-3:  8px;
    --space-4:  10px;
    --space-5:  12px;
    --space-6:  14px;
    --space-7:  16px;
    --space-8:  18px;
    --space-9:  20px;
    --space-10: 24px;
    --space-11: 28px;

    /* ── Table surface tokens (fixed light — tables are always light-surfaced) */
    --paper:              #FFFFFF;
    --paper-2:            #FAFBFD;
    --ink:                #0B1220;
    --ink-2:              #1F2937;
    --muted:              #6B7280;
    --muted-2:            #9AA3B2;
    --line:               #E6E8EE;
    --line-2:             #EFF1F5;
    --row-hover:          #F6F8FC;
    --row-selected:       #F0F4FE;
    --row-selected-hover: #E6ECFC;
    --accent-soft:        #E8EEFE;
    --accent-ink:         #173FB0;

    /* Role pill tones */
    --r-admin-bg:   #F4ECD8; --r-admin-fg:   #7A5618; --r-admin-bd:   #E8DAB7;
    --r-staff-bg:   #EDE8F9; --r-staff-fg:   #4C2E92; --r-staff-bd:   #DCD3F1;
    --r-user-bg:    #E8EEFE; --r-user-fg:    #173FB0; --r-user-bd:    #C7D6FB;
    --r-pending-bg: #FEF7E0; --r-pending-fg: #8B6914; --r-pending-bd: #F2E5B5;

    /* Status pill tones */
    --s-active-bg:   #E6F4ED;  --s-active-fg:   #0E5A39;  --s-active-bd:   #BFE2CE;  --s-active-dot:   #10A75B;
    --s-pending-bg:  #FEF7E0;  --s-pending-fg:  #8B6914;  --s-pending-bd:  #F2E5B5;  --s-pending-dot:  #D4A017;
    --s-inactive-bg: #F4F6FB;  --s-inactive-fg: #6B7280;  --s-inactive-bd: #E6E8EE;  --s-inactive-dot: #9AA3B2;
    --s-banned-bg:   #FEF3F2;  --s-banned-fg:   #B42318;  --s-banned-bd:   #FBD3CF;  --s-banned-dot:   #E5484D;
}

/* ── Light mode overrides ────────────────────────────────────── */
[data-theme="light"] {
    --color-bg-page:     #f8faff;
    --color-bg-surface:  #ffffff;
    --color-bg-surface2: #e8f0fd;
    --color-bg-hover:    rgba(37,99,235,0.04);
    --color-bg-active:   rgba(37,99,235,0.08);
    --color-bg-subtle:   #f0f6ff;
    --color-bg-elevated: #fafcff;

    --color-text-primary:   #03091a;
    --color-text-secondary: #1a325a;
    --color-text-muted:     #4d6585;
    --color-text-faint:     #8aa5c4;
    --color-text-disabled:  #b8cfe0;

    --color-border-default: #c5d6ed;
    --color-border-light:   #d9e6f5;
    --color-border-subtle:  #edf3fc;

    --color-accent:      #2563eb;
    --color-accent-text: #ffffff;
    --color-accent-glow: rgba(37,99,235,0.10);

    --shadow-subtle: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-sm:     0 1px 3px rgba(0,0,0,0.10);
    --shadow-md:     0 4px 16px rgba(0,0,0,0.12);
    --shadow-lg:     0 20px 50px rgba(0,0,0,0.20);
}