/* MatjariIQ design tokens — the single source of truth.
   Every color, radius, shadow and spacing step used anywhere in the app
   must come from here. No hard-coded values in views or site.css. */
:root {
  /* Color — Spring green on pure white (owner-chosen final design, 2026-08-12).
     Rules:
     - The canvas is PURE WHITE. Subtle fills use --bg-2, active tints use --tint.
     - --brand is bright, so text ON brand fills must be --on-brand (dark), never white.
     - Text links, prices and active labels on white use --brand-dark for contrast. */
  --brand: #00C853;        /* Spring green: buttons, active fills, logo, FAB */
  --brand-down: #00B04A;   /* pressed/hover state of brand fills */
  --brand-dark: #007430;   /* prices, links, active text on white */
  --on-brand: #0A2415;     /* text/icons sitting on a --brand fill */
  --tint: #E5FAEE;         /* pale green: active/selected backgrounds, focus rings */
  --accent: var(--brand);        /* legacy alias — accent elements follow brand now */
  --accent-down: var(--brand-down);
  --bg: #FFFFFF;           /* pure white canvas */
  --bg-2: #F5F6F7;         /* neutral hover/subtle fill on white */
  --surface: #FFFFFF;
  --text: #181B1E;
  --text-2: #68707A;
  --line: #E7E9EC;
  --danger: #C93A3A;
  --heart: #E23D3D;        /* favorite heart when active */
  --info: #3E7BC0;         /* "painted" state on the car part diagram */
  --scrim: rgba(255, 255, 255, 0.82); /* full-page loading overlay backdrop */

  /* Shape */
  --r: 16px;
  --shadow-card: 0 1px 3px rgba(20, 25, 30, 0.06);
  --shadow-card-hover: 0 10px 26px rgba(20, 25, 30, 0.10);

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;

  /* Type scale */
  --fs-meta: 13px;
  --fs-body: 15px;
  --fs-card-title: 17px;
  --fs-price: 18px;
  --fs-page-title: 22px;
  --fs-login-title: 28px;

  --font: "IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
}

/* Car color swatches on the post form (content data — what a "red" car looks like — not UI palette). */
:root {
  --sw-black: #1A1A1A;
  --sw-white: #FFFFFF;
  --sw-gray: #7D848C;
  --sw-silver: #C9CED3;
  --sw-gold: #C9A227;
  --sw-blue: #1F5FBF;
  --sw-red: #C0392B;
  --sw-green: #2E8B57;
  --sw-yellow: #F2C230;
  --sw-orange: #E8772E;
  --sw-pink: #E58BB5;
  --sw-purple: #6F42C1;
  --sw-brown: #7B4A2D;
  --sw-beige: #E4D3B5;
  --sw-other: #F5F6F7;
}