/* ──────────────────────────────────────────────────────────────────
   CJS Distribucija — Design tokens
   CSS custom properties; palette swap via [data-palette]
   Source of truth: theme.json + design_theme/styles.css
   ────────────────────────────────────────────────────────────────── */

:root {
  /* default palette: KRUŠNI (warm bread) */
  --bg:           #FAFAF7;
  --bg-soft:      #EFE7D6;
  --bg-deep:      #1A1714;
  --fg:           #1A1714;
  --fg-muted:     #6B5F4F;
  --fg-soft:      #8C8070;
  --line:         rgba(26,23,20,0.14);
  --line-soft:    rgba(26,23,20,0.07);
  --accent:       #A8823A;     /* antique gold */
  --accent-2:     #D4B262;     /* champagne gold */
  --on-deep:      #F4EEE3;
  --on-deep-mut:  rgba(244,238,227,0.55);

  /* type — self-hosted via fonts.css */
  --serif:  'Lora', Georgia, 'Times New Roman', serif;
  --sans:   'Open Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:   ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* spacing scale (airy default) */
  --pad-section:   clamp(64px, 7vw, 112px);
  --pad-x:         clamp(24px, 5vw, 88px);
  --gap-card:      28px;
  --radius:        4px;
  --radius-lg:     14px;
}

[data-palette="oljka"] {
  --bg:           #EDEEE6;
  --bg-soft:      #DEE0D2;
  --bg-deep:      #1F2218;
  --fg:           #1F2218;
  --fg-muted:     #5C6453;
  --fg-soft:      #818876;
  --line:         rgba(31,34,24,0.14);
  --line-soft:    rgba(31,34,24,0.07);
  --accent:       #5C6B3A;
  --accent-2:     #A0894A;
  --on-deep:      #EDEEE6;
  --on-deep-mut:  rgba(237,238,230,0.55);
}

[data-palette="sodobno"] {
  --bg:           #FAFAF7;
  --bg-soft:      #EFEFEA;
  --bg-deep:      #14181D;
  --fg:           #14181D;
  --fg-muted:     #5A6168;
  --fg-soft:      #8B9098;
  --line:         rgba(20,24,29,0.12);
  --line-soft:    rgba(20,24,29,0.06);
  --accent:       #1B4A8C;
  --accent-2:     #DD6B3F;
  --on-deep:      #FAFAF7;
  --on-deep-mut:  rgba(250,250,247,0.55);
}

[data-density="compact"] {
  --pad-section:   clamp(48px, 5vw, 80px);
  --pad-x:         clamp(20px, 4vw, 64px);
  --gap-card:      20px;
}