/* JAC Motors West Rand – Design Tokens (CSS Variables)
   Scope: Global tokens for colours, typography, spacing, radii, shadows, layout, and components.
   Usage: Attach to :root in main theme stylesheet. */

:root {
  /* Brand Colours */
  --jac-red: #CC000E;
  --jac-red-rgb: 204, 0, 14;
  --jac-brand-red: var(--jac-red);
  --jac-red-dark: var(--jac-red);

  /* Neutral Palette */
  --jac-white: #ffffff;
  --jac-white-rgb: 255, 255, 255;
  --jac-black: #04070c;
  --jac-black-rgb: 4, 7, 12;
  --jac-true-black: #000000;
  --jac-true-black-rgb: 0, 0, 0;
  --jac-ink: #111827;
  --jac-ink-rgb: 17, 24, 39;
  --jac-grey-700: #374151;
  --jac-grey-700-rgb: 55, 65, 81;
  --jac-grey-600: #4b5563;
  --jac-grey-600-rgb: 75, 85, 99;
  --jac-grey-500: #6b7280;
  --jac-grey-500-rgb: 107, 114, 128;
  --jac-grey-400: #9ca3af;
  --jac-grey-400-rgb: 156, 163, 175;
  --jac-border-strong: #d1d5db;
  --jac-border-strong-rgb: 209, 213, 219;
  --jac-border: #e5e7eb;
  --jac-border-rgb: 229, 231, 235;
  --jac-grey-200: var(--jac-border);
  --jac-surface-soft: #f3f4f6;
  --jac-surface-soft-rgb: 243, 244, 246;
  --jac-surface-muted: #f9fafb;
  --jac-surface-muted-rgb: 249, 250, 251;
  --jac-surface: var(--jac-white);
  --jac-surface-rgb: 255, 255, 255;
  --jac-surface-1: var(--jac-surface);
  --jac-surface-1-rgb: var(--jac-surface-rgb);
  --jac-surface-2: var(--jac-surface-soft);
  --jac-surface-2-rgb: var(--jac-surface-soft-rgb);
  --jac-border-subtle: rgba(var(--jac-true-black-rgb), 0.06);

  /* Semantic Colours */
  --jac-status-error: var(--jac-red);
  --jac-status-error-rgb: var(--jac-red-rgb);
  --jac-status-error-strong: var(--jac-red);
  --jac-status-error-strong-rgb: var(--jac-red-rgb);
  --jac-status-success: #10b981;
  --jac-status-success-rgb: 16, 185, 129;
  --jac-status-success-strong: #166534;
  --jac-status-success-strong-rgb: 22, 101, 52;
  --jac-status-info: #1e40af;
  --jac-status-info-rgb: 30, 64, 175;
  --jac-warning: #eab308;
  --jac-warning-rgb: 234, 179, 8;
  --jac-warning-surface: #fffbeb;
  --jac-warning-surface-rgb: 255, 251, 235;

  /* Accent / Utility */
  --jac-surface-alt: #f0f2f5;
  --jac-surface-alt-rgb: 240, 242, 245;
  --jac-graphite: #3c3c3c;
  --jac-graphite-rgb: 60, 60, 60;
  --jac-graphite-strong: #242526;
  --jac-graphite-strong-rgb: 36, 37, 38;
  --jac-whatsapp-green: #25d366;
  --jac-whatsapp-green-rgb: 37, 211, 102;
  --jac-whatsapp-green-strong: #20ba5a;
  --jac-whatsapp-green-strong-rgb: 32, 186, 90;
  --jac-green: #10b981;
  --jac-blue: #3b82f6;
  --jac-purple: #8b5cf6;

  /* Alpha Tokens – Brand Red */
  --jac-red-a04: rgba(var(--jac-red-rgb), 0.04);
  --jac-red-a05: rgba(var(--jac-red-rgb), 0.05);
  --jac-red-a10: rgba(var(--jac-red-rgb), 0.1);
  --jac-red-a12: rgba(var(--jac-red-rgb), 0.12);
  --jac-red-a20: rgba(var(--jac-red-rgb), 0.2);
  --jac-red-a25: rgba(var(--jac-red-rgb), 0.25);
  --jac-red-a30: rgba(var(--jac-red-rgb), 0.3);
  --jac-red-a35: rgba(var(--jac-red-rgb), 0.35);
  --jac-red-a40: rgba(var(--jac-red-rgb), 0.4);
  --jac-red-a70: rgba(var(--jac-red-rgb), 0.7);
  --jac-red-a72: rgba(var(--jac-red-rgb), 0.72);
  --jac-red-a80: rgba(var(--jac-red-rgb), 0.8);
  --jac-red-a82: rgba(var(--jac-red-rgb), 0.82);
  --jac-red-a85: rgba(var(--jac-red-rgb), 0.85);
  --jac-red-a88: rgba(var(--jac-red-rgb), 0.88);

  /* Alpha Tokens – Neutrals */
  --jac-true-black-a02: rgba(var(--jac-true-black-rgb), 0.02);
  --jac-true-black-a03: rgba(var(--jac-true-black-rgb), 0.03);
  --jac-true-black-a04: rgba(var(--jac-true-black-rgb), 0.04);
  --jac-true-black-a05: rgba(var(--jac-true-black-rgb), 0.05);
  --jac-true-black-a06: rgba(var(--jac-true-black-rgb), 0.06);
  --jac-true-black-a08: rgba(var(--jac-true-black-rgb), 0.08);
  --jac-true-black-a10: rgba(var(--jac-true-black-rgb), 0.1);
  --jac-true-black-a12: rgba(var(--jac-true-black-rgb), 0.12);
  --jac-true-black-a15: rgba(var(--jac-true-black-rgb), 0.15);
  --jac-true-black-a20: rgba(var(--jac-true-black-rgb), 0.2);
  --jac-true-black-a25: rgba(var(--jac-true-black-rgb), 0.25);
  --jac-true-black-a30: rgba(var(--jac-true-black-rgb), 0.3);
  --jac-true-black-a35: rgba(var(--jac-true-black-rgb), 0.35);
  --jac-true-black-a40: rgba(var(--jac-true-black-rgb), 0.4);
  --jac-true-black-a50: rgba(var(--jac-true-black-rgb), 0.5);
  --jac-true-black-a55: rgba(var(--jac-true-black-rgb), 0.55);
  --jac-true-black-a60: rgba(var(--jac-true-black-rgb), 0.6);
  --jac-true-black-a70: rgba(var(--jac-true-black-rgb), 0.7);
  --jac-true-black-a75: rgba(var(--jac-true-black-rgb), 0.75);
  --jac-true-black-a80: rgba(var(--jac-true-black-rgb), 0.8);

  --jac-black-a82: rgba(var(--jac-black-rgb), 0.82);
  --jac-ink-a05: rgba(var(--jac-ink-rgb), 0.05);
  --jac-ink-a06: rgba(var(--jac-ink-rgb), 0.06);
  --jac-ink-a08: rgba(var(--jac-ink-rgb), 0.08);
  --jac-ink-a12: rgba(var(--jac-ink-rgb), 0.12);

  --jac-white-a10: rgba(var(--jac-white-rgb), 0.1);
  --jac-white-a20: rgba(var(--jac-white-rgb), 0.2);
  --jac-white-a30: rgba(var(--jac-white-rgb), 0.3);
  --jac-white-a50: rgba(var(--jac-white-rgb), 0.5);
  --jac-white-a70: rgba(var(--jac-white-rgb), 0.7);
  --jac-white-a80: rgba(var(--jac-white-rgb), 0.8);
  --jac-white-a90: rgba(var(--jac-white-rgb), 0.9);
  --jac-white-a95: rgba(var(--jac-white-rgb), 0.95);

  --jac-graphite-a15: rgba(var(--jac-graphite-rgb), 0.15);
  --jac-graphite-strong-a95: rgba(var(--jac-graphite-strong-rgb), 0.95);

  /* Button Tokens */
  --btn-height-sm: 2.75rem;     /* 44px */
  --btn-height-lg: 3.5rem;      /* 56px */
  --btn-padding-sm: 1rem;       /* 16px */
  --btn-padding-lg: 1.75rem;    /* 28px */
  --btn-font-size-sm: 0.875rem; /* 14px */
  --btn-font-size-lg: 1.125rem; /* 18px */
  --btn-focus-ring-width: 0.125rem;   /* 2px */
  --btn-focus-ring-offset: 0.125rem;  /* 2px */
  --btn-focus-ring-shadow: 0 0 0 0.25rem var(--jac-red-a20); /* 4px spread */

  /* Hero CTA Tokens */
  --jac-hero-secondary-text: var(--jac-white);
  --jac-hero-secondary-border: var(--jac-white-a90);
  --jac-hero-secondary-bg: var(--jac-white-a20);
  --jac-hero-secondary-bg-hover: var(--jac-white-a30);
  --jac-hero-secondary-text-hover: var(--jac-white);
  --jac-hero-secondary-border-hover: var(--jac-white);
  --jac-text-on-dark: var(--jac-white);
  --jac-text-on-dark-muted: var(--jac-white-a80);
  --jac-hero-overlay: linear-gradient(
    120deg,
    rgba(var(--jac-true-black-rgb), 0.78) 0%,
    rgba(var(--jac-true-black-rgb), 0.55) 52%,
    rgba(var(--jac-true-black-rgb), 0.24) 100%
  );
  --jac-hero-panel-bg: rgba(var(--jac-ink-rgb), 0.6);
  --jac-hero-panel-border: rgba(var(--jac-white-rgb), 0.18);
  --jac-hero-panel-blur: 18px;
  --jac-hero-cta-secondary-bg: var(--jac-hero-secondary-bg);
  --jac-hero-cta-secondary-border: var(--jac-hero-secondary-border);
  --jac-hero-cta-secondary-text: var(--jac-hero-secondary-text);
  --jac-hero-control-bg: var(--jac-white-a20);
  --jac-hero-control-bg-hover: var(--jac-white-a30);
  --jac-hero-control-border: var(--jac-white-a50);
  --jac-hero-control-border-hover: var(--jac-white);
  --jac-hero-control-icon: var(--jac-white);
  --jac-hero-dot-bg: var(--jac-white-a20);
  --jac-hero-dot-border: var(--jac-white-a50);
  --jac-hero-dot-active-bg: var(--jac-white);
  --jac-hero-dot-active-border: var(--jac-white);
  --jac-hero-dot-focus: var(--jac-white);
  --homepage-trust-intro-max-width: 22rem;
  --homepage-trust-card-min-width: 13.75rem;

  /* Alpha Tokens – Utility & Accents */
  --jac-whatsapp-green-a00: rgba(var(--jac-whatsapp-green-rgb), 0);
  --jac-whatsapp-green-a40: rgba(var(--jac-whatsapp-green-rgb), 0.4);
  --jac-whatsapp-green-a50: rgba(var(--jac-whatsapp-green-rgb), 0.5);
  --jac-whatsapp-green-a70: rgba(var(--jac-whatsapp-green-rgb), 0.7);
  --jac-status-success-strong-a10: rgba(var(--jac-status-success-strong-rgb), 0.1);
  --jac-status-info-a05: rgba(var(--jac-status-info-rgb), 0.05);
  --jac-status-info-a75: rgba(var(--jac-status-info-rgb), 0.75);

  /* Typography */
  --font-family-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-h1: 3rem;      /* ~48px */
  --font-size-h2: 2rem;      /* ~32px */
  --font-size-h3: 1.5rem;    /* ~24px */
  --font-size-body: 1rem;    /* 16px */
  --font-size-small: 0.875rem; /* 14px */

  --line-height-tight: 1.1;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing Scale */
  --space-2: 0.125rem;   /* 2px */
  --space-4: 0.25rem;    /* 4px */
  --space-8: 0.5rem;     /* 8px */
  --space-12: 0.75rem;   /* 12px */
  --space-16: 1rem;      /* 16px */
  --space-24: 1.5rem;    /* 24px */
  --space-32: 2rem;      /* 32px */
  --space-40: 2.5rem;    /* 40px */
  --space-48: 3rem;      /* 48px */
  --space-72: 4.5rem;    /* 72px */
  --space-64: 4rem;      /* 64px */
  --space-96: 6rem;      /* 96px */

  /* Layout & Containers */
  --page-max-width: 1200px;
  --grid-gap: var(--space-24);
  --content-max-width: 72rem;
  --section-padding-x: var(--space-24);
  --section-padding-y: var(--space-64);
  --section-padding-tight: 3.5rem;
  --section-padding-spacious: 5rem;
  --section-gap: var(--space-32);
  --surface-radius: var(--radius-lg);

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 4px 12px var(--jac-true-black-a06);
  --shadow-card-hover: 0 8px 20px var(--jac-true-black-a12);
  --shadow-soft: 0 2px 6px var(--jac-true-black-a08);
  --shadow-modal: 0 20px 40px var(--jac-true-black-a20);

  /* Transitions */
  --transition-fast: 150ms ease-out;
  --transition-normal: 200ms ease-out;
  --transition-slow: 300ms ease-out;

  /* Hover Effects */
  --hover-lift: translateY(-2px);

  /* Modals & Overlays */
  --modal-overlay-bg: var(--jac-true-black-a80);
  --modal-overlay-blur: 8px;

  /* Hero & Premium Sections */
  --hero-overlay-gradient: linear-gradient(90deg, rgba(var(--jac-black-rgb), 0.72) 0%, rgba(var(--jac-black-rgb), 0.48) 38%, rgba(var(--jac-black-rgb), 0.2) 100%);
  --homepage-hero-overlay-gradient: linear-gradient(115deg, rgba(var(--jac-true-black-rgb), 0.82) 0%, rgba(var(--jac-true-black-rgb), 0.55) 55%, rgba(var(--jac-true-black-rgb), 0.25) 100%);
  --aspect-hero: 56.25%; /* 16:9 aspect ratio for padding-top approach */

  /* Breakpoints */
  --bp-mobile: 600px;
  --bp-tablet: 992px;
  --bp-desktop: 1200px;

  /* Component – Cards */
  --card-radius: var(--radius-lg);
  --card-padding-y: var(--space-32);
  --card-padding-x: var(--space-32);
  --card-shadow: var(--shadow-card);
  --card-bg: var(--jac-white);
  --card-gap: var(--space-16);

  /* Component – Badges & Chips */
  --badge-bg-soft: var(--jac-red-a05);
  --badge-color-strong: var(--jac-red);
  --badge-border: var(--jac-red-a20);
  --badge-radius: var(--radius-pill);

  /* Component – Icon Holders */
  --icon-holder-size: 3rem;
  --icon-holder-radius: var(--radius-lg);
  --icon-holder-bg: var(--jac-surface-muted);
  --icon-holder-border: var(--jac-border-subtle);
  --icon-holder-color: var(--jac-red);
  --icon-size-feature: var(--space-32);
  --icon-size-trust: 1.75rem;

  /* Component – CTA Strip */
  --cta-strip-bg: var(--jac-ink);
  --cta-strip-color: var(--jac-white);
  --cta-strip-panel-bg: var(--jac-white-a10);

  /* Component – Buttons */
  --btn-height: 3rem; /* 48px */
  --btn-radius: var(--radius-md);
  --btn-font-size: var(--font-size-body);
  --btn-padding-x: var(--space-24);

  /* Component – Tabs */
  --tabs-height: 3.25rem; /* ~52px */
  --tabs-border-color: var(--jac-grey-200);
  --tabs-active-underline: var(--jac-red);

  /* Component – Hero System v1 */
  --hero-gradient-opacity: 0.25; /* used in overlays */
  --hero-height-desktop: 70vh;
  --hero-height-mobile: 60vh;
  --hero-overlay: rgba(var(--jac-true-black-rgb), var(--hero-gradient-opacity));

  /* Hero System v1 - Sizing */
  --hero-min-height: 20rem; /* Base minimum height (320px) */
  --hero-min-height-tall: 24rem; /* Homepage-style tall (384px) */
  --hero-min-height-compact: 14rem; /* Compact utility pages (224px) */
  --hero-min-height-minimal: auto; /* VDP image-only */

  /* Hero System v1 - Spacing */
  --hero-padding-y: var(--space-64); /* 4rem default vertical padding */
  --hero-padding-y-tall: var(--space-72); /* 4.5rem tall variant */
  --hero-padding-y-compact: var(--space-40); /* 2.5rem compact variant */

  /* Hero System v1 - Content Width */
  --hero-content-max-width: 44rem; /* Already exists, keeping for reference */

  /* Hero System v1 - Theme Overlays */
  --hero-overlay-on-light: transparent;
  --hero-overlay-on-dark: rgba(var(--jac-ink-rgb), 0.92);
  --hero-overlay-on-image: linear-gradient(
    115deg,
    rgba(var(--jac-true-black-rgb), 0.82) 0%,
    rgba(var(--jac-true-black-rgb), 0.55) 55%,
    rgba(var(--jac-true-black-rgb), 0.25) 100%
  );
}

/* Note: Tokens only. Component styling lives in style.css. */