/**
 * SCTH Design System — Design Tokens
 * Smart City Thailand Command & Data Platform
 *
 * Philosophy: "Bauhaus meets civic tech"
 * Clarity through geometry. Information through contrast.
 * Every element earns its pixel.
 *
 * Inspired by: Dieter Rams (less but better), Josef Muller-Brockmann (grid),
 * Edward Tufte (data-ink ratio), Massimo Vignelli (discipline)
 */

/* ═══════════════════════════════════════════
   1. COLOR TOKENS
   ═══════════════════════════════════════════ */

:root {
    /* ─── Foundation ─── */
    --color-black:         #0A0A0A;
    --color-dark:          #111111;
    --color-surface-1:     #1A1A1A;
    --color-surface-2:     #222222;
    --color-surface-3:     #2A2A2A;

    /* ─── Borders ─── */
    --color-border:        #333333;
    --color-border-strong: #444444;
    --color-border-subtle: #1F1F1F;

    /* ─── Primary Triad (Bauhaus) ─── */
    --color-red:           #D62828;
    --color-blue:          #2176FF;
    --color-yellow:        #F0A500;

    /* ─── Semantic ─── */
    --color-success:       #06D6A0;
    --color-warning:       #F0A500;
    --color-danger:        #D62828;
    --color-info:          #2176FF;

    /* ─── Extended Palette ─── */
    --color-orange:        #E76F51;
    --color-cyan:          #00B4D8;
    --color-purple:        #7B68EE;

    /* ─── Text Hierarchy ─── */
    --color-text-primary:   #F5F5F5;
    --color-text-secondary: #999999;
    --color-text-tertiary:  #666666;
    --color-text-muted:     #444444;

    /* ─── Surfaces with Opacity ─── */
    --color-glass:          rgba(255, 255, 255, 0.05);
    --color-glass-border:   rgba(255, 255, 255, 0.10);
    --color-glass-hover:    rgba(255, 255, 255, 0.08);

    /* ─── Status Colors ─── */
    --color-status-received:    #F0A500;
    --color-status-assigned:    #2176FF;
    --color-status-in-progress: #00B4D8;
    --color-status-completed:   #06D6A0;

    /* ─── Urgency Colors ─── */
    --color-urgency-high:   #D62828;
    --color-urgency-medium: #F0A500;
    --color-urgency-low:    #06D6A0;

    /* ─── HSL Scales (Red Dot Harmony) ─── */
    --h-primary: 217; /* Blue base */
    --s-primary: 100%;
    --l-primary: 56%;

    --color-brand:     hsl(var(--h-primary), var(--s-primary), var(--l-primary));
    --color-brand-low: hsl(var(--h-primary), var(--s-primary), 20%);
    --color-brand-glow: hsla(var(--h-primary), var(--s-primary), var(--l-primary), 0.15);

    /* ─── Advanced Glassmorphism ─── */
    --glass-blur:     20px;
    --glass-saturate: 180%;
    --glass-bg:       rgba(10, 10, 10, 0.7);
    --glass-border:   rgba(255, 255, 255, 0.08);
    --glass-shine:    linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%);


/* ═══════════════════════════════════════════
   2. TYPOGRAPHY TOKENS
   ═══════════════════════════════════════════ */

    /* ─── Font Families ─── */
    --font-display:   'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:      'Space Mono', 'SF Mono', 'Fira Code', monospace;
    --font-body:      'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ─── Font Sizes (modular scale 1.2) ─── */
    --text-2xs:   7px;
    --text-xs:    8px;
    --text-sm:    10px;
    --text-base:  12px;
    --text-md:    14px;
    --text-lg:    16px;
    --text-xl:    20px;
    --text-2xl:   24px;
    --text-3xl:   32px;
    --text-4xl:   40px;
    --text-hero:  56px;

    /* ─── Font Weights ─── */
    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ─── Line Heights ─── */
    --leading-none:    1;
    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

    /* ─── Letter Spacing ─── */
    --tracking-tight:  -0.01em;
    --tracking-normal:  0;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.1em;
    --tracking-widest:  0.18em;
    --tracking-ultra:   0.22em;


/* ═══════════════════════════════════════════
   3. SPACING TOKENS (4px grid)
   ═══════════════════════════════════════════ */

    --space-0:   0;
    --space-1:   2px;
    --space-2:   4px;
    --space-3:   6px;
    --space-4:   8px;
    --space-5:   10px;
    --space-6:   12px;
    --space-8:   16px;
    --space-10:  20px;
    --space-12:  24px;
    --space-16:  32px;
    --space-20:  40px;
    --space-24:  48px;
    --space-32:  64px;


/* ═══════════════════════════════════════════
   4. LAYOUT TOKENS
   ═══════════════════════════════════════════ */

    /* ─── Dashboard Grid ─── */
    --layout-top-bar:     48px;
    --layout-left-panel:  220px;
    --layout-bottom-bar:  200px;

    /* ─── Border Widths ─── */
    --border-thin:   1px;
    --border-medium: 2px;
    --border-thick:  3px;

    /* ─── Border Radius ─── */
    --radius-none:  0;
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-2xl:   20px;
    --radius-full:  9999px;

    /* ─── Shadows ─── */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl:    0 12px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow:  0 0 20px rgba(33, 118, 255, 0.15);


/* ═══════════════════════════════════════════
   5. MOTION TOKENS
   ═══════════════════════════════════════════ */

    --duration-fast:    100ms;
    --duration-normal:  200ms;
    --duration-slow:    400ms;
    --duration-slower:  600ms;

    --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);


/* ═══════════════════════════════════════════
   6. Z-INDEX SCALE
   ═══════════════════════════════════════════ */

    --z-base:      0;
    --z-above:     10;
    --z-sticky:    50;
    --z-fixed:     100;
    --z-overlay:   200;
    --z-modal:     300;
    --z-toast:     400;
    --z-tooltip:   500;


/* ═══════════════════════════════════════════
   7. BREAKPOINTS (reference only — use @media)
   ═══════════════════════════════════════════ */

    --bp-mobile:  375px;
    --bp-tablet:  768px;
    --bp-desktop: 1280px;
    --bp-display: 1920px;   /* command center 50" display */
    --bp-ultra:   3840px;

    /* ─── Safe Area (mobile PWA) ─── */
    --safe-area-top:    env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
}

/* ═══════════════════════════════════════════
   PREMIUM UTILITIES
   ═══════════════════════════════════════════ */

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}

.glass-panel::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--glass-shine);
    pointer-events: none;
}

.animate-in {
    animation: slide-up 0.8s var(--ease-out) forwards;
    opacity: 0;
}

@keyframes slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.pulse-glow {
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px var(--color-brand-glow); }
    50% { box-shadow: 0 0 25px var(--color-brand-glow); }
}


/* ═══════════════════════════════════════════
   8. SEMANTIC COMPONENT TOKENS
   ═══════════════════════════════════════════ */

:root {
    /* ─── Cards ─── */
    --card-bg:          var(--color-surface-1);
    --card-border:      var(--color-border);
    --card-radius:      var(--radius-none);  /* Bauhaus: no rounding on dashboard */
    --card-padding:     var(--space-6);

    /* ─── Inputs ─── */
    --input-bg:         var(--color-surface-1);
    --input-border:     var(--color-border);
    --input-focus:      var(--color-blue);
    --input-text:       var(--color-text-primary);
    --input-placeholder: var(--color-text-tertiary);
    --input-radius:     var(--radius-none);
    --input-height:     32px;

    /* ─── Buttons ─── */
    --btn-primary-bg:   var(--color-blue);
    --btn-primary-text: var(--color-black);
    --btn-danger-bg:    var(--color-red);
    --btn-danger-text:  var(--color-text-primary);

    /* ─── Labels ─── */
    --label-size:       var(--text-xs);
    --label-weight:     var(--weight-bold);
    --label-tracking:   var(--tracking-widest);
    --label-color:      var(--color-text-tertiary);
    --label-transform:  uppercase;

    /* ─── Data Display ─── */
    --data-font:        var(--font-mono);
    --data-size:        var(--text-md);
    --data-weight:      var(--weight-bold);
    --data-color:       var(--color-text-primary);

    /* ─── Pills / Status Badges ─── */
    --pill-size:        var(--text-2xs);
    --pill-weight:      var(--weight-bold);
    --pill-tracking:    var(--tracking-wider);
    --pill-padding:     var(--space-1) var(--space-3);
}


/* ═══════════════════════════════════════════
   9. MOBILE VARIANT TOKENS
   Staff interface uses softer, touch-optimized values
   ═══════════════════════════════════════════ */

[data-variant="mobile"] {
    --card-radius:   var(--radius-2xl);
    --card-padding:  var(--space-10);
    --input-radius:  var(--radius-lg);
    --input-height:  48px;

    --font-display:  'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:     'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}