/* Nobel Auto Services — Design Tokens */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- Nobel Blue ---- */
  --blue-950: #0B1F3F;
  --blue-900: #102A52;
  --blue-800: #163566;
  --blue-700: #1C447F;
  --blue-600: #21539B;
  --blue-500: #3168B5;
  --blue-400: #5C8AD0;
  --blue-300: #93B2E2;
  --blue-200: #C5D6F0;
  --blue-100: #E6EEF9;
  --blue-50:  #F3F7FC;

  /* ---- Steel ---- */
  --steel-950: #0C1116;
  --steel-900: #14191F;
  --steel-800: #20272F;
  --steel-700: #2E3742;
  --steel-600: #475260;
  --steel-500: #647084;
  --steel-400: #8A95A5;
  --steel-300: #B4BCC8;
  --steel-200: #D6DBE2;
  --steel-100: #E9ECF1;
  --steel-50:  #F5F6F9;
  --white:     #FFFFFF;

  /* ---- Amber ---- */
  --amber-700: #A8650C;
  --amber-600: #C77A12;
  --amber-500: #E8920E;
  --amber-400: #F5A623;
  --amber-300: #F8BE5C;
  --amber-100: #FDF0D6;

  /* ---- Semantic ---- */
  --green-700: #166541;
  --green-600: #1E7A4D;
  --green-500: #259D63;
  --green-100: #DDF2E7;

  --red-700:   #9E2D20;
  --red-600:   #C0392B;
  --red-500:   #E04434;
  --red-100:   #FBE3E0;

  --violet-600: #5A47B8;
  --violet-500: #6E56CF;
  --violet-100: #EAE5FB;

  /* ---- Semantic aliases ---- */
  --color-primary:        var(--blue-600);
  --color-primary-hover:  var(--blue-700);
  --color-primary-active: var(--blue-800);
  --color-accent:         var(--amber-400);
  --color-accent-hover:   var(--amber-500);

  --text-strong:  var(--steel-900);
  --text-body:    var(--steel-700);
  --text-muted:   var(--steel-500);
  --text-faint:   var(--steel-400);
  --text-on-primary: var(--white);
  --text-link:    var(--blue-600);

  --surface-page:       var(--steel-50);
  --surface-card:       var(--white);
  --surface-sunken:     var(--steel-100);
  --surface-hover:      var(--steel-50);
  --surface-inverse:    var(--steel-900);
  --surface-brand:      var(--blue-600);
  --surface-brand-soft: var(--blue-50);

  --border-default: var(--steel-200);
  --border-strong:  var(--steel-300);
  --border-subtle:  var(--steel-100);
  --border-focus:   var(--blue-500);
  --border-inverse: var(--steel-700);

  /* ---- Job status ---- */
  --status-new-fg:      var(--blue-700);
  --status-new-bg:      var(--blue-100);
  --status-progress-fg: var(--amber-700);
  --status-progress-bg: var(--amber-100);
  --status-waiting-fg:  var(--violet-600);
  --status-waiting-bg:  var(--violet-100);
  --status-ready-fg:    var(--green-700);
  --status-ready-bg:    var(--green-100);
  --status-overdue-fg:  var(--red-700);
  --status-overdue-bg:  var(--red-100);
  --status-closed-fg:   var(--steel-600);
  --status-closed-bg:   var(--steel-100);

  /* ---- Radii ---- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 1px rgba(12,17,22,0.05);
  --shadow-sm: 0 1px 2px rgba(12,17,22,0.08), 0 1px 1px rgba(12,17,22,0.04);
  --shadow-md: 0 2px 4px rgba(12,17,22,0.07), 0 6px 16px rgba(12,17,22,0.07);
  --shadow-lg: 0 10px 30px rgba(12,17,22,0.13);
  --shadow-focus: 0 0 0 3px rgba(33,83,155,0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;

  /* ---- Typography ---- */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  28px;

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

  --leading-snug:   1.35;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-caps:  0.07em;

  /* ---- Layout ---- */
  --sidebar-width: 248px;
  --topbar-height: 60px;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--surface-page);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}