/* ============================================================
   BRRTZ DESIGN TOKENS — SINGLE SOURCE OF TRUTH
   ============================================================
   Generated by the Brrtz Design System project (Claude = brand
   visual leader). Codex: this file REPLACES design-system.css.
   Do not edit values here by hand — request changes through the
   design system. Do not hardcode colors, radii, shadows, fonts,
   or durations anywhere else in the codebase; reference these
   variables instead.

   Layers:
     1. BRAND      --brrtz-*   raw brand decisions (pivot here)
     2. SEMANTIC   --color-* / --radius-* / --shadow-* / etc.
     3. COMPAT     legacy aliases used by styles.css (--bg, --ink…)

   A brand pivot = editing Layer 1 (and theme overrides).
   Layers 2–3 cascade automatically.
   Version: 1.0.0 (2026-07-05)
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- 1. BRAND LAYER ------------------------------------ */
  --brrtz-magenta: #ff00ff;
  --brrtz-blue: #0072ff;
  --brrtz-ink: #151515;
  --brrtz-paper: #eef1f0;          /* warm-grey ground, light */
  --brrtz-carbon: #0f1113;         /* near-black ground, dark */
  --brrtz-font: "Geist", Helvetica, Arial, "Segoe UI", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- 2. SEMANTIC LAYER ---------------------------------- */

  /* Surfaces + text */
  --color-bg: var(--brrtz-paper);
  --color-panel: #ffffff;
  --color-panel-soft: rgba(255, 255, 255, 0.82);
  --color-panel-glass: rgba(255, 255, 255, 0.74);
  --color-ink: var(--brrtz-ink);
  --color-listing-title: #111416;
  --color-muted: #6f746d;
  --color-line: #d9ddd5;
  --color-field: rgba(255, 255, 255, 0.9);
  --color-image-bg: #d8dcd2;

  /* Controls */
  --color-button-bg: #ffffff;
  --color-select-bg: #e7ebe3;
  --color-select-hover-bg: #dde4d8;
  --color-select-chevron-bg: #ffffff;
  --color-select-chevron-ink: #151515;
  --color-primary: #171a1d;
  --color-primary-ink: #ffffff;
  --color-secondary-button-stroke: #cfd4cc;
  --color-secondary-button-ink: #151515;
  --color-secondary-button-bg: #ffffff;
  --color-secondary-button-hover-bg: #151515;
  --color-secondary-button-hover-ink: #ffffff;

  /* Accent + status */
  --color-accent: #0a84ff;
  --color-accent-soft: rgba(10, 132, 255, 0.12);
  --color-accent-ink: #075fb6;
  --color-green: #2f7d58;
  --color-rose: #b13b57;
  --color-amber: #9f6a12;

  /* Brand expressions */
  --brand-gradient-start: var(--brrtz-magenta);
  --brand-gradient-end: var(--brrtz-blue);
  --color-brand-gradient: linear-gradient(110deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
  --color-brand-hot: var(--brrtz-magenta);   /* watch-active, hover borders, "loading" copy */
  --color-control-on-ink: #ffffff;
  --color-modal-backdrop: rgba(0,0,0,0.42);
  --color-mobile-nav-surface-top: rgba(32,39,45,0.94);
  --color-mobile-nav-surface-bottom: rgba(17,22,27,0.96);
  --color-mobile-nav-border: rgba(255,255,255,0.14);
  --color-mobile-nav-ink: rgba(255,255,255,0.66);
  --color-mobile-nav-interaction: rgba(255,255,255,0.08);
  --color-toast-surface: rgba(17,17,17,0.92);
  --color-toast-ink: #ffffff;
  --color-toast-link: #7db2ff;
  --color-overlay-interaction: rgba(255,255,255,0.12);
  --color-overlay-edge: rgba(255,255,255,0.18);
  --color-search-field: rgba(255,255,255,0.9);
  --color-search-ink: #686868;
  --color-gear-browser-frame: #151515;

  /* Marketplace identity */
  --source-default: #4b83d8;
  --source-mercari: #e53935;
  --source-yahoo-auctions: #d60000;
  --source-yahoo-fleamarket: #1f73e8;
  --source-rakuma: #12a05c;
  --source-digimart: #0a62b7;
  --source-reverb: #f47a20;
  --source-ebay: #0064d2;
  --source-sweetwater: #1f75bc;
  --source-guitar-center: #111416;
  --source-craigslist: #6b3fa0;
  --source-qsic: #0a62b7;
  --source-robotspeak: #f47a20;
  --source-mission-synths: #b13b57;
  --source-starving-musician: #151515;
  --source-bananas-at-large: #f2a900;
  --source-gelb-music: #0a62b7;
  --source-main-drag: #111416;
  --source-rogue-music: #b13b57;
  --source-three-wave: #1f73e8;
  --source-alto-music: #1f75bc;
  --source-tone-tweakers: #f2a900;
  --source-pro-audio-star: #f15a24;
  --source-jimoty: #f15a24;
  --source-offmall: #f2a900;
  --source-hardoff: #f2a900;
  --source-five-g: #151515;
  --source-implant4: #b13b57;
  --source-random-green: #00a36c;
  --source-random-orange: #ff7a00;
  --source-random-violet: #8a5cff;
  --source-buyee: #d9a321;
  --source-buyee-ink: #111418;
  --source-ink-on-color: #ffffff;
  --source-ink-on-yellow: #1a1a1a;

  /* Shape */
  --radius-control: 8px;
  --radius-card: 8px;
  --radius-card-large: 22px;       /* listing cards (was hardcoded) */
  --radius-card-list: 16px;        /* list-view rows (was hardcoded) */
  --radius-card-media: 14px;
  --radius-modal: 8px;
  --radius-sheet: 24px;
  --radius-navigation-item: 18px;
  --radius-pill: 999px;
  --control-search-height-desktop: 72px;
  --control-search-height-mobile: 56px;
  --control-search-font-size: 18px;
  --control-search-submit-desktop: 54px;
  --control-search-submit-mobile: 42px;
  --control-search-clear: 32px;
  --control-refine-action-height: 42px;
  --control-suggestion-height: 30px;
  --control-tag-min-height: 34px;
  --control-token-field-min-height: 58px;
  --control-exclude-field-min-height: 50px;
  --control-header-utility-size: 46px;
  --control-mobile-nav-height: 66px;
  --control-mobile-nav-item-height: 52px;
  --control-mobile-nav-icon-size: 23px;
  --control-back-to-top-size: 48px;
  --control-toast-min-height: 58px;
  --control-toast-close-size: 38px;
  --control-action-menu-row-height: 40px;
  --control-action-sheet-row-height: 72px;
  --control-action-menu-icon-size: 22px;
  --control-action-sheet-icon-size: 30px;

  /* Elevation + focus */
  --shadow-elevated: 0 18px 50px rgba(20, 24, 28, 0.12);
  --shadow-card: 0 22px 54px rgba(25, 30, 35, 0.16), 0 5px 16px rgba(25, 30, 35, 0.08);
  --shadow-float: 0 8px 18px rgba(0, 0, 0, 0.28);   /* watch button etc. */
  --shadow-toast: 0 18px 48px rgba(0,0,0,0.32);
  --shadow-action-menu: 0 16px 36px rgba(20,24,28,0.18);
  --shadow-action-sheet: 0 24px 70px rgba(0,0,0,0.46);
  --focus-ring: 0 0 0 4px rgba(10, 132, 255, 0.14);

  /* Motion */
  --motion-fast: 140ms ease;
  --motion-standard: 160ms ease;
  --motion-toast-fade: 180ms;
  --motion-toast-travel: 220ms;

  /* Typography */
  --font-ui: var(--brrtz-font);
  --weight-medium: 650;
  --weight-bold: 800;
  --weight-heavy: 850;
  --weight-black: 900;
  --weight-display: 950;
  --text-micro: 11px;
  --text-caption: 13px;
  --text-body: 15px;
  --text-emphasis: 18px;
  --text-title: 24px;
  --text-listing-title-grid: 13px;
  --text-listing-title-list: 14px;
  --text-listing-title-gallery: 12px;
  --text-listing-price-grid: 21px;
  --text-listing-price-list: 30px;
  --text-headline: clamp(28px, 4vw, 52px);
  --text-home-section-title: clamp(31px, 5vw, 62px);
  --text-home-section-title-fit: clamp(22px, 4.6vw, 54px);
  --text-home-section-title-reduced: clamp(25px, 5vw, 48px);
  --text-home-section-title-compact: clamp(20px, 5.7vw, 34px);
  --text-home-section-title-mobile: clamp(18px, 4.8vw, 26px);
  --text-home-section-title-mini: clamp(15px, 4.2vw, 18px);
  --text-display: clamp(44px, 6vw, 76px);
  --text-hero: clamp(42px, 8vw, 92px);
  --weight-home-section-title: 600;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---- 3. COMPAT ALIASES (used by styles.css) -------------- */
  --bg: var(--color-bg);
  --app-bg: var(--color-bg);
  --panel: var(--color-panel);
  --panel-soft: var(--color-panel-soft);
  --panel-glass: var(--color-panel-glass);
  --ink: var(--color-ink);
  --listing-title: var(--color-listing-title);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --field: var(--color-field);
  --button-bg: var(--color-button-bg);
  --select-bg: var(--color-select-bg);
  --select-hover-bg: var(--color-select-hover-bg);
  --select-chevron-bg: var(--color-select-chevron-bg);
  --select-chevron-ink: var(--color-select-chevron-ink);
  --primary: var(--color-primary);
  --primary-ink: var(--color-primary-ink);
  --secondary-button-stroke: var(--color-secondary-button-stroke);
  --secondary-button-ink: var(--color-secondary-button-ink);
  --secondary-button-bg: var(--color-secondary-button-bg);
  --secondary-button-hover-bg: var(--color-secondary-button-hover-bg);
  --secondary-button-hover-ink: var(--color-secondary-button-hover-ink);
  --accent: var(--color-accent);
  --accent-soft: var(--color-accent-soft);
  --accent-ink: var(--color-accent-ink);
  --blue: var(--color-accent);
  --green: var(--color-green);
  --rose: var(--color-rose);
  --amber: var(--color-amber);
  --shadow: var(--shadow-elevated);
  --card-shadow: var(--shadow-card);
  --image-bg: var(--color-image-bg);
  --brand-gradient: var(--color-brand-gradient);
  --gear-browser-frame: var(--color-gear-browser-frame);
}

/* ============ DARK THEME (default for the app) ============ */
body[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: var(--brrtz-carbon);
  --color-panel: #181b1f;
  --color-panel-soft: rgba(24, 27, 31, 0.86);
  --color-panel-glass: rgba(24, 27, 31, 0.78);
  --color-ink: #f2f4f4;
  --color-listing-title: #d7dcdf;
  --color-muted: #9da5a7;
  --color-line: #30363a;
  --color-field: rgba(19, 22, 25, 0.95);
  --color-search-field: #24282c;
  --color-search-ink: #b8b8b8;
  --color-image-bg: #22272b;

  --color-button-bg: #202428;
  --color-select-bg: #222725;
  --color-select-hover-bg: #2a302e;
  --color-select-chevron-bg: #111416;
  --color-select-chevron-ink: #f2f4f4;
  --color-primary: #f2f4f4;
  --color-primary-ink: #101214;
  --color-secondary-button-stroke: #f2f4f4;
  --color-secondary-button-ink: #f2f4f4;
  --color-secondary-button-bg: transparent;
  --color-secondary-button-hover-bg: #f2f4f4;
  --color-secondary-button-hover-ink: #101214;

  --color-accent: #5aa7ff;
  --color-accent-soft: rgba(90, 167, 255, 0.17);
  --color-accent-ink: #a8d0ff;
  --color-green: #55b982;
  --color-rose: #e85d7f;
  --color-amber: #e6a746;
  --color-gear-browser-frame: #5f6669;

  --shadow-elevated: 0 18px 50px rgba(0, 0, 0, 0.42);
  --shadow-card: 0 24px 58px rgba(0, 0, 0, 0.54), 0 5px 18px rgba(0, 0, 0, 0.34);
  --shadow-float: 0 8px 18px rgba(0, 0, 0, 0.5);
  --focus-ring: 0 0 0 4px rgba(90, 167, 255, 0.18);

  /* Compat re-binds */
  --bg: var(--color-bg);
  --app-bg: var(--color-bg);
  --panel: var(--color-panel);
  --panel-soft: var(--color-panel-soft);
  --panel-glass: var(--color-panel-glass);
  --ink: var(--color-ink);
  --listing-title: var(--color-listing-title);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --field: var(--color-field);
  --button-bg: var(--color-button-bg);
  --select-bg: var(--color-select-bg);
  --select-hover-bg: var(--color-select-hover-bg);
  --select-chevron-bg: var(--color-select-chevron-bg);
  --select-chevron-ink: var(--color-select-chevron-ink);
  --primary: var(--color-primary);
  --primary-ink: var(--color-primary-ink);
  --secondary-button-stroke: var(--color-secondary-button-stroke);
  --secondary-button-ink: var(--color-secondary-button-ink);
  --secondary-button-bg: var(--color-secondary-button-bg);
  --secondary-button-hover-bg: var(--color-secondary-button-hover-bg);
  --secondary-button-hover-ink: var(--color-secondary-button-hover-ink);
  --accent: var(--color-accent);
  --accent-soft: var(--color-accent-soft);
  --accent-ink: var(--color-accent-ink);
  --blue: var(--color-accent);
  --green: var(--color-green);
  --rose: var(--color-rose);
  --amber: var(--color-amber);
  --shadow: var(--shadow-elevated);
  --card-shadow: var(--shadow-card);
  --image-bg: var(--color-image-bg);
  --brand-gradient: var(--color-brand-gradient);
  --gear-browser-frame: var(--color-gear-browser-frame);
}