/*
 * Design Tokens for RLC Website
 * This file defines all CSS custom properties for consistent theming
 */

:root {
  color-scheme: light;

  /* Color Palette - Primary (Vibrant Club Blue & Deep Blue in OKLCH) */
  --color-primary: oklch(0.38 0.15 254.3);
  --color-primary-dark: oklch(0.24 0.10 254.3);
  --color-primary-light: oklch(0.92 0.03 254.3);

  /* Color Palette - Secondary */
  --color-secondary: oklch(0.22 0.09 254.3);
  --color-secondary-dark: oklch(0.14 0.06 254.3);
  --color-secondary-light: oklch(0.48 0.12 254.3);

  /* Club Accent Green (From Logo) */
  --color-club-green: oklch(0.72 0.18 168.0);
  --color-club-green-dark: oklch(0.58 0.15 168.0);

  /* Color Palette - Neutral (Soft Slate-Grey Spectrum in OKLCH) */
  --color-neutral-50: oklch(0.99 0.003 254.3);
  --color-neutral-100: oklch(0.97 0.005 254.3);
  --color-neutral-200: oklch(0.93 0.008 254.3);
  --color-neutral-300: oklch(0.88 0.01 254.3);
  --color-neutral-400: oklch(0.72 0.015 254.3);
  --color-neutral-500: oklch(0.54 0.02 254.3);
  --color-neutral-600: oklch(0.42 0.02 254.3);
  --color-neutral-700: oklch(0.32 0.02 254.3);
  --color-neutral-800: oklch(0.22 0.02 254.3);
  --color-neutral-900: oklch(0.14 0.02 254.3);

  /* Color Palette - Status */
  --color-success: oklch(0.45 0.11 254.3);
  --color-warning: oklch(0.52 0.08 254.3);
  --color-error: oklch(0.55 0.22 29.3);
  --color-info: oklch(0.42 0.12 254.3);
  --color-success-light: oklch(0.96 0.01 254.3);
  --color-warning-light: oklch(0.96 0.01 254.3);
  --color-error-light: oklch(0.96 0.02 29.3);
  --color-info-light: oklch(0.95 0.02 254.3);

  /* Color Palette - Links */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-dark);
  --color-link-visited: oklch(0.30 0.12 254.3);

  /* Color Palette - Backgrounds & Surfaces (Tonal Layering Architecture) */
  --color-background-light: oklch(0.985 0.004 254.3);
  --color-background-dark: var(--color-neutral-900);

  --color-card-light: oklch(1.0 0.0 0); /* Pure White surface */
  --color-card-dark: var(--color-neutral-800);

  /* Core Tonal Surfaces (No-Line Rule) */
  --surface: var(--color-background-light);
  --surface-container-low: oklch(0.965 0.005 254.3); /* Slightly darker for grouping sections */
  --surface-container-lowest: oklch(1.0 0.0 0);      /* Pure White for card elements */
  --surface-muted: oklch(0.93 0.01 254.3);
  --surface-subtle: oklch(0.95 0.01 254.3);
  --surface-base: var(--color-card-light);

  /* Color Palette - Text */
  --color-text-light: var(--color-neutral-900);
  --color-text-dark: var(--color-neutral-100);
  --color-text-contrast: var(--color-text-light);
  --color-text-contrast-dark: var(--color-text-dark);
  --color-text-muted: var(--color-neutral-600);
  --color-text-subtle: var(--color-neutral-400);

  /* Color Palette - Focus */
  --color-focus: var(--color-primary);
  --color-focus-ring: oklch(0.38 0.15 254.3 / 0.24);

  /* Borders */
  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-inverse: rgba(255, 255, 255, 0.14);

  /* Slate Helpers */
  --color-slate-900: oklch(0.15 0.03 254.3);
  --color-slate-100: oklch(0.96 0.01 254.3);
  --color-slate-200: oklch(0.92 0.02 254.3);
  --color-slate-300: oklch(0.86 0.02 254.3);
  --color-slate-400: oklch(0.58 0.05 254.3);
  --color-slate-500: oklch(0.42 0.04 254.3);
  --color-slate-600: oklch(0.74 0.06 254.3);
  --color-slate-700: oklch(0.28 0.03 254.3);
  --color-slate-800: oklch(0.20 0.03 254.3);
  --color-slate-900-dark: oklch(0.12 0.03 254.3);

  /* Fluid Spacing Tokens using clamp() */
  --spacing-xxs: clamp(0.18rem, 0.15rem + 0.15vw, 0.25rem); /* ~3-4px */
  --spacing-xs: clamp(0.38rem, 0.3rem + 0.3vw, 0.5rem);      /* ~6-8px */
  --spacing-sm: clamp(0.56rem, 0.45rem + 0.5vw, 0.75rem);    /* ~9-12px */
  --spacing-md: clamp(0.8rem, 0.65rem + 0.75vw, 1rem);       /* ~12-16px */
  --spacing-lg: clamp(1.15rem, 0.95rem + 1vw, 1.5rem);       /* ~18-24px */
  --spacing-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);       /* ~24-32px */
  --spacing-xxl: clamp(2.25rem, 1.8rem + 2.25vw, 3rem);      /* ~36-48px */
  --spacing-xxxl: clamp(3rem, 2.4rem + 3.5vw, 4rem);         /* ~48-64px */

  /* Typography Tokens - Fluid Scaling using clamp() */
  --font-family-primary: 'Inter', Arial, sans-serif;
  --font-family-heading: 'Inter', Arial, sans-serif;

  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem; /* 16px */
  --font-size-lg: clamp(1.05rem, 0.98rem + 0.3vw, 1.125rem); /* ~16.8px - 18px */
  --font-size-xl: clamp(1.15rem, 1.05rem + 0.5vw, 1.25rem);  /* ~18.4px - 20px */
  --font-size-xxl: clamp(1.35rem, 1.2rem + 0.75vw, 1.5rem);  /* ~21.6px - 24px */
  --font-size-xxxl: clamp(1.75rem, 1.5rem + 1.25vw, 2rem);   /* ~28px - 32px */
  --font-size-xxxxl: clamp(2.4rem, 2rem + 2vw, 3rem);        /* ~38.4px - 48px */

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* Typography Rhythm */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Border Radius */
  --border-radius-sm: 0.25rem; /* 4px */
  --border-radius-md: 0.375rem; /* 6px */
  --border-radius-lg: 0.75rem; /* 12px */
  --border-radius-xl: 1rem; /* 16px */
  --border-radius-pill: 999px;

  /* Box Shadows */
  --box-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --box-shadow-md: 0 3px 8px rgba(17, 24, 39, 0.07);
  --box-shadow-lg: 0 8px 16px rgba(17, 24, 39, 0.08);
  --box-shadow-xl: 0 14px 28px rgba(17, 24, 39, 0.1);
  --box-shadow-focus: 0 0 0 4px var(--color-focus-ring);

  /* Layout */
  --header-height: clamp(4.5rem, 4rem + 1.2vw, 5rem);
  --header-height-mobile: 4.5rem;
  --header-offset: calc(var(--header-height) + var(--spacing-lg));
  --header-offset-mobile: calc(var(--header-height-mobile) + var(--spacing-md));
  --content-max-width: 72rem;

  /* Shared shell */
  --shell-surface: rgba(251, 252, 255, 0.96);
  --shell-surface-dark: rgba(12, 24, 45, 0.94);
  --shell-border: rgba(205, 217, 235, 0.92);
  --shell-border-dark: rgba(46, 64, 95, 0.92);

  /* Ensure proper contrast for header elements */
  --header-text-color: var(--color-text-contrast);
  --header-text-color-dark: var(--color-text-contrast-dark);

  /* Transitions */
  --transition-fast: 0.1s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;

  /* Z-indices */
  --z-index-dropdown: 1000;
  --z-index-modal: 1100;
  --z-index-popover: 1200;
  --z-index-tooltip: 1300;
}

.dark {
  color-scheme: dark;
}