/* =====================================================================
   RS Motorcycle — brand theme tokens
   Source of truth: "RS Motrcycle Brand Sheet" (Color Palette + Typography).
   Layout/dimension tokens were measured from the approved dark-mode
   homepage reference (1024 px wide). Change values here, not in components.
   ===================================================================== */

/* ---------- Brand fonts (OFL, served locally; see /fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/barlow-condensed-800-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/barlow-condensed-900i-latin.woff2') format('woff2');
}

:root {
  /* ---------- Official palette (brand sheet) ---------- */
  --rs-jet-black: #0B0B0C;      /* 01 base — 60% */
  --rs-racing-red: #D71920;     /* 02 accent — buttons, highlights */
  --rs-chrome-silver: #C4C7CC;  /* 03 metal — icons, dividers, secondary text */
  --rs-pure-white: #FFFFFF;     /* 04 type */
  --rs-graphite: #1C1D20;       /* cards, panels, contact bars */
  --rs-gunmetal: #3A3D42;       /* borders, dividers, inactive */
  --rs-steel: #8A8F96;          /* chrome shading, icon strokes */
  --rs-deep-red: #9E0F14;       /* red shadows, pressed states */
  --rs-signal-red: #FF3B3F;     /* red text on black only */
  --rs-light-silver: #E3E5E8;   /* body copy on dark (brand sheet) */

  /* ---------- Semantic tokens ---------- */
  --rs-primary: var(--rs-racing-red);
  --rs-primary-hover: #E8242B;              /* Racing Red lifted toward Signal Red */
  --rs-primary-pressed: var(--rs-deep-red);
  --rs-primary-gradient: linear-gradient(180deg, #F01C26 0%, var(--rs-racing-red) 45%, #B5131B 100%);
  --rs-primary-gradient-x: linear-gradient(90deg, #A30F16 0%, var(--rs-racing-red) 55%, #E81D27 100%);

  --rs-bg: var(--rs-jet-black);             /* page */
  --rs-bg-secondary: var(--rs-jet-black);   /* header / footer: solid, no imagery */
  --rs-card-bg: #101113;                    /* Jet Black lifted ~25% toward Graphite */
  --rs-panel-bg: var(--rs-jet-black);       /* sidebar panel */
  --rs-input-bg: var(--rs-graphite);
  --rs-input-bg-hover: #222327;

  --rs-border: #27292C;                     /* Gunmetal 60% over Jet Black */
  --rs-border-strong: var(--rs-gunmetal);
  --rs-divider: #27292C;

  --rs-text: var(--rs-pure-white);
  --rs-text-secondary: var(--rs-light-silver);
  --rs-text-muted: var(--rs-chrome-silver);
  --rs-text-subtle: var(--rs-steel);
  --rs-price: var(--rs-signal-red);
  --rs-nav-active: var(--rs-signal-red);
  --rs-hover-bg: rgba(196, 199, 204, 0.06);
  --rs-focus-ring: 0 0 0 2px rgba(255, 59, 63, 0.45);

  --rs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --rs-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --rs-shadow-red: 0 4px 14px rgba(215, 25, 32, 0.35);

  --rs-radius-xs: 3px;
  --rs-radius-sm: 4px;
  --rs-radius-md: 6px;
  --rs-radius-lg: 8px;
  --rs-radius-pill: 999px;

  /* ---------- Typography ---------- */
  --rs-font-arabic: 'Cairo', 'Barlow', system-ui, sans-serif;
  --rs-font-latin: 'Barlow', 'Cairo', system-ui, sans-serif;
  --rs-font-display: 'Barlow Condensed', 'Barlow', sans-serif;
  --rs-font-body: var(--rs-font-arabic);

  /* ---------- Layout (measured at 1024 px reference width) ---------- */
  --rs-container-max: none;      /* full browser width */
  --rs-gutter: 18px;            /* page side padding */
  --rs-col-gap: 17px;           /* sidebar ↔ main */
  --rs-sidebar-w: clamp(197px, 20%, 270px);   /* 197 px at the 1024 px reference, capped on wide screens */
  --rs-header-h: 116px;
  --rs-logo-h: 104px;
  --rs-header-side-w: 250px;   /* logo slot = language + account width, keeps the nav centred */
  --rs-nav-item-w: 125px;
  --rs-hero-ratio: 774 / 277;
  --rs-hero-max-h: 240px;       /* banner height cap (was 340 px) */
  --rs-search-h: 48px;
  --rs-search-btn-w: 125px;
  --rs-toolbar-h: 38px;
  --rs-card-gap-x: 16px;
  --rs-card-gap-y: 13px;
  --rs-card-cols: 3;            /* 3 at the 1024 px reference; 4 from 1300 px, 6 from 1800 px (see motorcycle-card.css) */
  --rs-card-img-ratio: 247 / 162;
  --rs-pager-size: 34px;
  --rs-sidebar-item-h: 34px;
  --rs-sidebar-pad: 12px;

  --rs-space-1: 4px;
  --rs-space-2: 8px;
  --rs-space-3: 12px;
  --rs-space-4: 14px;
  --rs-space-5: 20px;
  --rs-space-6: 24px;

  --rs-text-dir: ltr;
}

html[dir="rtl"] {
  --rs-text-dir: rtl;
}

html[lang="en"] {
  --rs-font-body: var(--rs-font-latin);
}

/* ---------- Bootstrap variable bridge (no default blue) ---------- */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--rs-bg);
  --bs-body-color: var(--rs-text);
  --bs-body-font-family: var(--rs-font-body);
  --bs-primary: var(--rs-racing-red);
  --bs-primary-rgb: 215, 25, 32;
  --bs-danger: var(--rs-racing-red);
  --bs-danger-rgb: 215, 25, 32;
  --bs-link-color: var(--rs-text);
  --bs-link-color-rgb: 255, 255, 255;
  --bs-link-hover-color: var(--rs-signal-red);
  --bs-link-hover-color-rgb: 255, 59, 63;
  --bs-border-color: var(--rs-border);
  --bs-secondary-color: var(--rs-text-muted);
  --bs-tertiary-bg: var(--rs-graphite);
  --bs-focus-ring-color: rgba(255, 59, 63, 0.45);
  --bs-emphasis-color: var(--rs-text);
}

/* =====================================================================
   Theme-aware tokens (dark = approved default, light = optional).
   The theme is set on <html data-theme="dark|light"> by the layout from the
   "rs_theme" cookie; components only use the tokens below.
   ===================================================================== */
:root, [data-theme="dark"] {
  --rs-line: var(--rs-gunmetal);                 /* borders, separators, tracks */
  --rs-silver: var(--rs-chrome-silver);          /* secondary icons, hover borders, checkbox outlines */
  --rs-surface-2: var(--rs-graphite);            /* image placeholders, progress tracks, chips */
  --rs-head-bg: linear-gradient(180deg, #121316 0%, var(--rs-jet-black) 100%);
  --rs-footer-bg: linear-gradient(180deg, #111215 0%, var(--rs-jet-black) 100%);
  --rs-strip-bg: linear-gradient(180deg, #0f1012, var(--rs-jet-black));
  --rs-header-border: transparent;
  --rs-footer-bottom: rgba(0, 0, 0, .35);
  --rs-table-head: rgba(28, 29, 32, .6);
  --rs-dropzone-bg: rgba(28, 29, 32, .5);
  --rs-tint-bg: rgba(196, 199, 204, .06);
  --rs-tint-border: rgba(196, 199, 204, .25);
  --rs-ok: #4ade80;
  --rs-warn: #facc15;
  --rs-info: #93c5fd;
  --rs-wa-icon: #25D366;
  --rs-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --rs-chevron-muted: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C4C7CC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  color-scheme: dark;
}

/* Light theme — built from the brand sheet's light tones (#F4F5F7, #E3E5E8, Chrome Silver, Gunmetal).
   Racing Red replaces Signal Red for red text (Signal Red is "red text on black only"). */
[data-theme="light"] {
  --rs-bg: #F4F5F7;
  --rs-bg-secondary: #FFFFFF;
  --rs-card-bg: #FFFFFF;
  --rs-panel-bg: #FFFFFF;
  --rs-input-bg: #F4F5F7;
  --rs-input-bg-hover: #E3E5E8;

  --rs-border: #E3E5E8;
  --rs-border-strong: #C4C7CC;
  --rs-divider: #E3E5E8;

  --rs-text: #0B0B0C;
  --rs-text-secondary: #3A3D42;
  --rs-text-muted: #5C6168;          /* Gunmetal ↔ Steel, 6:1 on white */
  --rs-text-subtle: #6E737A;         /* 4.7:1 on white */
  --rs-price: var(--rs-racing-red);
  --rs-nav-active: var(--rs-racing-red);
  --rs-hover-bg: rgba(11, 11, 12, .05);
  --rs-focus-ring: 0 0 0 2px rgba(215, 25, 32, .35);

  --rs-shadow-sm: 0 1px 2px rgba(11, 11, 12, .08);
  --rs-shadow-md: 0 6px 18px rgba(11, 11, 12, .08);

  --rs-line: #C4C7CC;
  --rs-silver: #5C6168;
  --rs-surface-2: #ECEDF0;
  --rs-head-bg: linear-gradient(180deg, #FFFFFF 0%, #F4F5F7 100%);
  --rs-footer-bg: linear-gradient(180deg, #FFFFFF 0%, #F4F5F7 100%);
  --rs-strip-bg: #FFFFFF;
  --rs-header-border: #E3E5E8;
  --rs-footer-bottom: #ECEDF0;
  --rs-table-head: #F4F5F7;
  --rs-dropzone-bg: #F4F5F7;
  --rs-tint-bg: rgba(58, 61, 66, .05);
  --rs-tint-border: rgba(58, 61, 66, .18);
  --rs-ok: #15803d;
  --rs-warn: #a16207;
  --rs-info: #1d4ed8;
  --rs-wa-icon: #1fa855;
  --rs-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230B0B0C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --rs-chevron-muted: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235C6168' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  color-scheme: light;
}

[data-bs-theme="light"] {
  --bs-body-bg: var(--rs-bg);
  --bs-body-color: var(--rs-text);
  --bs-body-font-family: var(--rs-font-body);
  --bs-primary: var(--rs-racing-red);
  --bs-primary-rgb: 215, 25, 32;
  --bs-link-color: var(--rs-text);
  --bs-link-color-rgb: 11, 11, 12;
  --bs-link-hover-color: var(--rs-racing-red);
  --bs-link-hover-color-rgb: 215, 25, 32;
  --bs-border-color: var(--rs-border);
  --bs-secondary-color: var(--rs-text-muted);
  --bs-tertiary-bg: var(--rs-surface-2);
  --bs-focus-ring-color: rgba(215, 25, 32, .35);
  --bs-emphasis-color: var(--rs-text);
}