/*
 * File: css/conf/00-base/00.variables.css
 * Logic: Centralized Design Tokens (Primitives & Semantics).
 * Purpose: Single Source of Truth for the entire theme.
 * Refactored from: templates/css-refactoring/old/css/config-css/_base/06.tokens.css
 */

:root {
  /* ==========================================================================
     1. PRIMITIVES (Raw Values)
     ========================================================================== */

  /* 1.1 Colors */
  --color-primary: #333333;
  --color-secondary: #660000;
  --color-black: #000;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --bg-body: #ffffff;
  --bg-gray-light: #f8f8f8;
  --bg-gray-lighter: #f0f0f0;
  --bg-success-light: #f0fff4;
  --bg-warning-light: #fffaf0;
  --bg-error-light: #fff5f5;
  --border-light: #dddddd;
  --border-subtle: rgba(0, 0, 0, 0.03);
  --border-on-dark: rgba(255, 255, 255, 0.1);
  --text-main: #333333;
  --text-on-dark: #ffffff;
  --color-white-t-90: rgba(255, 255, 255, 0.9);
  --color-white-t-80: rgba(255, 255, 255, 0.8);
  --color-white-t-50: rgba(255, 255, 255, 0.5);
  --color-white-t-20: rgba(255, 255, 255, 0.2);
  --palette-accent-dark: #4d0000; /* Darker shade of secondary for gradients */
  --overlay-standard: rgba(0, 0, 0, 0.7);
  --overlay-medium: rgba(0, 0, 0, 0.6);
  --overlay-strong: rgba(0, 0, 0, 0.8);

  /* 1.3 Typography Scale */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem;
  --font-size-h1: 1.8rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;

  /* 1.4 Typography Extended */
  --font-weight-semibold: 600;
  --letter-spacing-sm: 1px;

  /* 1.5 Spacing (Gap) */
  --space-xs: 5px;
  --space-sm: 10px;
  --space-md: 15px;
  --space-lg: 30px;
  --space-xl: 50px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* 1.6 Layout */
  --sidebar-width: 300px;
  --container-max-width: 1280px;
  --container-text-width: 800px; /* Standard reading width */
  --container-text-width-sm: 650px;
  --header-height: 100px;
  --header-logo-height: 80px;
  --drawer-width: 320px;
  --btn-size-square: 40px;
  --admin-toolbar-height: 79px; /* Drupal default */
  --burger-width: 30px;
  --burger-height: 22px;
  --burger-line-height: 3px;
  --separator-width: 60px;
  --separator-height: 4px;
  --slideshow-height-mobile: 80vh;
  --slideshow-video-height-mobile: 120%;
  --map-height-desktop: 450px;
  --map-height-mobile: 300px;

  /* 1.7 Border Widths */
  --border-width-sm: 1px;
  --border-width-md: 2px;
  --border-width-lg: 5px;

  /* 1.8 Icon Sizes */
  --icon-size-sm: 18px;
  --icon-size-base: 20px;
  --icon-size-md: 25px;
  --icon-size-faq: 24px;

  /* 1.9 Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 50px;
  --radius-circle: 50%;

  /* 1.10 Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card-idle: 0 10px 25px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 15px 30px rgba(0, 0, 0, 0.1);
  --shadow-strong: 0 20px 40px rgba(0, 0, 0, 0.2);
  --shadow-focus: 0 0 0 3px rgba(102, 0, 0, 0.2);
  --shadow-modal: 0 10px 25px rgba(0, 0, 0, 0.2);
  --shadow-reopen: 0 5px 15px rgba(0, 0, 0, 0.1);
  --shadow-reopen-hover: 0 8px 20px rgba(0, 0, 0, 0.2);

  /* 1.11 Z-Index */
  --z-negative: -1;
  --z-base: 0;
  --z-normal: 1;
  --z-slide-overlay: 10;
  --z-slide-caption: 20;
  --z-header: 1000;
  --z-scroll-top: 900;
  --z-overlay: 1900;
  --z-drawer: 2000;
  --z-modal: 9000;
  --z-accessibility: 9500;
  --z-cookie: 9999;

  /* 1.12 Animation Primitives */
  --transition-main: all 0.4s ease-out;
  --bg-slide-size: 200% 100%;
  --bg-slide-pos-start: 100% 0;
  --bg-slide-pos-end: 0 0;
  --transition-card: transform 0.3s ease, box-shadow 0.3s ease,
    border-color 0.3s ease;
  --burger-vertical-move: calc(
    (var(--burger-height) - var(--burger-line-height)) / 2
  );
  --duration-slow: 0.8s;
  --duration-ken-burns: 6s;
  --easing-exit: cubic-bezier(0.2, 1, 0.3, 1);
  --delay-md: 0.5s;
  --delay-lg: 0.6s;
  --delay-xl: 0.7s;
  --scale-ken-burns: 1.1;
  --blur-sm: blur(5px);
  --switch-translation: 20px;

  /* 1.13 Opacity */
  --opacity-80: 0.8;

  /* ==========================================================================
     2. SEMANTICS (Functional Mapping)
     ========================================================================== */

  /* 2.1 Typography */
  --p-font-family: var(--font-primary);
  --p-font-size: var(--font-size-base);
  --p-line-height: 1.6;
  --p-font-weight: 400;
  --p-gap: var(--space-md); /* Mobile: 15px */

  /* Headings General (h1-h5) */
  --h-font-family: var(--font-heading);
  --h-font-weight: 700;
  --h-line-height: 1.2;
  --h-gap: var(--space-md); /* Mobile: 15px (Tighter headings) */

  /* Specific Heading Sizes (Scale) */
  --h1-size: var(--font-size-h1);
  --h2-size: var(--font-size-h2);
  --h3-size: var(--font-size-h3);

  /* Lead text */
  --line-height-lead: 1.5;
  --line-height-prose: 1.8;

  /* 2.2 Colors */
  --link-light-bg: var(--color-secondary);
  --link-light-bg-hover: var(--color-primary);
  --link-dark-bg: #ffffff;
  --link-dark-bg-hover: var(--color-secondary);

  --text-body: var(--text-main);
  --text-title: var(--color-primary);
  --text-title-alt: var(--color-secondary);
  --link-primary: var(--link-light-bg);
  --link-hover: var(--link-light-bg-hover);
  --surface-bg: var(--bg-body);

  /* ==========================================================================
     3. INTERACTION & ANIMATION TOKENS (Motion Rhythm)
     ========================================================================== */

  /* Movement & State */
  --interaction-transition: var(--transition-main);
  --interaction-lift: -3px;
  --interaction-lift-lg: -5px;
  --interaction-shadow: var(--shadow-card-hover);

  /* Synchronized Transition Rhythm (Timing Scale) */
  --transition-fast: 0.2s ease-in-out; /* For Hovers & Burger Toggle */
  --transition-base: 0.3s ease-in-out; /* For Panels & Small UI motions */
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* For Drawer (Slide-in) */
  --transition-slow: 0.8s ease-in-out; /* For Slideshow Fades */
  --transition-medium: 0.5s ease-in-out;

  /* Button Specifics */
  --btn-radius: var(--radius-sm);
  --btn-border-w: 4px;

  --btn-bg: var(--color-secondary);
  --btn-text: var(--text-on-dark);
  --btn-border-color: #ffffff;
  --btn-padding: var(--space-sm) var(--space-xl);

  /* ==========================================================================
     4. LAYOUT & GRID TOKENS
     ========================================================================== */
  --grid-gap: var(--space-md); /* Mobile: 15px grid gap */
  --block-margin: var(--space-xl); /* Mobile: 50px block spacing */
  --container-width: var(--container-max-width);
  --separator-row: 1px solid var(--border-light);

  /* Breakpoints */
  --breakpoint-sm-max: 767px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
}

/* ==========================================================================
   5. CONTEXTUAL OVERRIDES (Bulk Dark Mode Control)
   ========================================================================== */

/* Dark Context for Footer, Headers or Sections with Dark Backgrounds */
.context-dark,
.wsdt-footer,
.link-on-dark {
  --text-body: var(--text-on-dark);
  --text-title: var(--text-on-dark);
  --text-title-alt: var(--text-on-dark);
  --link-primary: var(--link-dark-bg);
  --link-hover: var(--link-dark-bg-hover);
}

/* ==========================================================================
   6. RESPONSIVE TOKENS (Breakpoint Adjustments)
   ========================================================================== */

/* Tablet (min-width: 768px) */
@media all and (min-width: 768px) {
  :root {
    --p-gap: var(--space-lg); /* Tablet: 30px */
    --h-gap: var(--space-lg); /* Tablet: 30px */
    --grid-gap: var(--space-lg); /* Tablet: 30px */
    --block-margin: var(--space-xl); /* Tablet: 50px */
  }
}

/* Desktop (min-width: 1024px) */
@media all and (min-width: 1024px) {
  :root {
    --p-font-size: 1.1rem;
    --h1-size: 3rem;
    --h2-size: 2.25rem;
    --h-gap: var(--space-xl); /* Desktop: 50px */
    --block-margin: var(--space-2xl); /* Desktop: 80px (More breathing room) */
  }
}

/* Wide (min-width: 1280px) */
@media all and (min-width: 1280px) {
  :root {
    --h1-size: 3.5rem; /* Massive headings for wide screens */
    --block-margin: var(--space-3xl); /* Wide: 120px (Maximum spacing) */
  }
}