/* ============================================================
   Brake Swap — Design Tokens
   Industrial safety-orange theme · metal brushed + rubber grain
   ============================================================ */
:root {
  /* Core trio */
  --graphite-900: #1E1E20;
  --safety-500: #E8641F;
  --rubber-700: #2A2A2A;

  /* Industrial greys */
  --g-950: #0E0E10;
  --g-900: #1E1E20;
  --g-850: #2E2E32;
  --g-800: #3E3E44;
  --g-700: #52525A;
  --g-600: #6E6E78;
  --g-500: #8E8E98;

  /* Safety orange ramp */
  --o-900: #7A2E08;
  --o-800: #B8480F;
  --o-500: #E8641F;
  --o-400: #F58A3C;
  --o-300: #FAAE72;
  --o-200: #FCD2AC;
  --o-100: #FDEBDC;

  /* Rubber black ramp */
  --r-900: #141414;
  --r-700: #2A2A2A;
  --r-600: #3A3A3A;
  --r-500: #4A4A4A;
  --r-400: #5E5E5E;

  /* Metal silver ramp (caliper / bolt) */
  --s-700: #C4C8CC;
  --s-600: #D8DCE0;
  --s-500: #E8ECF0;
  --s-400: #F4F6F8;

  /* Warning red ramp */
  --red-900: #5C1A14;
  --red-800: #8A2A20;
  --red-600: #C0392B;
  --red-500: #D65A4A;
  --red-400: #E88878;
  --red-300: #F5C0B8;

  /* Success green ramp */
  --gr-900: #1E4A2E;
  --gr-800: #2E6A42;
  --gr-700: #4A8A5A;
  --gr-500: #7AAA88;
  --gr-400: #A8C8B4;

  /* Neutral text / borders */
  --text: #F0EDE8;
  --text-2: #C4C0B8;
  --text-3: #8A867E;
  --border: #3E3E44;
  --border-strong: #52525A;

  /* Semantic */
  --warn: #C0392B;
  --ok: #4A8A5A;
  --note: #D4A040;
  --info: #4A7AAA;

  /* Texture overlays */
  --metal-grain: rgba(232,100,31,.03);
  --rubber-grain: rgba(240,237,232,.04);

  /* Radius */
  --r-sm: 2px;
  --r-card: 8px;
  --r-cta: 14px;
  --r-pill: 999px;

  /* Shadow (dark theme) */
  --sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --sh-sm: 0 2px 6px rgba(0,0,0,.45);
  --sh-md: 0 6px 18px rgba(0,0,0,.5);
  --sh-lg: 0 16px 44px rgba(0,0,0,.6);

  /* Transition */
  --t-fast: .14s ease;
  --t-mid: .28s ease;

  /* Type */
  --font-head: "Bitter", "Rockwell", "Georgia", serif;
  --font-body: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, Menlo, monospace;

  /* Layout */
  --container: 1100px;
  --container-narrow: 820px;
  --container-wide: 1280px;
  --gutter: 22px;
  --header-h: 88px;
  --brand-h: 36px;
  --nav-h: 48px;
}