/**
 * @file
 * Design Tokens for Kaliyattam Arts Theme.
 * Mobile-first, high performance, CSS custom properties.
 */

:root {
  /* Native browser color-scheme signaling */
  color-scheme: light;

  /* Brand Color Palette - Sacred Ritual Arts & Theyyam Tradition */
  --kaliyattam-primary: #890000;
  --kaliyattam-primary-dark: #5c0000;
  --kaliyattam-primary-deep: #3c0000;
  --kaliyattam-primary-light: #a81414;
  --kaliyattam-vermilion: #c2410c;
  --kaliyattam-gold: #d97706;
  --kaliyattam-gold-light: #fbbf24;
  --kaliyattam-gold-dark: #b45309;

  /* Neutral Dark */
  --kaliyattam-dark: #18181b;
  --kaliyattam-slate: #27272a;
  --kaliyattam-charcoal: #3f3f46;

  /* Neutral Light & Surfaces */
  --kaliyattam-light: #ffffff;
  --kaliyattam-surface: #faf8f5;
  --kaliyattam-surface-warm: #f4efe8;
  --kaliyattam-surface-alt: #f5f5f7;

  /* Text Colors */
  --kaliyattam-text: #1c1917;
  --kaliyattam-text-secondary: #52525b;
  --kaliyattam-text-muted: #71717a;
  --kaliyattam-text-light: #ffffff;
  --kaliyattam-text-light-muted: rgba(255, 255, 255, 0.75);

  /* Borders & Dividers */
  --kaliyattam-border: #cbd5e1;
  --kaliyattam-border-subtle: rgba(0, 0, 0, 0.08);
  --kaliyattam-border-hover: #94a3b8;
  --kaliyattam-border-light: rgba(255, 255, 255, 0.15);
  --kaliyattam-input-focus: rgba(137, 0, 0, 0.16);

  /* Gradients */
  --kaliyattam-gradient: linear-gradient(135deg, #890000 0%, #4a0000 100%);
  --kaliyattam-gradient-warm: linear-gradient(135deg, #890000 0%, #b45309 100%);
  --kaliyattam-gradient-subtle: linear-gradient(180deg, rgba(137, 0, 0, 0.04) 0%, transparent 100%);
  --kaliyattam-gradient-overlay: linear-gradient(180deg, transparent 40%, rgba(24, 24, 27, 0.85) 100%);

  /* Typography - Intentionally using native system font stacks for maximum performance; custom external webfonts deprecated to eliminate render-blocking network requests and layout shifts */
  --font-serif-heading: Georgia, "Times New Roman", Times, serif;
  --font-sans-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Fluid Font Sizes */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.77rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.125rem);
  --text-xl: clamp(1.1875rem, 1.1rem + 0.45vw, 1.3125rem);
  --text-2xl: clamp(1.375rem, 1.25rem + 0.65vw, 1.625rem);
  --text-3xl: clamp(1.6875rem, 1.5rem + 1vw, 2.125rem);
  --text-4xl: clamp(2.125rem, 1.85rem + 1.4vw, 2.75rem);

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Elevation Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-crimson: 0 8px 30px rgba(137, 0, 0, 0.15);

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout Containers */
  --container-max-width: 1240px;
  --container-padding: clamp(1rem, 3vw, 2rem);

  /* Semantic Theme Tokens - Light Mode (Default) */
  --theme-bg: #faf8f5;
  --theme-surface: #ffffff;
  --theme-surface-raised: #ffffff;
  --theme-surface-warm: #f4efe8;
  --theme-surface-subtle: #f4efe8;
  --theme-surface-alt: #f8fafc;
  --theme-border: #cbd5e1;
  --theme-border-subtle: rgba(0, 0, 0, 0.08);
  --theme-border-hover: #94a3b8;
  --theme-text: #1c1917;
  --theme-text-secondary: #52525b;
  --theme-text-muted: #595960;
  --theme-accent: #890000;
  --theme-accent-soft: rgba(137, 0, 0, 0.08);
  --theme-accent-hover: #5c0000;
  --theme-input-bg: #ffffff;
  --theme-input-border: #cbd5e1;
  --theme-header-bg: linear-gradient(135deg, #890000 0%, #4a0000 100%);
  --theme-header-top-bg: rgba(0, 0, 0, 0.15);
  --theme-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --theme-card-shadow-hover: 0 8px 30px rgba(137, 0, 0, 0.15);
}

/* Malayalam language font stack override */
:lang(ml) {
  --font-serif-heading: "Noto Serif Malayalam", "Nirmala UI", "Manjari", serif;
  --font-sans-body: "Noto Sans Malayalam", "Nirmala UI", "Manjari", system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   Semantic Theme Tokens - Dark Mode
   Inspired by released.in/kal_15unaA1/events:
   #111827 body bg, #1f2937 card bg, #374151 border, #f3f4f6 / #9ca3af text
   ========================================================================== */
:root[data-theme="dark"],
html.dark {
  color-scheme: dark;
  --theme-bg: #0f172a;
  --theme-surface: #1e293b;
  --theme-surface-raised: #243247;
  --theme-surface-warm: #243247;
  --theme-surface-subtle: #182234;
  --theme-surface-alt: #27364b;
  --theme-border: #334155;
  --theme-border-subtle: rgba(148, 163, 184, 0.18);
  --theme-border-hover: #475569;
  --theme-text: #f1f5f9;
  --theme-text-secondary: #94a3b8;
  --theme-text-muted: #94a3b8;
  --theme-accent: #fca5a5;
  --theme-accent-soft: rgba(248, 113, 113, 0.15);
  --theme-accent-hover: #fecaca;
  --theme-accent-solid: #b91c1c;
  --theme-accent-solid-hover: #dc2626;
  --theme-input-bg: #111c30;
  --theme-input-border: #334155;
  --theme-header-bg: linear-gradient(135deg, #3d0000 0%, #1e293b 60%, #0f172a 100%);
  --theme-header-top-bg: rgba(0, 0, 0, 0.4);
  --theme-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  --theme-card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.45);

  /* Legacy variable mappings in dark mode for immediate theme-wide compatibility */
  --kaliyattam-surface: #0f172a;
  --kaliyattam-surface-warm: #243247;
  --kaliyattam-surface-alt: #27364b;
  --kaliyattam-light: #1e293b;
  --kaliyattam-text: #f1f5f9;
  --kaliyattam-text-secondary: #94a3b8;
  --kaliyattam-text-muted: #94a3b8;
  --kaliyattam-border: #334155;
  --kaliyattam-border-subtle: rgba(148, 163, 184, 0.18);
  --kaliyattam-border-hover: #475569;
  --kaliyattam-gradient: linear-gradient(135deg, #420000 0%, #1e293b 60%, #0f172a 100%);
  --kaliyattam-dark: #0b1220;
}