/* ==========================================================================
   Godspeed Auto Care — Design Tokens
   Corporate light theme. Graphite rail + white work surface + gold accent.
   ========================================================================== */

:root {
  /* ---- Surfaces -------------------------------------------------------- */
  --canvas:            #F4F6F8;
  --surface:           #FFFFFF;
  --surface-sunken:    #FAFBFC;
  --surface-raised:    #FFFFFF;
  --surface-inverse:   #12161B;
  --surface-inverse-2: #1A1F26;
  --overlay-scrim:     rgba(12, 16, 21, 0.44);

  /* ---- Borders --------------------------------------------------------- */
  --border:            #E2E6EB;
  --border-strong:     #CBD2DA;
  --border-subtle:     #EDF0F3;
  --border-inverse:    #262D36;

  /* ---- Ink ------------------------------------------------------------- */
  --ink:               #0D1116;
  --ink-secondary:     #3C4653;
  --ink-muted:         #6A7686;
  --ink-faint:         #98A2B0;
  --ink-inverse:       #F2F4F7;
  --ink-inverse-muted: #98A2B0;

  /* ---- Brand ----------------------------------------------------------- */
  --brand:             #14181D;   /* graphite — primary actions        */
  --brand-hover:       #242B34;
  --brand-active:      #0B0E12;
  --gold:              #B4831C;   /* accent — indicators, highlights   */
  --gold-hover:        #996F13;
  --gold-tint:         #FDF7EA;
  --gold-border:       #EDDCB4;

  /* ---- Semantic -------------------------------------------------------- */
  --success:           #0F7B58;
  --success-tint:      #E6F4EF;
  --success-border:    #B7E0D2;

  --warning:           #B45309;
  --warning-tint:      #FDF3E5;
  --warning-border:    #F2DCB8;

  --danger:            #B42318;
  --danger-tint:       #FDECEA;
  --danger-border:     #F5C9C4;

  --info:              #1553C7;
  --info-tint:         #EAF0FD;
  --info-border":      #C4D7F8;
  --info-border:       #C4D7F8;

  --neutral-tint:      #F1F3F6;
  --neutral-border:    #DDE2E8;

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;

  --lh-tight:  1.25;
  --lh-normal: 1.5;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ---- Radii ----------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(13, 17, 22, 0.05);
  --shadow-sm: 0 1px 3px rgba(13, 17, 22, 0.07), 0 1px 2px rgba(13, 17, 22, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(13, 17, 22, 0.10), 0 2px 4px -2px rgba(13, 17, 22, 0.06);
  --shadow-lg: 0 16px 36px -12px rgba(13, 17, 22, 0.22), 0 4px 10px -4px rgba(13, 17, 22, 0.08);
  --shadow-focus: 0 0 0 3px rgba(180, 131, 28, 0.22);

  /* ---- Layout ---------------------------------------------------------- */
  --rail-w: 244px;
  --rail-w-collapsed: 64px;
  --topbar-h: 56px;
  --page-max: 1480px;

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  --z-drawer: 60;
  --z-modal: 70;
  --z-toast: 90;
  --z-menu: 80;
}