// =============================================================================
// Design Tokens — Blog & Web CMS
// =============================================================================

// SCSS defaults (used as Bootstrap overrides and CSS custom property fallbacks)
$bw-primary: #2563EB;
$bw-primary-light: #DBEAFE;
$bw-primary-dark: #1D4ED8;
$bw-secondary: #F59E0B;
$bw-secondary-light: #FEF3C7;
$bw-accent: #8B5CF6;
$bw-success: #10B981;
$bw-danger: #EF4444;
$bw-surface: #F8FAFC;
$bw-surface-alt: #F1F5F9;
$bw-text: #0F172A;
$bw-text-muted: #64748B;
$bw-border: #E2E8F0;
$bw-white: #FFFFFF;

// CSS Custom Properties
// NOTE: --primary, --secondary, --accent, --font-family, --font-family-secondary,
// --bg, --surface, --border, --text, --text-muted, --radius are injected
// dynamically in base.html.twig from Site entity + theme.yaml.
// Only declare SCSS-only variables here (not overridden by themes).
:root {
  // Derived colors — auto-adapt to theme via color-mix()
  --primary-light: color-mix(in srgb, var(--primary) 12%, white);
  --primary-dark: color-mix(in srgb, var(--primary), black 20%);
  --secondary-light: color-mix(in srgb, var(--secondary) 15%, white);
  --accent-light: color-mix(in srgb, var(--accent) 12%, white);
  --success: #{$bw-success};
  --danger: #{$bw-danger};
  --surface-alt: color-mix(in srgb, var(--surface), var(--border) 30%);
  --white: #{$bw-white};

  // Gradients
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--accent));
  --gradient-warm: linear-gradient(135deg, var(--secondary), color-mix(in srgb, var(--secondary), #F97316 50%));
  --gradient-hero: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);

  // Shadows (4-level elevation)
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  // Border radius
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  // Transitions
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  // Typography — font-display/body inherit from theme via --font-family
  --font-display: var(--font-family-secondary, var(--font-family, 'Inter', sans-serif));
  --font-body: var(--font-family, 'Inter', sans-serif);
  --font-mono: 'JetBrains Mono', monospace;

  // Code blocks
  --code-bg: #1e1e1e;
  --code-color: #d4d4d4;

  // Overlays
  --overlay-dark: rgba(0, 0, 0, 0.7);
  --overlay-light: rgba(255, 255, 255, 0.15);
}

// =============================================================================
// Mixins
// =============================================================================

@mixin title-one {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.025em;
  line-height: 1.2;
}

@mixin title-two {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}

@mixin link-menu {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--text);
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}

@mixin btn-font {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  transition: all var(--transition-base);

  &:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  &:active {
    transform: translateY(0);
  }
}

@mixin btn-font-secondary {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: none;
  color: var(--white);
  transition: all var(--transition-base);

  &:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }

  &:active {
    transform: translateY(0);
  }
}