/*
 * ts-variables.css
 * Design Tokens for LMS Test System
 * Corporate / Minimal Edition
 * Updated: 2026-05-07
 */

:root {

    /* ========================================
       GRAYSCALE (Base Scale)
       ======================================== */

    --color-gray-50:   #FAFAFA;
    --color-gray-100:  #F5F5F5;
    --color-gray-150:  #EFEFEF;
    --color-gray-200:  #E5E5E5;
    --color-gray-300:  #D4D4D4;
    --color-gray-400:  #A3A3A3;
    --color-gray-500:  #737373;
    --color-gray-600:  #525252;
    --color-gray-700:  #404040;
    --color-gray-800:  #262626;
    --color-gray-900:  #171717;

    /* ========================================
       PRIMARY (More Corporate Blue)
       ======================================== */

    --color-primary:        #2563EB;
    --color-primary-dark:   #1E4FCC;
    --color-primary-light:  #EAF1FD;
    --color-primary-text:   #1E3A8A;

    /* ========================================
       STATUS COLORS
       ======================================== */

    /* Success */
    --color-success:        #059669;
    --color-success-dark:   #047857;
    --color-success-light:  #E6F7F2;
    --color-success-text:   #065F46;

    /* Danger */
    --color-danger:         #DC2626;
    --color-danger-dark:    #B91C1C;
    --color-danger-light:   #FDECEA;
    --color-danger-text:    #7F1D1D;

    /* Warning */
    --color-warning:        #D97706;
    --color-warning-dark:   #B45309;
    --color-warning-light:  #FEF3C7;
    --color-warning-text:   #78350F;

    /* ========================================
       GAMIFICATION (Slightly Muted)
       ======================================== */

    --color-xp:             #7C3AED;
    --color-xp-dark:        #6D28D9;
    --color-xp-light:       #EDE9FE;

    --color-gold:           #CA8A04;
    --color-gold-light:     #FEF3C7;

    /* ========================================
       TEXT
       ======================================== */

    --color-text-primary:   var(--color-gray-800);
    --color-text-secondary: var(--color-gray-600);
    --color-text-muted:     var(--color-gray-400);
    --color-text-inverse:   #FFFFFF;

    /* ========================================
       BACKGROUNDS
       ======================================== */

    --color-bg-page:        #F7F8FA;
    --color-bg-card:        #FFFFFF;
    --color-bg-hover:       #F3F6FA;
    --color-bg-subtle:      #F8FAFC;

    /* Disabled */
    --color-disabled-bg:    #F3F4F6;
    --color-disabled-text:  #9CA3AF;

    /* ========================================
       BORDERS
       ======================================== */

    --color-border:         #E3E7EE;
    --color-border-strong:  #CBD5E1;
    --color-border-focus:   var(--color-primary);

    /* ========================================
       NAVBAR / FOOTER
       ======================================== */

    --color-navbar-bg:      #FFFFFF;
    --color-navbar-border:  var(--color-gray-200);

    --color-footer-bg:      var(--color-gray-900);
    --color-footer-text:    var(--color-gray-400);

    /* ========================================
       TYPOGRAPHY
       ======================================== */

    --font-family-base:
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        Oxygen,
        Ubuntu,
        sans-serif;

    /* Font sizes */
    --font-size-h1:     1.75rem;   /* 28px */
    --font-size-h2:     1.375rem;  /* 22px */
    --font-size-h3:     1.125rem;  /* 18px */
    --font-size-base:   0.875rem;  /* 14px */
    --font-size-sm:     0.75rem;   /* 12px */

    /* Font weights (slightly more refined hierarchy) */
    --font-weight-regular:   400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;

    /* Letter spacing */
    --letter-spacing-tight:   -0.01em;
    --letter-spacing-normal:   0;
    --letter-spacing-wide:     0.02em;

    /* ========================================
       SPACING
       ======================================== */

    --spacing-xs:   4px;
    --spacing-sm:   8px;
    --spacing-md:   16px;
    --spacing-lg:   24px;
    --spacing-xl:   32px;
    --spacing-2xl:  48px;

    /* Button padding */
    --btn-padding-sm:   6px 12px;
    --btn-padding-md:   10px 20px;
    --btn-padding-lg:   14px 28px;

    /* Input padding */
    --input-padding:    10px 14px;

    /* Card padding */
    --card-padding:     20px;

    /* Section padding */
    --section-padding:  32px 0;

    /* ========================================
       BORDER RADIUS (More Structured)
       ======================================== */

    --radius-badge:     6px;
    --radius-btn:       6px;
    --radius-input:     6px;
    --radius-alert:     8px;
    --radius-card:      10px;
    --radius-dropdown:  10px;
    --radius-modal:     14px;
    --radius-pill:      999px;

    /* ========================================
       BOX SHADOW (Subtle & Controlled)
       ======================================== */

    --shadow-card:        0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
    --shadow-card-hover:  0 4px 12px rgba(15, 23, 42, 0.06), 0 16px 32px rgba(15, 23, 42, 0.06);
    --shadow-navbar:      0 1px 0 var(--color-border);
    --shadow-dropdown:    0 6px 20px rgba(15, 23, 42, 0.10);
    --shadow-modal:       0 20px 60px rgba(15, 23, 42, 0.22);

    /* Focus ring (UX-critical for LMS) */
    --focus-ring:         0 0 0 3px rgba(37, 99, 235, 0.15);

    /* ========================================
       TRANSITIONS
       ======================================== */

    --transition-fast:   120ms ease;
    --transition-base:   180ms ease;
    --transition-slow:   250ms ease;

}