/* ================================================
   STS Design Tokens
   Shared CSS custom properties for both app and admin zones.
   Load this BEFORE zone-specific stylesheets.
   ================================================ */

:root {
    /* ── Medal colors ────────────────────────────────── */
    --sts-medal-gold:   #FFD700;
    --sts-medal-silver: #C0C0C0;
    --sts-medal-bronze: #CD7F32;

    /* ── Avatar sizes ────────────────────────────────── */
    --sts-avatar-xs: 24px;
    --sts-avatar-sm: 32px;
    --sts-avatar-md: 40px;
}

/* ══════════════════════════════════════════════════════
   LIGHT MODE TOKENS  (default / [data-bs-theme="light"])
   ══════════════════════════════════════════════════════ */
:root,
[data-bs-theme="light"] {
    /* Page & surface */
    --sts-bg-page:          #edf1f7;
    --sts-bg-app:           #edf1f7;
    --sts-bg-surface:       #ffffff;
    --sts-bg-elevated:      #ffffff;

    /* Text */
    --sts-text-primary:     #212529;
    --sts-text-secondary:   #495057;
    --sts-text-muted:       #6c757d;

    /* Borders */
    --sts-border:           #dee2e6;
    --sts-border-subtle:    #e9ecef;

    /* Navbar */
    --sts-navbar-bg:        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --sts-navbar-text:      #ffffff;
    --sts-navbar-border:    transparent;

    /* Cards */
    --sts-card-border:      transparent;
    --sts-card-shadow:      0 1px 4px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .06);
    --sts-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, .13);

    /* Table */
    --sts-table-header-bg:  #f8f9fa;
    --sts-table-hover-bg:   rgba(102, 126, 234, 0.05);

    /* Form controls */
    --sts-input-bg:         #ffffff;
    --sts-input-border:     #ced4da;
    --sts-input-focus-bg:   #ffffff;
    --sts-focus-ring:       rgba(102, 126, 234, 0.30);

    /* Dropdown / menu */
    --sts-dropdown-bg:      #ffffff;
    --sts-dropdown-hover:   #f8f9fa;
    --sts-dropdown-border:  rgba(0, 0, 0, .15);

    /* Modal / offcanvas */
    --sts-modal-bg:         #ffffff;
    --sts-modal-header-bg:  #f8f9fa;
    --sts-offcanvas-bg:     #ffffff;

    /* Toast */
    --sts-toast-bg:         #ffffff;
    --sts-toast-border:     rgba(0, 0, 0, .1);

    /* Admin surface */
    --sts-admin-surface:    #f4f6fb;
    --sts-admin-sidebar-bg: #1a2035;

    /* Chat */
    --sts-chat-area-bg:     #f5f7fa;
    --sts-chat-in-bg:       #ffffff;
    --sts-chat-bubble-in:   #ffffff;
    --sts-chat-bubble-out:  linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    --sts-chat-bubble-out-color: #ffffff;
    --sts-chat-system-pill: #e9ecef;
    --sts-chat-system-color: #6c757d;
    --sts-chat-in-border:   #e9ecef;
    --sts-chat-in-color:    #212529;
    --sts-chat-sys-bg:      #e9ecef;
    --sts-chat-sys-color:   #6c757d;
    --sts-chat-hdr-bg:      #ffffff;
    --sts-chat-hdr-border:  #e9ecef;
    --sts-chat-input-bg:    #ffffff;
    --sts-chat-members-bg:  #ffffff;
    --sts-rxn-bg:           #f1f3f5;
    --sts-rxn-border:       #dee2e6;
    --sts-rxn-color:        #212529;
    --sts-rxn-mine-bg:      #dbeafe;
    --sts-rxn-mine-border:  #93c5fd;
    --sts-rxn-picker-bg:    #ffffff;

    /* Empty states */
    --sts-empty-opacity:    0.35;
    --sts-empty-text:       #6c757d;

    /* Skeleton shimmer */
    --sts-skel-base:        #e9ecef;
    --sts-skel-hi:          #dee2e6;

    /* Footer */
    --sts-footer-bg:        #f8f9fa;
    --sts-footer-border:    #dee2e6;
    --sts-footer-color:     #6c757d;

    /* Code */
    --sts-code-bg:          #f8f9fa;
    --sts-code-color:       #d63384;

    /* Chart helpers (used by JS) */
    --sts-chart-text:       #495057;
    --sts-chart-grid:       rgba(0, 0, 0, .1);
    --sts-chart-tooltip-bg: rgba(255, 255, 255, .95);
    --sts-chart-tooltip-color: #212529;
}

/* ══════════════════════════════════════════════════════
   DARK MODE TOKENS  ([data-bs-theme="dark"])
   ══════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
    /* Page & surface */
    --sts-bg-page:          #0a0d14;
    --sts-bg-app:           #0a0d14;
    --sts-bg-surface:       #161b25;
    --sts-bg-elevated:      #1e2533;

    /* Text */
    --sts-text-primary:     #e9ecef;
    --sts-text-secondary:   #adb5bd;
    --sts-text-muted:       #6c757d;

    /* Borders */
    --sts-border:           #2d3748;
    --sts-border-subtle:    #1e2533;

    /* Navbar */
    --sts-navbar-bg:        #111827;
    --sts-navbar-text:      #e2e8f0;
    --sts-navbar-border:    1px solid #1f2d3d;

    /* Cards */
    --sts-card-border:      1px solid rgba(255, 255, 255, .07);
    --sts-card-shadow:      0 2px 8px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .05);
    --sts-card-shadow-hover: 0 6px 20px rgba(0, 0, 0, .55);

    /* Table */
    --sts-table-header-bg:  #1e2533;
    --sts-table-hover-bg:   rgba(255, 255, 255, .04);

    /* Form controls */
    --sts-input-bg:         #1e2533;
    --sts-input-border:     #3d4f65;
    --sts-input-focus-bg:   #24304a;
    --sts-focus-ring:       rgba(99, 179, 237, 0.35);

    /* Dropdown / menu */
    --sts-dropdown-bg:      #1e2533;
    --sts-dropdown-hover:   #24304a;
    --sts-dropdown-border:  rgba(255, 255, 255, .12);

    /* Modal / offcanvas */
    --sts-modal-bg:         #1e2533;
    --sts-modal-header-bg:  #161b25;
    --sts-offcanvas-bg:     #161b25;

    /* Toast */
    --sts-toast-bg:         #1e2533;
    --sts-toast-border:     rgba(255, 255, 255, .08);

    /* Admin surface */
    --sts-admin-surface:    #0e1117;
    --sts-admin-sidebar-bg: #0d1117;

    /* Chat */
    --sts-chat-area-bg:     #0a0d14;
    --sts-chat-in-bg:       #1e2533;
    --sts-chat-bubble-in:   #1e2533;
    --sts-chat-bubble-out:  linear-gradient(135deg, #1a3a6b 0%, #15305a 100%);
    --sts-chat-bubble-out-color: #e2e8f0;
    --sts-chat-system-pill: #1e2533;
    --sts-chat-system-color: #8899aa;
    --sts-chat-in-border:   #2d3748;
    --sts-chat-in-color:    #dee2e6;
    --sts-chat-sys-bg:      #1e2533;
    --sts-chat-sys-color:   #8899aa;
    --sts-chat-hdr-bg:      #161b25;
    --sts-chat-hdr-border:  #1e2533;
    --sts-chat-input-bg:    #161b25;
    --sts-chat-members-bg:  #161b25;
    --sts-rxn-bg:           #1e2533;
    --sts-rxn-border:       #2d3748;
    --sts-rxn-color:        #dee2e6;
    --sts-rxn-mine-bg:      #1d3557;
    --sts-rxn-mine-border:  #2a5298;
    --sts-rxn-picker-bg:    #1e2533;

    /* Empty states */
    --sts-empty-opacity:    0.2;
    --sts-empty-text:       #6c757d;

    /* Skeleton shimmer */
    --sts-skel-base:        #1e2533;
    --sts-skel-hi:          #24304a;

    /* Footer */
    --sts-footer-bg:        #0d1117;
    --sts-footer-border:    #1e2533;
    --sts-footer-color:     #6c757d;

    /* Code */
    --sts-code-bg:          #2b3035;
    --sts-code-color:       #f0abfc;

    /* Chart helpers (used by JS) */
    --sts-chart-text:       #adb5bd;
    --sts-chart-grid:       rgba(255, 255, 255, .1);
    --sts-chart-tooltip-bg: rgba(30, 34, 39, .97);
    --sts-chart-tooltip-color: #e9ecef;
}


/* ══════════════════════════════════════════════════════
   ELEVATION / SHADOW / RADIUS / GRADIENT / GLASS TOKENS
   Phase 2 additions — both modes defined below.
   ══════════════════════════════════════════════════════ */

/* Light-mode elevation tokens (inside :root, [data-bs-theme="light"]) */
:root,
[data-bs-theme="light"] {
    /* Semantic surface aliases */
    --sts-surface-base:        var(--sts-bg-page);          /* #edf1f7 */
    --sts-surface-elevated:    var(--sts-bg-elevated);      /* #ffffff */
    --sts-surface-floating:    #ffffff;                     /* modals, popovers */

    /* Layered shadow scale */
    --sts-shadow-xs:   0 1px 2px rgba(0, 0, 0, .05);
    --sts-shadow-sm:   0 1px 4px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .06);
    --sts-shadow-md:   0 4px 16px rgba(0, 0, 0, .12);
    --sts-shadow-lg:   0 8px 32px rgba(0, 0, 0, .18);

    /* Softer border */
    --sts-border-soft: rgba(0, 0, 0, .06);

    /* Border-radius scale */
    --sts-radius-soft: 0.5rem;
    --sts-radius-card: 1rem;

    /* Gradient tokens */
    --sts-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --sts-gradient-accent:  linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --sts-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --sts-gradient-info:    linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --sts-gradient-warning: linear-gradient(135deg, #f6d365 0%, #fda085 100%);

    /* Glass / frosted effect */
    --sts-glass-bg:     rgba(255, 255, 255, .70);
    --sts-glass-border: rgba(255, 255, 255, .50);
}

/* Dark-mode elevation tokens */
[data-bs-theme="dark"] {
    /* Semantic surface aliases */
    --sts-surface-base:        var(--sts-bg-page);         /* #0a0d14 */
    --sts-surface-elevated:    var(--sts-bg-elevated);     /* #1e2533 */
    --sts-surface-floating:    #1e2533;                    /* dark modals */

    /* Layered shadow scale (deeper for dark) */
    --sts-shadow-xs:   0 1px 2px rgba(0, 0, 0, .25);
    --sts-shadow-sm:   0 2px 6px rgba(0, 0, 0, .40), 0 0 0 1px rgba(255, 255, 255, .04);
    --sts-shadow-md:   0 4px 18px rgba(0, 0, 0, .55);
    --sts-shadow-lg:   0 8px 40px rgba(0, 0, 0, .70);

    /* Softer border */
    --sts-border-soft: rgba(255, 255, 255, .06);

    /* Border-radius scale (same for both modes) */
    --sts-radius-soft: 0.5rem;
    --sts-radius-card: 1rem;

    /* Gradient tokens (desaturated for dark mode) */
    --sts-gradient-primary: linear-gradient(135deg, #2d3456 0%, #1e2438 100%);
    --sts-gradient-accent:  linear-gradient(135deg, #4a1a2c 0%, #3a1040 100%);
    --sts-gradient-success: linear-gradient(135deg, #0d3d31 0%, #12523f 100%);
    --sts-gradient-info:    linear-gradient(135deg, #0a2340 0%, #0d2e50 100%);
    --sts-gradient-warning: linear-gradient(135deg, #4a2e00 0%, #5c3a00 100%);

    /* Glass / frosted effect */
    --sts-glass-bg:     rgba(30, 37, 51, .75);
    --sts-glass-border: rgba(255, 255, 255, .08);
}

/* ── Medal utility classes ─────────────────────────── */
.medal-gold   { color: var(--sts-medal-gold);   }
.medal-silver { color: var(--sts-medal-silver); }
.medal-bronze { color: var(--sts-medal-bronze); }

/* ── Avatar utility classes ────────────────────────── */
.avatar-xs {
    width:  var(--sts-avatar-xs);
    height: var(--sts-avatar-xs);
    object-fit: cover;
}
.avatar-sm {
    width:  var(--sts-avatar-sm);
    height: var(--sts-avatar-sm);
    object-fit: cover;
}
.avatar-md {
    width:  var(--sts-avatar-md);
    height: var(--sts-avatar-md);
    object-fit: cover;
}

/* 28-px initial-letter avatar used in tables (replaces former inline style) */
.sts-avatar-sm {
    width:     28px;
    height:    28px;
    font-size: 0.6875rem; /* 11px — no inline style needed */
    flex-shrink: 0;
}
/* 28-px circular image avatar */
.sts-avatar-sm-img {
    width:     28px;
    height:    28px;
    object-fit: cover;
    flex-shrink: 0;
}

/* ── Progress bar size utilities ───────────────────── */
.sts-progress-lg {
    height: 1.875rem; /* ~30px — large readable progress bar */
}

/* ── Image thumbnail utility ───────────────────────── */
.sts-img-thumb {
    height: 120px;
    object-fit: cover;
    width: 100%;
}

/* ── Pre-formatted text utility ────────────────────── */
.sts-pre-line {
    white-space: pre-line;
}

/* ── Table column width utilities ──────────────────────────────────────────── */
.sts-col-20 { width: 20%; }
.sts-col-40 { width: 40%; }

/* ── Image preview utilities (used in JS-generated markup) ──────────────────── */
.sts-img-preview  { height: 100px; object-fit: cover; width: 100%; }
.sts-img-slot     { height: 110px; }
.sts-img-cover    { object-fit: cover; }
.sts-filename     { font-size: 0.7rem; }