/*
 * File: css/base/variables.css
 * Logic: Design tokens — single source of truth for the CSS refactor.
 * Rules: tonal palettes (100–900), --unit-base spacing, rem typography, --text-on-*.
 * Subthemes: override tokens in css/base/variables.theme.css (websdt_theme).
 */

:root {
  /* ==========================================================================
     BREAKPOINTS (px — sync with websdt_theme_master.breakpoints.yml)
     Use px (not rem) so layout matches Drupal responsive_image exactly.
     mobile: default (< 768px) | tablet: 768px | desktop: 1024px | wide: 1280px
     ========================================================================== */
  --bp-mobile-max: 767px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;

  /* ==========================================================================
     SPACING — single root (--unit-base: 5px)
     ========================================================================== */
  --unit-base: 5px;

  --space-2xs: calc(var(--unit-base) * 1);  /* 5px */
  --space-xs: calc(var(--unit-base) * 2);   /* 10px */
  --space-sm: calc(var(--unit-base) * 3);   /* 15px */
  --space-md: calc(var(--unit-base) * 4);   /* 20px */
  --space-lg: calc(var(--unit-base) * 6);   /* 30px */
  --space-xl: calc(var(--unit-base) * 8);   /* 40px */
  --space-2xl: calc(var(--unit-base) * 12); /* 60px */
  --space-3xl: calc(var(--unit-base) * 16); /* 80px */

  /* ==========================================================================
     TYPOGRAPHY — rem + calc multipliers (a11y-friendly)
     --font-primary / --font-heading overridden inline via inc/fonts.inc
     ========================================================================== */
  --font-primary: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-primary);

  --font-size-root: 93.75%; /* 15px base when browser default is 16px */
  --font-scale: 1;

  --font-size-2xs: calc(0.75rem * var(--font-scale));
  --font-size-xs: calc(0.8125rem * var(--font-scale));
  --font-size-sm: calc(0.875rem * var(--font-scale));
  --font-size-base: calc(1rem * var(--font-scale));
  --font-size-md: calc(1.125rem * var(--font-scale));
  --font-size-lg: calc(1.25rem * var(--font-scale));
  --font-size-xl: calc(1.5rem * var(--font-scale));
  --font-size-2xl: calc(1.875rem * var(--font-scale));
  --font-size-3xl: calc(2.25rem * var(--font-scale));

  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.65;

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

  /* ==========================================================================
     COLOR CORES (500 = palette base — only primitives, no scattered HEX in SDCs)
     ========================================================================== */
  --color-primary-500: #333333;
  --color-accent-500: #660000;
  --color-neutral-500: #6b7280;
  --color-success-500: #28a745;
  --color-warning-500: #ffc107;
  --color-error-500: #dc3545;

  /* --- Primary scale (tints 100–400, shades 600–900) --- */
  --color-primary-100: color-mix(in srgb, var(--color-primary-500), white 90%);
  --color-primary-200: color-mix(in srgb, var(--color-primary-500), white 75%);
  --color-primary-300: color-mix(in srgb, var(--color-primary-500), white 55%);
  --color-primary-400: color-mix(in srgb, var(--color-primary-500), white 30%);
  --color-primary-600: color-mix(in srgb, var(--color-primary-500), black 15%);
  --color-primary-700: color-mix(in srgb, var(--color-primary-500), black 30%);
  --color-primary-800: color-mix(in srgb, var(--color-primary-500), black 50%);
  --color-primary-900: color-mix(in srgb, var(--color-primary-500), black 70%);

  /* --- Accent scale --- */
  --color-accent-100: color-mix(in srgb, var(--color-accent-500), white 90%);
  --color-accent-200: color-mix(in srgb, var(--color-accent-500), white 75%);
  --color-accent-300: color-mix(in srgb, var(--color-accent-500), white 55%);
  --color-accent-400: color-mix(in srgb, var(--color-accent-500), white 30%);
  --color-accent-600: color-mix(in srgb, var(--color-accent-500), black 15%);
  --color-accent-700: color-mix(in srgb, var(--color-accent-500), black 30%);
  --color-accent-800: color-mix(in srgb, var(--color-accent-500), black 50%);
  --color-accent-900: color-mix(in srgb, var(--color-accent-500), black 70%);

  /* --- Neutral scale --- */
  --color-neutral-100: color-mix(in srgb, var(--color-neutral-500), white 92%);
  --color-neutral-200: color-mix(in srgb, var(--color-neutral-500), white 80%);
  --color-neutral-300: color-mix(in srgb, var(--color-neutral-500), white 60%);
  --color-neutral-400: color-mix(in srgb, var(--color-neutral-500), white 35%);
  --color-neutral-600: color-mix(in srgb, var(--color-neutral-500), black 20%);
  --color-neutral-700: color-mix(in srgb, var(--color-neutral-500), black 40%);
  --color-neutral-800: color-mix(in srgb, var(--color-neutral-500), black 60%);
  --color-neutral-900: color-mix(in srgb, var(--color-neutral-500), black 80%);

  /* --- Semantic scales (success, warning, error) --- */
  --color-success-100: color-mix(in srgb, var(--color-success-500), white 88%);
  --color-success-700: color-mix(in srgb, var(--color-success-500), black 25%);
  --color-warning-100: color-mix(in srgb, var(--color-warning-500), white 88%);
  --color-warning-700: color-mix(in srgb, var(--color-warning-500), black 30%);
  --color-error-100: color-mix(in srgb, var(--color-error-500), white 88%);
  --color-error-700: color-mix(in srgb, var(--color-error-500), black 25%);

  /* ==========================================================================
     AUTO-CONTRAST (--text-on-* for contextual text on palette backgrounds)
     Tints → dark text | Shades → light text
     ========================================================================== */
  --text-on-primary-tints: var(--color-primary-800);
  --text-on-primary-shades: var(--color-primary-100);
  --text-on-primary-100: var(--color-primary-800);
  --text-on-primary-200: var(--color-primary-800);
  --text-on-primary-300: var(--color-primary-900);
  --text-on-primary-400: var(--color-primary-900);
  --text-on-primary-500: var(--color-primary-100);
  --text-on-primary-600: var(--color-primary-100);
  --text-on-primary-700: var(--color-primary-100);
  --text-on-primary-800: var(--color-primary-100);
  --text-on-primary-900: var(--color-primary-100);

  --text-on-accent-tints: var(--color-accent-800);
  --text-on-accent-shades: var(--color-accent-100);
  --text-on-accent-100: var(--color-accent-800);
  --text-on-accent-200: var(--color-accent-800);
  --text-on-accent-300: var(--color-accent-900);
  --text-on-accent-400: var(--color-accent-900);
  --text-on-accent-500: var(--color-accent-100);
  --text-on-accent-600: var(--color-accent-100);
  --text-on-accent-700: var(--color-accent-100);
  --text-on-accent-800: var(--color-accent-100);
  --text-on-accent-900: var(--color-accent-100);

  --text-on-neutral-tints: var(--color-neutral-800);
  --text-on-neutral-shades: var(--color-neutral-100);
  --text-on-neutral-100: var(--color-neutral-800);
  --text-on-neutral-200: var(--color-neutral-800);
  --text-on-neutral-300: var(--color-neutral-900);
  --text-on-neutral-400: var(--color-neutral-900);
  --text-on-neutral-500: var(--color-neutral-100);
  --text-on-neutral-600: var(--color-neutral-100);
  --text-on-neutral-700: var(--color-neutral-100);
  --text-on-neutral-800: var(--color-neutral-100);
  --text-on-neutral-900: var(--color-neutral-100);

  /* ==========================================================================
     SEMANTIC SURFACE TOKENS
     ========================================================================== */
  --bg-body: var(--color-neutral-100);
  --text-body: var(--color-primary-700);
  --text-caption: var(--color-neutral-600);
  --text-on-body: var(--text-body);

  --border-subtle: var(--color-neutral-300);
  --border-strong: var(--color-neutral-500);
  --border-on-dark: color-mix(in srgb, var(--color-primary-100), transparent 70%);
  --border-width-md: 2px;
  --translate-slide-out: -101%;

  /* ==========================================================================
     LAYOUT & EFFECTS (foundational)
     ========================================================================== */
  --grid-gap: var(--space-md); /* default; overridden per region in context.css */
  --container-max: calc(var(--unit-base) * 256); /* 1280px */
  --content-max: calc(var(--unit-base) * 160);   /* 800px reading width */
  --content-max-sm: calc(var(--unit-base) * 120); /* 600px */
  --letter-spacing-sm: 0.04em;
  --heading-gap: var(--space-md);

  /* Offer card meta — fixed price column + divider anchor */
  --offer-card-price-width: calc(var(--unit-base) * 18); /* 90px */
  --offer-card-divider-height: calc(var(--unit-base) * 6); /* 30px */

  /* Block section titles (h2 identity — override in subtheme variables.theme.css) */
  --block-title-size: var(--font-size-2xl);
  --block-title-weight: var(--font-weight-bold);
  --block-title-color: var(--color-primary-900);
  --block-title-align: center;
  --block-title-accent-width: calc(var(--unit-base) * 12);
  --block-title-accent-height: var(--border-width-md);
  --block-title-accent-color: var(--color-accent-500);
  --block-title-accent-gap: var(--space-xs);
  --block-title-color-on-dark: var(--text-on-hero);
  --block-title-accent-color-on-dark: var(--text-on-hero);

  --header-height: calc(var(--unit-base) * 16);       /* 80px */
  --header-logo-height: calc(var(--unit-base) * 12); /* 60px */
  --admin-toolbar-height: 39px;

  --text-title: var(--color-primary-900);

  --burger-width: calc(var(--unit-base) * 6);       /* 30px */
  --burger-height: calc(var(--unit-base) * 4.4);    /* 22px */
  --burger-line-height: 3px;
  --z-burger-toggle: 105;

  --sidebar-width: calc(var(--unit-base) * 60);     /* 300px */
  --drawer-width: calc(var(--unit-base) * 64);      /* 320px */
  --btn-size-square: calc(var(--unit-base) * 8);    /* 40px */
  --overlay-bg: color-mix(in srgb, var(--color-primary-900), transparent 30%);
  --transition-drawer: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  --radius-xs: 2px;
  --radius-sm: calc(var(--unit-base) * 0.8);  /* 4px */
  --radius-md: calc(var(--unit-base) * 1.6);  /* 8px */
  --radius-lg: calc(var(--unit-base) * 3.2);  /* 16px */
  --radius-pill: calc(var(--unit-base) * 10);
  --radius-circle: 50%;

  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-primary-900), transparent 92%);
  --shadow-md: 0 4px 12px color-mix(in srgb, var(--color-primary-900), transparent 88%);
  --shadow-lg: 0 12px 32px color-mix(in srgb, var(--color-primary-900), transparent 82%);

  --z-base: 0;
  --z-normal: 1;
  --z-slide-overlay: 10;
  --z-slide-caption: 20;
  --z-header: 100;
  --z-overlay: 200;
  --z-drawer: 250;
  /* Open drawer — above cookie reopen (350) and a11y root/toggle (500). */
  --z-drawer-active: 520;
  --z-modal: 300;
  --z-cookie: 350;
  --z-toast: 400;
  --z-accessibility: 500;
  --z-scroll-top: 510;

  /* Accessibility feature overrides */
  --color-a11y-yellow: #ffff00;

  /* Hero / slideshow surfaces */
  --text-on-hero: var(--color-primary-100);
  --overlay-hero: color-mix(in srgb, var(--color-primary-900), transparent 40%);
  --slideshow-height-mobile: 80vh;
  --slideshow-video-height-mobile: 120%;
  --surface-white-t-20: color-mix(in srgb, white, transparent 80%);
  --surface-white-t-50: color-mix(in srgb, white, transparent 50%);
  --surface-white-t-80: color-mix(in srgb, white, transparent 20%);

  --border-width-sm: 1px;
  --border-width-lg: var(--space-xs);
  --shadow-card: var(--shadow-lg);
  --opacity-muted: 0.8;

  /* Slideshow motion */
  --duration-hero-caption: 0.8s;
  --duration-ken-burns: 6s;
  --scale-ken-burns: 1.1;
  --delay-md: 0.5s;
  --delay-lg: 0.6s;
  --delay-xl: 0.7s;
  --switch-translation: calc(var(--unit-base) * 4);
  --transition-interactive: color 0.4s ease-out, background-color 0.4s ease-out,
    border-color 0.4s ease-out, transform 0.4s ease-out, box-shadow 0.4s ease-out,
    opacity 0.4s ease-out;
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* Buttons (primary + outline) */
  --btn-radius: var(--radius-sm);
  --btn-border-w: 4px;
  --btn-bg: var(--color-accent-500);
  --btn-text: #ffffff;
  --btn-border-color: #ffffff;
  --btn-padding-y: var(--space-sm);
  --btn-padding-x: var(--space-xl);
  --btn-hover-color: var(--color-accent-500);
  --btn-hover-border-color: var(--color-accent-500);
  --btn-outline-color: var(--text-body);
  --btn-outline-border: var(--text-body);
  --btn-outline-hover-bg: var(--text-body);
  --btn-outline-hover-color: var(--text-on-hero);

  /* CTA block outline button (on accent surface — override in subtheme) */
  --btn-cta-outline-color: var(--text-on-hero);
  --btn-cta-outline-border: var(--text-on-hero);
  --btn-cta-outline-bg: transparent;
  --btn-cta-outline-hover-bg: var(--text-on-hero);
  --btn-cta-outline-hover-color: var(--color-primary-700);

  --bg-slide-size: 200% 100%;
  --bg-slide-pos-start: 100% 0;
  --bg-slide-pos-end: 0 0;

  /* Forms */
  --form-bg: var(--bg-body);
  --form-border: var(--border-subtle);
  --form-border-focus: var(--color-accent-500);
  --form-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-500), transparent 75%);
  --form-radius: var(--radius-sm);
  --form-padding: var(--space-sm);
  --form-min-height: calc(var(--unit-base) * 24);

  /* Map embed */
  --map-height-mobile: calc(var(--unit-base) * 60);
  --map-height-desktop: calc(var(--unit-base) * 90);

  /* ==========================================================================
     ICONS & COMPACT INLINE LINKS (header bar, icon rows)
     ========================================================================== */
  --icon-size-sm: calc(var(--unit-base) * 2.8);  /* ~14px */
  --icon-size-base: calc(var(--unit-base) * 4);  /* ~20px */
  --icon-size-md: calc(var(--unit-base) * 5);    /* ~25px */

  --link-header: var(--color-primary-600);
  --link-header-hover: var(--color-primary-700);
  --lift-sm: -3px;

  /* ==========================================================================
     MOTION & TRANSITIONS
     ========================================================================== */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease-in-out;
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-enter: 1.6s;
  --ease-enter-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --transition-link: var(--transition-fast);
}