/* ============================================================
   GARMAT Design System — Color & Typography Tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Raw Color Palette ─────────────────────────────────── */
:root {
  /* Navy Blue (primary brand) */
  --g-blue-950: #050B1A;
  --g-blue-900: #0A1330;
  --g-blue-800: #172554;
  --g-blue-700: #1E3478;
  --g-blue-600: #1E40AF;
  --g-blue-500: #2753C4;
  --g-blue-400: #4569D0;
  --g-blue-300: #6784DC;
  --g-blue-200: #9AAEE9;
  --g-blue-100: #C8D3F0;
  --g-blue-75:  #DFE5F6;
  --g-blue-50:  #EEF1FA;

  /* Neutrals (cool slate, slight blue tint) */
  --g-gray-950: #0B1220;
  --g-gray-900: #1A222E;
  --g-gray-800: #2A3340;
  --g-gray-700: #404B5C;
  --g-gray-600: #5A6578;
  --g-gray-500: #778399;
  --g-gray-400: #94A0B5;
  --g-gray-300: #B7C0CE;
  --g-gray-200: #D8DEE6;
  --g-gray-100: #EDF0F4;
  --g-gray-50:  #F6F8FA;
  --g-white:    #FFFFFF;

  /* Amber (data callouts, warnings) */
  --g-amber-600: #D97706;
  --g-amber-500: #F59E0B;
  --g-amber-400: #FBBF24;
  --g-amber-100: #FEF3C7;
  --g-amber-50:  #FFFBEB;

  /* Semantic */
  --g-red-600:   #DC2626;
  --g-red-500:   #EF4444;
  --g-red-100:   #FEE2E2;
  --g-red-50:    #FFF5F5;

  --g-sky-600:   #0284C7;
  --g-sky-500:   #0EA5E9;
  --g-sky-100:   #E0F2FE;
  --g-sky-50:    #F0F9FF;
}

/* ─── Semantic Light Mode ───────────────────────────────── */
:root, [data-theme="light"] {
  /* Backgrounds */
  --bg-base:        var(--g-gray-50);
  --bg-surface:     var(--g-white);
  --bg-elevated:    var(--g-white);
  --bg-overlay:     rgba(0,0,0,0.4);
  --bg-subtle:      var(--g-gray-100);

  /* Foregrounds */
  --fg-primary:     var(--g-gray-900);
  --fg-secondary:   var(--g-gray-600);
  --fg-tertiary:    var(--g-gray-400);
  --fg-disabled:    var(--g-gray-300);
  --fg-on-brand:    var(--g-white);
  --fg-on-dark:     var(--g-white);

  /* Brand interactive */
  --brand-primary:        var(--g-blue-500);
  --brand-primary-hover:  var(--g-blue-400);
  --brand-primary-press:  var(--g-blue-600);
  --brand-dark:           var(--g-blue-800);
  --brand-tint:           var(--g-blue-50);
  --brand-tint-mid:       var(--g-blue-75);

  /* Borders */
  --border-default:   var(--g-gray-200);
  --border-strong:    var(--g-gray-300);
  --border-focus:     var(--g-blue-400);

  /* Status */
  --status-success-bg:  var(--g-blue-50);
  --status-success-fg:  var(--g-blue-600);
  --status-warning-bg:  var(--g-amber-50);
  --status-warning-fg:  var(--g-amber-600);
  --status-error-bg:    var(--g-red-50);
  --status-error-fg:    var(--g-red-600);
  --status-info-bg:     var(--g-sky-50);
  --status-info-fg:     var(--g-sky-600);

  /* Shadows */
  --shadow-1: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 4px 12px rgba(0,0,0,.10);
  --shadow-3: 0 12px 32px rgba(0,0,0,.16);

  /* Data table */
  --table-header-bg:  var(--g-gray-50);
  --table-row-hover:  var(--g-gray-50);
  --table-border:     var(--g-gray-100);
}

/* ─── Semantic Dark Mode ────────────────────────────────── */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-base:        var(--g-gray-950);
  --bg-surface:     var(--g-gray-900);
  --bg-elevated:    var(--g-gray-800);
  --bg-overlay:     rgba(0,0,0,0.6);
  --bg-subtle:      var(--g-gray-800);

  /* Foregrounds */
  --fg-primary:     var(--g-gray-50);
  --fg-secondary:   var(--g-gray-300);
  --fg-tertiary:    var(--g-gray-500);
  --fg-disabled:    var(--g-gray-700);
  --fg-on-brand:    var(--g-white);
  --fg-on-dark:     var(--g-white);

  /* Brand interactive */
  --brand-primary:        var(--g-blue-400);
  --brand-primary-hover:  var(--g-blue-300);
  --brand-primary-press:  var(--g-blue-500);
  --brand-dark:           var(--g-blue-300);
  --brand-tint:           rgba(39,83,196,.14);
  --brand-tint-mid:       rgba(39,83,196,.22);

  /* Borders */
  --border-default:   var(--g-gray-800);
  --border-strong:    var(--g-gray-700);
  --border-focus:     var(--g-blue-400);

  /* Status */
  --status-success-bg:  rgba(69,105,208,.18);
  --status-success-fg:  var(--g-blue-300);
  --status-warning-bg:  rgba(245,158,11,.12);
  --status-warning-fg:  var(--g-amber-400);
  --status-error-bg:    rgba(239,68,68,.12);
  --status-error-fg:    var(--g-red-500);
  --status-info-bg:     rgba(14,165,233,.14);
  --status-info-fg:     var(--g-sky-500);

  /* Shadows (borders instead of shadows in dark) */
  --shadow-1: 0 0 0 1px var(--g-gray-800);
  --shadow-2: 0 0 0 1px var(--g-gray-800), 0 4px 16px rgba(0,0,0,.3);
  --shadow-3: 0 0 0 1px var(--g-gray-800), 0 12px 32px rgba(0,0,0,.5);

  /* Data table */
  --table-header-bg:  var(--g-gray-900);
  --table-row-hover:  var(--g-gray-800);
  --table-border:     var(--g-gray-800);
}

/* ─── Typography ────────────────────────────────────────── */
:root {
  /* Font families */
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Size scale */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-base: 16px;
  --text-lg:  18px;
  --text-xl:  24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 56px;

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

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide:   0.03em;
  --tracking-wider:  0.07em;
}

/* ─── Semantic Text Styles ──────────────────────────────── */

/* Display */
.text-d1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-bold);    line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.text-d2 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold);    line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }

/* Headings */
.text-h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug);  letter-spacing: var(--tracking-tight); }
.text-h2 { font-family: var(--font-display); font-size: var(--text-xl);  font-weight: var(--weight-semibold); line-height: var(--leading-snug);  letter-spacing: var(--tracking-tight); }
.text-h3 { font-family: var(--font-display); font-size: var(--text-lg);  font-weight: var(--weight-semibold); line-height: var(--leading-snug);  letter-spacing: var(--tracking-normal); }
.text-h4 { font-family: var(--font-display); font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug);  letter-spacing: var(--tracking-normal); }

/* Body */
.text-body-lg { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); }
.text-body    { font-family: var(--font-body); font-size: var(--text-md);   font-weight: var(--weight-regular); line-height: var(--leading-normal); }
.text-body-sm { font-family: var(--font-body); font-size: var(--text-sm);   font-weight: var(--weight-regular); line-height: var(--leading-normal); }

/* UI labels */
.text-label    { font-family: var(--font-body); font-size: var(--text-md);  font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.text-label-sm { font-family: var(--font-body); font-size: var(--text-sm);  font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.text-label-xs { font-family: var(--font-body); font-size: var(--text-xs);  font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.text-caption  { font-family: var(--font-body); font-size: var(--text-xs);  font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--fg-secondary); }
.text-overline { font-family: var(--font-body); font-size: var(--text-2xs); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--fg-tertiary); }

/* Data / mono */
.text-data { font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--weight-medium); }
.text-code { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-regular); }
.text-num  { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }

/* ─── Spacing Tokens ────────────────────────────────────── */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Border radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
}