/*
 * ENGINE BASE CSS — STRUCTURAL TOKENS
 * Part of the 3-layer cascade: base.css → theme.css → brand.css
 *
 * This file provides:
 * 1. Empty brand token declarations (filled by theme.css, then brand.css, then override.css)
 * 2. All structural tokens (neutrals, spacing, shadows, radii, etc.) — final values
 * 3. Backward-compat aliases so old variable names still resolve:
 *    --color-primary-purple → var(--color-primary)
 *    --font-family-heading → var(--font-heading)
 *    etc.
 *
 * DO NOT add brand token values here — this file provides declarations only.
 * DO NOT remove backward-compat aliases — external code may still reference old names.
 */

:root {
  /* ==========================================================================
     1. BRAND TOKENS — No values here. Set by theme.css, overridden by brand.css
     ========================================================================== */

  /* Primary brand colors */
  --color-primary: ;
  --color-primary-dark: ;
  --color-primary-light: ;
  --color-secondary: ;
  --color-secondary-dark: ;
  --color-secondary-light: ;
  --color-accent: ;
  --color-accent-dark: ;
  --color-accent-light: ;

  /* Brand gradient */
  --gradient-primary: ;
  --gradient-primary-horizontal: ;
  --gradient-primary-vertical: ;

  /* Typography */
  --font-heading: ;
  --font-body: ;
  --font-label: ;

  /* Focus ring (uses brand color) */
  --shadow-focus: ;
  --shadow-focus-secondary: ;

  /* Input focus (uses brand color) */
  --input-focus-border-color: ;

  /* Backward-compat aliases — old Serena-specific names point to generic names (Phase G) */
  --color-primary-purple: var(--color-primary);
  --color-primary-pink: var(--color-primary);
  --color-primary-blue: var(--color-secondary);
  --color-accent-purple: var(--color-accent);
  --color-accent-pink: var(--color-accent);
  --color-accent-blue: var(--color-secondary);
  --color-accent-purple-light: var(--color-accent-light);
  --color-accent-pink-light: var(--color-accent-light);
  --color-accent-purple-dark: var(--color-accent-dark);
  --color-accent-pink-dark: var(--color-accent-dark);
  --font-family-heading: var(--font-heading);
  --font-family-body: var(--font-body);
  --font-family-label: var(--font-label);

  /* ==========================================================================
     2. STRUCTURAL TOKENS — Final values. Not overridden by themes or tenants.
     ========================================================================== */

  /* --- Neutral Colors (shared across all tenants) --- */
  --color-cream: #fefdfb;
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  --color-black: #000000;

  /* --- Semantic Colors --- */
  --color-success: #22c55e;
  --color-success-light: #dcfce7;
  --color-success-dark: #15803d;
  --color-warning: #f97316;
  --color-warning-light: #ffedd5;
  --color-warning-dark: #c2410c;
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-error-dark: #b91c1c;
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;
  --color-info-dark: #1d4ed8;

  /* --- Background Colors --- */
  --color-bg-primary: var(--color-cream);
  --color-bg-secondary: var(--color-white);
  --color-bg-tertiary: var(--color-gray-50);
  --color-background: var(--color-cream);

  /* --- Text Colors --- */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);
  --color-text-inverse: var(--color-white);

  /* --- Border Colors --- */
  --color-border-light: var(--color-gray-200);
  --color-border-default: var(--color-gray-300);
  --color-border-dark: var(--color-gray-400);

  /* --- Font Sizes --- */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.875rem;
  --font-size-3xl: 2.25rem;
  --font-size-4xl: 3rem;

  /* --- Line Heights --- */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;

  /* --- Font Weights --- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Letter Spacing --- */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* --- Spacing System (8px base) --- */
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 0.25rem;
  --spacing-1: 0.5rem;
  --spacing-1-5: 0.75rem;
  --spacing-2: 1rem;
  --spacing-2-5: 1.25rem;
  --spacing-3: 1.5rem;
  --spacing-4: 2rem;
  --spacing-5: 3rem;
  --spacing-6: 4rem;
  --spacing-7: 5rem;
  --spacing-8: 6rem;
  --spacing-10: 8rem;
  --spacing-12: 10rem;

  /* --- Layout --- */
  --container-max-width: 1200px;
  --container-readable: 800px;
  --container-policies: 680px;
  --container-narrow: 540px;
  --container-padding: var(--spacing-2);
  --container-padding-lg: var(--spacing-4);
  --section-padding-y: var(--spacing-6);
  --section-padding-y-mobile: var(--spacing-5);
  --section-padding-y-large: var(--spacing-8);

  /* --- Border Radius --- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-default: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 50px;
  --radius-full: 9999px;

  /* --- Box Shadows --- */
  --shadow-none: none;
  --shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-small: var(--shadow-sm);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-elevated: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-default: 0.2s ease;
  --transition-standard: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-colors: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  --transition-transform: transform 0.3s ease;
  --transition-opacity: opacity 0.3s ease;
  --transition-all: all 0.3s ease;

  /* --- Z-Index Scale --- */
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-modal-backdrop: 400;
  --z-index-modal: 500;
  --z-index-popover: 600;
  --z-index-tooltip: 700;

  /* --- Component Tokens --- */
  --button-padding-x: var(--spacing-3);
  --button-padding-y: var(--spacing-1-5);
  --button-padding-x-sm: var(--spacing-2);
  --button-padding-y-sm: var(--spacing-1);
  --button-padding-x-lg: var(--spacing-4);
  --button-padding-y-lg: var(--spacing-2);
  --button-radius: var(--radius-md);
  --button-font-weight: var(--font-weight-semibold);
  --card-padding: var(--spacing-3);
  --card-padding-lg: var(--spacing-4);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-medium);
  --card-shadow-hover: var(--shadow-elevated);
  --input-padding-x: var(--spacing-2);
  --input-padding-y: var(--spacing-1-5);
  --input-radius: var(--radius-default);
  --input-border-width: 1px;
  --input-border-color: var(--color-border-default);
  --nav-height: 80px;
  --nav-height-mobile: 64px;
  --footer-padding-y: var(--spacing-6);
}

/* --- Responsive Overrides --- */
@media (max-width: 1024px) {
  :root {
    --section-padding-y: var(--spacing-5);
    --nav-height: 72px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding-y: var(--spacing-4);
    --section-padding-y-large: var(--spacing-5);
    --nav-height: var(--nav-height-mobile);
    --container-padding: var(--spacing-2);
    --font-size-4xl: 2.5rem;
    --font-size-3xl: 2rem;
    --font-size-2xl: 1.5rem;
  }
}