/*
  Khulasa Design System
  ---------------------
  Every color, font, spacing value, and radius used across the site is
  defined here as a CSS variable. To restyle the site, change values
  in this file only — never hardcode a color or size in site.css,
  components.css, or an individual template.
*/

:root {
  /* Color: restrained, automotive-editorial palette (no purple/blue AI gradients) */
  --color-bg: #fbfaf8;
  --color-surface: #ffffff;
  --color-surface-alt: #f3f1ed;
  --color-border: #dedad2;
  --color-border-strong: #c7c2b8;

  --color-text: #23211d;
  --color-text-muted: #635e54;
  --color-text-faint: #948e80;

  --color-primary: #8a3324;      /* deep rust/brick — automotive, not tech-blue */
  --color-primary-hover: #6f2a1c;
  --color-primary-contrast: #fffaf7;

  --color-accent: #2f5233;       /* muted racing green, used sparingly */
  --color-success: #2f6b3a;
  --color-error: #a3312a;
  --color-warning: #93650f;

  --color-focus-ring: #8a3324;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius — kept small; not the rounded-everywhere AI look */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Shadow — used sparingly, only where it adds real depth cues */
  --shadow-sm: 0 1px 2px rgba(35, 33, 29, 0.06);
  --shadow-md: 0 2px 8px rgba(35, 33, 29, 0.08);

  /* Layout */
  --container-max: 1120px;
  --container-narrow: 760px;

  --border-width: 1px;
}