/* ==========================================================================
   Tesla Vendor Directory · Design Tokens
   Drop into your project as the root CSS — all UI consumes these vars.
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------- */
  /* BRAND COLOR SCALE — Primary brand identity                          */
  /* -------------------------------------------------------------------- */
  --brand-900: #062744;   /* Deepest, hero gradient end */
  --brand-800: #0a3961;   /* Primary hover state */
  --brand-700: #0f4c81;   /* PRIMARY — main CTA, selected, brand */
  --brand-600: #1a6aac;   /* Light primary, map accent */
  --brand-500: #2e87cf;   /* Focus ring outline */
  --brand-400: #5da9e0;   /* Pulse / animated accent */
  --brand-300: #9ec7e8;   /* Selected border */
  --brand-100: #e3eff8;   /* Tinted bg, badge bg */
  --brand-50:  #f3f8fc;   /* Subtle hover bg */

  /* -------------------------------------------------------------------- */
  /* NEUTRAL INK SCALE — Cool-toned neutrals                              */
  /* -------------------------------------------------------------------- */
  --ink-950: #0c1118;     /* Near-black ink */
  --ink-900: #131a25;     /* Primary text */
  --ink-800: #1c2533;     /* Emphasized text */
  --ink-700: #2a3445;     /* Sub-heading text */
  --ink-600: #475263;     /* Body */
  --ink-500: #6b7689;     /* Muted / meta */
  --ink-400: #8c95a5;     /* Placeholder, disabled icons */
  --ink-300: #b5bcc8;     /* Disabled text, dividers */
  --ink-200: #d7dce4;     /* Borders */
  --ink-100: #eceff4;     /* Subtle borders, dividers */
  --ink-50:  #f6f8fa;     /* Body background */
  --paper:   #ffffff;     /* Card background */

  /* -------------------------------------------------------------------- */
  /* ACCENT COLORS — Semantic                                             */
  /* -------------------------------------------------------------------- */
  --gold:    oklch(74% 0.13 75);   /* Rating stars, featured badge */
  --gold-bg: oklch(96% 0.04 80);
  --red:     oklch(60% 0.18 25);   /* Save filled, alert, selected pin */
  --red-bg:  oklch(96% 0.03 25);
  --green:   oklch(64% 0.13 150);  /* Open status */
  --green-bg: oklch(96% 0.04 150);

  /* -------------------------------------------------------------------- */
  /* MAP COLORS — Light misty blue-grey styling                           */
  /* -------------------------------------------------------------------- */
  --map-bg:    #bcd2e6;
  --map-land:  #fafbfd;
  --map-road:  #eaeff5;
  --map-water: #bcd2e6;
  --map-label: #5a6478;

  /* -------------------------------------------------------------------- */
  /* CATEGORY COLORS — 11 fixed Tesla service categories                 */
  /* These map to taxonomy term slugs                                     */
  /* -------------------------------------------------------------------- */
  --cat-acc:     #0f4c81;   /* 特斯拉配件 · AC */
  --cat-elec:    #1a6aac;   /* 電系改裝 · EL */
  --cat-wrap:    #7a3cb0;   /* 包膜 · WP */
  --cat-tint:    #2c7a7a;   /* 隔熱紙 · TT */
  --cat-tire:    #2a2a2a;   /* 輪胎 · TR */
  --cat-dvr:     #b35900;   /* 行車紀錄器 · DR */
  --cat-susp:    #c93a3a;   /* 避震改裝 · SP */
  --cat-brake:   #8b1e1e;   /* 煞車改裝 · BK */
  --cat-body:    #5a7029;   /* 鈑金修復 · BD */
  --cat-paint:   #3a5a8c;   /* 烤漆 · PT */
  --cat-protect: #6b4e2e;   /* 保護件修復 · PR */

  /* -------------------------------------------------------------------- */
  /* SHADOWS                                                              */
  /* -------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 76, 129, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 76, 129, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 76, 129, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-drawer: -20px 0 48px rgba(6, 39, 68, 0.18);
  --shadow-focus: 0 0 0 3px var(--brand-100);

  /* -------------------------------------------------------------------- */
  /* RADIUS SCALE                                                         */
  /* -------------------------------------------------------------------- */
  --r-xs:   4px;    /* Tag, small badge */
  --r-sm:   6px;    /* Small button, time slot */
  --r-md:  10px;    /* Default button, card element */
  --r-lg:  14px;    /* Main card, list panel, drawer hero */
  --r-xl:  20px;    /* Compare bar */
  --r-pill: 999px;  /* Chip, badge */

  /* -------------------------------------------------------------------- */
  /* SPACING (multiples of 4)                                             */
  /* -------------------------------------------------------------------- */
  --space-0:    0;
  --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;

  /* -------------------------------------------------------------------- */
  /* TYPOGRAPHY                                                           */
  /* -------------------------------------------------------------------- */
  --font-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-en: "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Type scale */
  --text-h1:    32px;   /* Vendor name on detail page */
  --text-h2:    22px;   /* Drawer title */
  --text-h3:    18px;   /* Section heading */
  --text-h4:    16px;   /* Sidebar title */
  --text-card:  14px;   /* Card title, body */
  --text-body:  15px;   /* Long-form text */
  --text-sm:    13px;   /* UI text, button */
  --text-xs:    12px;   /* Meta, secondary */
  --text-tiny:  11px;   /* Tags, captions */

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight: -0.02em;   /* Large titles */
  --tracking-snug:  -0.01em;   /* Medium titles */
  --tracking-wide:   0.08em;   /* Caps labels */

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* -------------------------------------------------------------------- */
  /* COMPONENT TOKENS                                                     */
  /* -------------------------------------------------------------------- */

  /* Z-index scale */
  --z-base:    1;
  --z-pin:     5;
  --z-tooltip: 20;
  --z-overlay: 30;
  --z-drawer-backdrop: 40;
  --z-drawer:  50;
  --z-modal:   60;

  /* Component sizes */
  --nav-rail-width:    64px;
  --sidebar-width:     360px;
  --drawer-width:      480px;
  --list-panel-width:  340px;
  --side-column-width: 380px;
  --topbar-height:     60px;
  --detail-max-width:  1280px;

  /* Touch targets */
  --hit-min: 32px;
  --hit-rec: 44px;

  /* Transition durations */
  --duration-fast:   120ms;
  --duration-base:   150ms;
  --duration-slow:   250ms;
  --duration-slowest: 300ms;

  /* Easings */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}