/**
 * CSS Custom Properties (Variables)
 * Design System - Vercel / Stripe Dashboard-inspired
 *
 * Två lager:
 *  1. Globala tokens (spacing, radii, shadows, typografi) — samma överallt
 *  2. Tema-tokens (--cms-bg, --cms-text, --cms-accent, --cms-brand) — sätts per byrå
 *
 * Tema-tokens sätts i includes/admin-bar.php baserat på agency-config.
 * Detta gör att PEYS (ljust) och GRW (mörkt) båda fungerar utan olika CSS-filer.
 */

:root {
  /* ========== Primary brand palette (frontend site) ========== */
  --color-primary: #800000;
  --color-primary-dark: #6d0000;
  --color-primary-light: #993333;
  --color-secondary: #111827;
  --color-secondary-dark: #0e1421;
  --color-accent: #f9fafb;

  /* ========== Neutrals (Zinc palette) ========== */
  --color-gray-50: #fafafa;
  --color-gray-100: #f4f4f5;
  --color-gray-200: #e4e4e7;
  --color-gray-300: #d4d4d8;
  --color-gray-400: #a1a1aa;
  --color-gray-500: #71717a;
  --color-gray-600: #52525b;
  --color-gray-700: #3f3f46;
  --color-gray-800: #27272a;
  --color-gray-900: #18181b;

  /* ========== Semantic ========== */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* ========== Page bg/fg (frontend defaults) ========== */
  --color-background: #ffffff;
  --color-foreground: #18181b;

  /* ========== Typography ========== */
  --font-primary: 'General Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'General Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Font sizes — tightare skala (Vercel-stil) */
  --text-xs: 0.75rem;       /* 12 */
  --text-sm: 0.8125rem;     /* 13 — dashboard-body */
  --text-base: 0.875rem;    /* 14 — standard dashboard-text */
  --text-md: 0.9375rem;     /* 15 */
  --text-lg: 1rem;          /* 16 */
  --text-xl: 1.125rem;      /* 18 */
  --text-2xl: 1.375rem;     /* 22 — subtitles */
  --text-3xl: 1.75rem;      /* 28 — titles */
  --text-4xl: 2.25rem;      /* 36 — page heading */
  --text-5xl: 3rem;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ========== Spacing (8px-baserad + finkorn) ========== */
  --space-0: 0;
  --space-1: 0.25rem;       /*  4 */
  --space-2: 0.5rem;        /*  8 */
  --space-3: 0.75rem;       /* 12 */
  --space-4: 1rem;          /* 16 */
  --space-5: 1.25rem;       /* 20 */
  --space-6: 1.5rem;        /* 24 */
  --space-8: 2rem;          /* 32 */
  --space-10: 2.5rem;       /* 40 */
  --space-12: 3rem;         /* 48 */
  --space-16: 4rem;         /* 64 */
  --space-20: 5rem;
  --space-24: 6rem;

  /* Legacy alias — behåll för bakåtkompatibilitet */
  --spacing-0: 0;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;

  /* ========== Border radius ========== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Knapp-radius kan konfigureras per sajt — default rounded */
  --button-radius: 9999px;
  --button-style: filled;

  /* ========== Shadows (Vercel-stil: subtila, fokusera på borders istället) ========== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.14);

  /* ========== Transitions (legacy — använd --dur-* + --ease-* från animations.css) ========== */
  --transition-fast: 160ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 280ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 400ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ========== Container ========== */
  --container-max-width: 900px;
  --section-padding: 6rem;
  --container-padding: var(--spacing-4);

  /* ========== CMS tema-tokens (default: ljust — PEYS-nya-defaulten) ========== */
  /* Dessa överrids av admin-bar.php inline-style för GRW (mörkt) */
  --cms-bg: #FFFFFF;
  --cms-surface: #FAFAFA;
  --cms-surface-hover: #F4F4F5;
  --cms-surface-active: #E4E4E7;
  --cms-border: rgba(10, 10, 10, 0.08);
  --cms-border-strong: rgba(10, 10, 10, 0.14);
  --cms-text: #0A0A0A;
  --cms-text-muted: #52525B;
  --cms-text-subtle: #A1A1AA;
  --cms-brand: #033234;       /* PEYS brand-grönt för kort/badges */
  --cms-accent: #379b83;      /* PEYS CTA-färg */
  --cms-accent-hover: #2d8470;
  --cms-accent-text: #FFFFFF; /* Text-färg på accent-bakgrund */
  --cms-font: 'DM Sans', sans-serif;
  --cms-font-heading: 'Space Grotesk', sans-serif;
}