/* ==========================================================================
   VMING Semiconductor — Design Token System v2.0
   Synthesized from: VMING DS Specification + Velocity Kinetic framework
   Architecture: Primitive → Semantic → Component (three-layer)
   ========================================================================== */

/* ==========================================================================
   LAYER 0: PRIMITIVE TOKENS (raw design values)
   ========================================================================== */

:root {
  /* --- Color Palette: Tech Navy + Electric Cyan --- */

  /* Navy Scale (brand depth) */
  --color-navy-950: #060D19;   /* Abyss Deep — global background */
  --color-navy-900: #0A192F;   /* Tech Navy — brand primary, panels */
  --color-navy-800: #0F224A;   /* Deep navy — filter containers */
  --color-navy-700: #16253D;   /* Surface Card — modular containers */
  --color-navy-600: #1E355E;   /* Border emphasis */
  --color-navy-500: #2A4A7F;   /* Interactive border */
  --color-navy-400: #3A5F9A;   /* Muted interactive */

  /* Cyan Scale (electric accent) */
  --color-cyan-500: #00B8D4;   /* Cyan base */
  --color-cyan-400: #00D2C4;   /* Cyber Teal — secondary accent */
  --color-cyan-300: #00F0FF;   /* Electric Cyan — primary accent, focus */
  --color-cyan-200: #66F5FF;   /* Cyan hover highlight */
  --color-cyan-100: #B3FAFF;   /* Cyan subtle glow */
  --color-cyan-50:  #E6FDFF;   /* Cyan wash background */

  /* Neutral Scale (text + surfaces) */
  --color-neutral-0:   #FFFFFF;  /* Pure White — primary text */
  --color-neutral-100: #F2F5FA;  /* Light surface (light mode) */
  --color-neutral-200: #DCE2ED;  /* Light borders */
  --color-neutral-300: #A6ADC8;  /* Muted Slate — secondary text */
  --color-neutral-500: #6B7394;  /* Tertiary text */
  --color-neutral-700: #3A415B;  /* Subdued elements */

  /* Functional Colors */
  --color-green-500:  #00D68F;  /* Success */
  --color-green-900:  #003829;  /* Success bg */
  --color-amber-500:  #FFB020;  /* Warning */
  --color-amber-900:  #3D2800;  /* Warning bg */
  --color-red-500:    #FF5252;  /* Error */
  --color-red-900:     #3D0909;  /* Error bg */

  /* --- Typography Scale --- */
  --font-heading:   'Sora', 'Noto Sans SC', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:       'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', 'Noto Sans SC', 'SF Mono', 'Fira Code', monospace;

  /* Font Sizes (modular scale: 1.25 ratio) */
  --font-size-xs:    0.688rem;   /* 11px — captions, overlines */
  --font-size-sm:    0.75rem;    /* 12px — labels, metadata */
  --font-size-body:  0.875rem;   /* 14px — body */
  --font-size-md:    1rem;       /* 16px — body large */
  --font-size-lg:    1.125rem;   /* 18px — subtitle */
  --font-size-xl:    1.5rem;     /* 24px — h3 */
  --font-size-2xl:   2rem;       /* 32px — h2 */
  --font-size-3xl:   2.5rem;     /* 40px — h1 */
  --font-size-4xl:   3rem;       /* 48px — display */

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

  /* Line Heights */
  --line-height-tight:   1.15;   /* Headlines */
  --line-height-snug:    1.35;   /* Subheads */
  --line-height-normal:  1.5;    /* Body */
  --line-height-relaxed: 1.625;  /* Long-form text */

  /* Letter Spacing */
  --tracking-tighter: -0.02em;   /* Display */
  --tracking-tight:   -0.01em;   /* Headlines */
  --tracking-normal:   0;        /* Body */
  --tracking-wide:     0.02em;   /* Labels */
  --tracking-wider:    0.04em;   /* Mono labels */

  /* --- Spacing Scale (4px baseline × geometric progression) --- */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px — gutter */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px — desktop margin */
  --space-20: 5rem;      /* 80px — section gap */
  --space-24: 6rem;      /* 96px */

  /* Layout */
  --container-max:  1280px;
  --gutter:         var(--space-6);    /* 24px */
  --margin-mobile:  var(--space-4);    /* 16px */
  --margin-desktop: var(--space-16);   /* 64px */
  --grid-columns:   12;

  /* --- Border Radius --- */
  --radius-none:  0;
  --radius-sm:    0.25rem;   /* 4px — buttons, inputs */
  --radius-md:    0.375rem;  /* 6px — cards */
  --radius-lg:    0.5rem;    /* 8px — modals */
  --radius-xl:    0.75rem;   /* 12px — large containers */
  --radius-full:  9999px;    /* Pills, badges */

  /* --- Shadows (tonal, not heavy) --- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 10px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(0, 240, 255, 0.15); /* Cyan ambient glow */

  /* --- Transitions --- */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   LAYER 1: SEMANTIC TOKENS (purpose-aliased)
   Dark theme (default) + Light theme variant
   ========================================================================== */

/* --- Dark Theme (default) --- */
:root {
  /* Surfaces */
  --app-background:            var(--color-navy-950);
  --app-surface:               var(--color-navy-900);
  --app-surface-elevated:      var(--color-navy-700);
  --app-surface-overlay:       var(--color-navy-800);

  /* Text */
  --text-primary:              var(--color-neutral-0);
  --text-secondary:            var(--color-neutral-300);
  --text-tertiary:             var(--color-neutral-500);
  --text-inverse:              var(--color-navy-950);
  --text-accent:               var(--color-cyan-300);

  /* Interactive */
  --interactive-accent:        var(--color-cyan-300);
  --interactive-accent-hover:  var(--color-cyan-200);
  --interactive-secondary:     var(--color-cyan-400);
  --interactive-focus-ring:    var(--color-cyan-300);

  /* Borders */
  --border-default:            var(--color-navy-600);
  --border-emphasis:           var(--color-navy-500);
  --border-accent:             var(--color-cyan-300);
  --border-subtle:             var(--color-navy-500);

  /* Status Colors (semantic) */
  --status-success:            var(--color-green-500);
  --status-success-bg:         var(--color-green-900);
  --status-warning:            var(--color-amber-500);
  --status-warning-bg:         var(--color-amber-900);
  --status-error:              var(--color-red-500);
  --status-error-bg:           var(--color-red-900);
  --status-info:               var(--color-cyan-300);
  --status-info-bg:            #002B33;

  /* Links */
  --link-color:                var(--color-cyan-300);
  --link-hover:                var(--color-cyan-200);
}

/* --- Light Theme --- */
[data-theme="light"] {
  --app-background:            #F8F9FF;
  --app-surface:               #FFFFFF;
  --app-surface-elevated:      #EFF4FF;
  --app-surface-overlay:       #E5EEFF;

  --text-primary:              #0B1C30;
  --text-secondary:            #444654;
  --text-tertiary:             #757685;
  --text-inverse:              #FFFFFF;
  --text-accent:               #001D7B;

  --interactive-accent:        #001D7B;
  --interactive-accent-hover:  #002EB1;
  --interactive-secondary:     #066A61;
  --interactive-focus-ring:    #3452D0;

  --border-default:            #E2E8F0;
  --border-emphasis:           #CBD8F5;
  --border-accent:             #001D7B;
  --border-subtle:             #C5C5D6;

  --status-success:            #066A61;
  --status-success-bg:         #9EEEE240;
  --status-warning:            #D97706;
  --status-warning-bg:         #FFF3E0;
  --status-error:              #BA1A1A;
  --status-error-bg:           #FFDAD6;
  --status-info:               #3452D0;
  --status-info-bg:            #DDE1FF;

  --link-color:                #001D7B;
  --link-hover:                #002EB1;
}

/* ==========================================================================
   LAYER 2: COMPONENT-SPECIFIC TOKENS
   ========================================================================== */

:root {
  /* --- Button --- */
  --btn-primary-bg:            var(--interactive-accent);
  --btn-primary-text:          var(--text-inverse);
  --btn-primary-hover:         var(--interactive-accent-hover);
  --btn-secondary-bg:          transparent;
  --btn-secondary-text:        var(--interactive-accent);
  --btn-secondary-border:      var(--interactive-accent);
  --btn-ghost-text:            var(--text-secondary);
  --btn-ghost-hover-bg:        rgba(255, 255, 255, 0.06);
  --btn-radius:                var(--radius-sm);
  --btn-padding-y:             var(--space-2);
  --btn-padding-x:             var(--space-4);
  --btn-font:                  var(--font-body);
  --btn-font-weight:           var(--font-weight-semibold);
  --btn-font-size:             var(--font-size-body);
  --btn-transition:            var(--transition-base);

  /* --- Input --- */
  --input-bg:                  var(--app-surface);
  --input-text:                var(--text-primary);
  --input-placeholder:         var(--text-tertiary);
  --input-border:              var(--border-default);
  --input-border-focus:        var(--interactive-accent);
  --input-border-error:        var(--status-error);
  --input-radius:              var(--radius-sm);
  --input-padding-y:           var(--space-2);
  --input-padding-x:           var(--space-3);
  --input-font:                var(--font-body);
  --input-font-size:           var(--font-size-md);
  --input-label-font:          var(--font-mono);
  --input-label-size:          var(--font-size-sm);
  --input-label-color:         var(--text-secondary);
  --input-helper-size:         var(--font-size-xs);
  --input-helper-color:        var(--text-tertiary);

  /* --- Card --- */
  --card-bg:                   var(--app-surface-elevated);
  --card-border:               var(--border-default);
  --card-radius:               var(--radius-md);
  --card-padding:              var(--space-4);
  --card-shadow:               var(--shadow-sm);
  --card-hover-elevation:      -2px;
  --card-hover-border:         var(--interactive-accent);
  --card-transition:           var(--transition-base);

  /* --- Chip / Badge --- */
  --chip-font:                 var(--font-mono);
  --chip-font-size:            var(--font-size-sm);
  --chip-radius:               var(--radius-full);
  --chip-padding-y:            var(--space-1);
  --chip-padding-x:            var(--space-3);
  --chip-dot-size:             0.5rem;

  /* --- Navigation --- */
  --nav-height:                4rem;     /* 64px */
  --nav-bg:                    var(--app-surface);
  --nav-border:                var(--border-default);
  --nav-item-font:             var(--font-body);
  --nav-item-size:             var(--font-size-body);
  --nav-item-active:           var(--interactive-accent);
  --nav-item-default:          var(--text-secondary);
  --nav-padding-x:             var(--margin-desktop);

  /* --- Filter Pane (VMING-specific) --- */
  --filter-width:              280px;
  --filter-bg:                 var(--color-navy-800);
  --filter-border:             var(--border-default);

  /* --- Table / Data Grid --- */
  --table-header-font:         var(--font-mono);
  --table-header-size:         var(--font-size-sm);
  --table-cell-padding:        var(--space-3) var(--space-4);
  --table-border:              var(--border-subtle);
  --table-row-hover:           rgba(255, 255, 255, 0.03);
  --table-stripe:              rgba(255, 255, 255, 0.01);
}

/* ==========================================================================
   TYPOGRAPHY UTILITY CLASSES
   ========================================================================== */

.display-lg {
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tighter);
}

h1, .headline-lg {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
}

h2, .headline-md {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-tight);
}

h3, .headline-sm {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.body-lg {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-relaxed);
}

body, .body-md {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.body-sm {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.label-md, .label {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
}

.label-sm, .caption {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ==========================================================================
   GLOBAL RESET / BASE
   ========================================================================== */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background-color: var(--app-background);
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--link-hover); }

img, svg { display: block; max-width: 100%; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--interactive-focus-ring);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--color-cyan-300);
  color: var(--color-navy-950);
}