/*
 * Natural gourmand design system tokens
 * -------------------------------------
 * The following variables describe the visual language shared by every page.
 * They are grouped by theme (palette, typography, spacing...) and can be
 * combined to produce consistent components. Gradients and shadows have also
 * been formalised so they can be reused without redefining raw values.
 */

:root {
  /* === Palette: brand greens === */
  --color-success-50: #edf9f3;
  --color-success-100: #d4edda;
  --color-success-200: #b9e5c9;
  --color-success-300: #8dd6ae;
  --color-success-400: #58c28b;
  --color-success-500: #198754;
  --color-success-600: #157347;
  --color-success-700: #0f5132;
  --color-success-800: #0a3622;
  --color-success-900: #052116;
  --color-success-500-rgb: 25, 135, 84;
  --color-success-600-rgb: 21, 115, 71;
  --color-success-700-rgb: 15, 81, 50;

  /* === Palette: warm accents === */
  --color-ocre-50: #fef8ef;
  --color-ocre-100: #f2d3a5;
  --color-ocre-200: #eab678;
  --color-ocre-300: #dfa059;
  --color-ocre-400: #d4893d;
  --color-ocre-500: #cc7722;
  --color-ocre-600: #aa5f16;
  --color-ocre-700: #8a4d0f;
  --color-ocre-500-rgb: 204, 119, 34;

  --color-basil-100: #e2ecd8;
  --color-basil-200: #c6d9ba;
  --color-basil-300: #aaca92;
  --color-basil-400: #91bb73;
  --color-basil-500: #7ba05b;
  --color-basil-600: #5c7d3f;
  --color-basil-700: #425a2c;
  --color-basil-500-rgb: 123, 160, 91;

  --color-cream-50: #f9f5ea;
  --color-cream-100: #f5f1e3;
  --color-cream-200: #efe5cf;
  --color-cream-300: #e8dab8;

  /* === Palette: neutrals === */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f8f9fa;
  --color-neutral-200: #e9ecef;
  --color-neutral-300: #dee2e6;
  --color-neutral-400: #ced4da;
  --color-neutral-500: #adb5bd;
  --color-neutral-600: #6c757d;
  --color-neutral-700: #495057;
  --color-neutral-800: #2f2f2f;
  --color-neutral-900: #1a1a1a;
  --color-neutral-950: #0d0d0d;

  /* === Palette: semantic states === */
  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-500: #d9534f;
  --color-danger-600: #b94340;
  --color-danger-500-rgb: 217, 83, 79;
  
  --color-warning-50: #fef9ec;
  --color-warning-100: #fef3d8;
  --color-warning-500: #f0ad4e;
  --color-warning-600: #d89742;
  --color-warning-500-rgb: 240, 173, 78;
  
  --color-info-50: #ecfeff;
  --color-info-100: #cffafe;
  --color-info-500: #0dcaf0;
  --color-info-600: #0ab2d4;
  --color-info-500-rgb: 13, 202, 240;

  /* === Semantic surfaces & backgrounds === */
  --color-background-page: var(--color-cream-100);
  --color-background-elevated: var(--color-neutral-0);
  --color-surface-base: var(--color-neutral-0);
  --color-surface-muted: var(--color-cream-50);
  --color-surface-subtle: rgba(var(--color-success-500-rgb), 0.05);
  --color-surface-hover: rgba(var(--color-success-500-rgb), 0.08);
  --color-surface-active: rgba(var(--color-success-500-rgb), 0.12);
  --color-surface-success-soft: rgba(var(--color-success-500-rgb), 0.12);
  --color-surface-success-medium: rgba(var(--color-success-500-rgb), 0.18);
  --color-surface-danger-soft: rgba(var(--color-danger-500-rgb), 0.1);
  --color-surface-warning-soft: rgba(var(--color-warning-500-rgb), 0.1);
  --color-surface-info-soft: rgba(var(--color-info-500-rgb), 0.1);

  /* === Semantic borders === */
  --color-border-soft: rgba(var(--color-success-500-rgb), 0.18);
  --color-border-medium: rgba(var(--color-success-500-rgb), 0.3);
  --color-border-strong: rgba(0, 0, 0, 0.12);
  --color-border-dark: rgba(0, 0, 0, 0.4);
  --color-border-light: rgba(255, 255, 255, 0.1);

  /* === Semantic text colors === */
  --color-text-primary: #5d3a00;
  --color-text-secondary: rgba(93, 58, 0, 0.82);
  --color-text-tertiary: rgba(93, 58, 0, 0.7);
  --color-text-muted: rgba(93, 58, 0, 0.65);
  --color-text-disabled: rgba(93, 58, 0, 0.4);
  --color-text-inverse: var(--color-neutral-0);
  --color-text-link: var(--color-success-600);
  --color-text-link-hover: var(--color-success-700);

  /* === Overlays & focus === */
  --color-overlay-soft: rgba(0, 0, 0, 0.35);
  --color-overlay-medium: rgba(0, 0, 0, 0.55);
  --color-overlay-strong: rgba(0, 0, 0, 0.7);
  --focus-ring-color: rgba(var(--color-success-500-rgb), 0.35);
  --focus-ring-color-danger: rgba(var(--color-danger-500-rgb), 0.35);

  /* === Gradients === */
  --gradient-brand-soft: linear-gradient(
    135deg,
    rgba(var(--color-success-500-rgb), 0.12) 0%,
    rgba(var(--color-success-500-rgb), 0.03) 100%
  );
  --gradient-brand-medium: linear-gradient(
    135deg,
    rgba(var(--color-success-500-rgb), 0.2) 0%,
    rgba(var(--color-success-500-rgb), 0.08) 100%
  );
  --gradient-brand-intense: linear-gradient(
    135deg,
    #34ab79 0%,
    #198754 100%
  );
  --gradient-brand-vibrant: linear-gradient(
    135deg,
    #58c28b 0%,
    #198754 50%,
    #0f5132 100%
  );
  --gradient-premium: linear-gradient(
    45deg,
    #ffd700 0%,
    #ffed4e 50%,
    #ffb700 100%
  );
  --gradient-premium-intense: linear-gradient(
    45deg,
    #d4af37 0%,
    #ffd700 50%,
    #ffb700 100%
  );
  --gradient-hero-glow: radial-gradient(
    circle at center,
    rgba(var(--color-success-500-rgb), 0.18) 0%,
    rgba(var(--color-success-500-rgb), 0.08) 40%,
    transparent 65%
  );
  --gradient-subtle-glow: radial-gradient(
    circle at center,
    rgba(var(--color-success-500-rgb), 0.12) 0%,
    transparent 50%
  );

  /* === Typography === */
  --font-family-base: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-heading: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
  
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  --font-size-2xs: 0.625rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3rem;
  --font-size-hero: clamp(2.5rem, 5vw + 1rem, 4rem);
  
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  
  --letter-spacing-tighter: -0.05em;
  --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 scale === */
  --space-0: 0;
  --space-px: 1px;
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* === Radii === */
  --radius-none: 0;
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 1.75rem;
  --radius-3xl: 2rem;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* === Shadows === */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(15, 81, 50, 0.08);
  --shadow-sm: 0 0.25rem 0.5rem rgba(15, 81, 50, 0.08);
  --shadow-md: 0 0.5rem 1rem rgba(15, 81, 50, 0.1), 0 0.25rem 0.5rem rgba(15, 81, 50, 0.06);
  --shadow-lg: 0 1rem 2rem rgba(var(--color-success-500-rgb), 0.15), 0 0.5rem 1rem rgba(var(--color-success-500-rgb), 0.1);
  --shadow-xl: 0 1.5rem 3rem rgba(var(--color-success-500-rgb), 0.2), 0 0.75rem 1.5rem rgba(var(--color-success-500-rgb), 0.12);
  --shadow-2xl: 0 2rem 4rem rgba(var(--color-success-500-rgb), 0.25), 0 1rem 2rem rgba(var(--color-success-500-rgb), 0.15);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-glow-success: 0 0 20px rgba(var(--color-success-500-rgb), 0.3);
  --shadow-glow-premium: 0 0 25px rgba(255, 215, 0, 0.4);

  /* === Layout tokens === */
  --content-width-xs: 20rem;
  --content-width-sm: 24rem;
  --content-width-auth: 25rem;
  --content-width-md: 28rem;
  --content-width-dialog: 24rem;
  --content-width-dialog-wide: 32rem;
  --content-width-lg: 42rem;
  --content-width-xl: 48rem;
  --content-width-2xl: 56rem;
  --content-width-full: 72rem;
  
  --size-icon-xs: 1rem;
  --size-icon-sm: 1.25rem;
  --size-icon-md: 1.5rem;
  --size-icon-lg: 2rem;
  --size-icon-xl: 2.5rem;
  --size-logo: 2.5rem;
  --size-avatar-sm: 2rem;
  --size-avatar-md: 2.5rem;
  --size-avatar-lg: 3.5rem;
  --size-avatar-xl: 5rem;

  /* === Z-index scale === */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-offcanvas: 1045;
  --z-modal-backdrop: 1050;
  --z-modal: 1055;
  --z-popover: 1070;
  --z-tooltip: 1080;
  --z-notification: 1090;
  --z-max: 9999;

  /* === Motion & transitions === */
  --transition-instant: 50ms;
  --transition-fast: 100ms;
  --transition-base: 150ms;
  --transition-medium: 220ms;
  --transition-slow: 300ms;
  --transition-slower: 500ms;
  
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  
  --transition-base-timing: var(--transition-base) var(--ease-out);
  --transition-emphasis: var(--transition-medium) var(--ease-in-out);
  --transition-transform: transform var(--transition-emphasis);
  --transition-color: color var(--transition-base-timing), background-color var(--transition-base-timing), border-color var(--transition-base-timing);
  --transition-shadow: box-shadow var(--transition-emphasis);
  --transition-all: all var(--transition-emphasis);
  
  --focus-ring: 0 0 0 0.25rem var(--focus-ring-color);
  --focus-ring-danger: 0 0 0 0.25rem var(--focus-ring-color-danger);

  /* === Breakpoints (informational) === */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;

  /* === Effects === */
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  
  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;
}

/* === Dark theme overrides === */
[data-theme="dark"] {
  --color-background-page: #121212;
  --color-background-elevated: #1f1f1f;
  --color-surface-base: #1a1a1a;
  --color-surface-muted: #1f1f1f;
  --color-surface-subtle: rgba(var(--color-success-500-rgb), 0.18);
  --color-surface-hover: rgba(var(--color-success-500-rgb), 0.22);
  --color-surface-active: rgba(var(--color-success-500-rgb), 0.28);
  --color-surface-success-soft: rgba(var(--color-success-500-rgb), 0.2);
  --color-surface-success-medium: rgba(var(--color-success-500-rgb), 0.3);
  --color-surface-danger-soft: rgba(var(--color-danger-500-rgb), 0.15);
  --color-surface-warning-soft: rgba(var(--color-warning-500-rgb), 0.15);
  --color-surface-info-soft: rgba(var(--color-info-500-rgb), 0.15);
  
  --color-border-soft: rgba(var(--color-success-500-rgb), 0.35);
  --color-border-medium: rgba(var(--color-success-500-rgb), 0.45);
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --color-border-dark: rgba(255, 255, 255, 0.2);
  --color-border-light: rgba(255, 255, 255, 0.08);
  
  --color-text-primary: #f8f9fa;
  --color-text-secondary: rgba(248, 249, 250, 0.85);
  --color-text-tertiary: rgba(248, 249, 250, 0.75);
  --color-text-muted: rgba(248, 249, 250, 0.7);
  --color-text-disabled: rgba(248, 249, 250, 0.4);
  --color-text-inverse: var(--color-neutral-900);
  --color-text-link: var(--color-success-400);
  --color-text-link-hover: var(--color-success-300);
  
  --color-overlay-soft: rgba(0, 0, 0, 0.5);
  --color-overlay-medium: rgba(0, 0, 0, 0.7);
  --color-overlay-strong: rgba(0, 0, 0, 0.85);
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.45), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.55), 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 1.5rem 3rem rgba(0, 0, 0, 0.6), 0 0.75rem 1.5rem rgba(0, 0, 0, 0.4);
  --shadow-2xl: 0 2rem 4rem rgba(0, 0, 0, 0.65), 0 1rem 2rem rgba(0, 0, 0, 0.45);
  --shadow-glow-success: 0 0 20px rgba(var(--color-success-500-rgb), 0.4);
  
  --gradient-brand-soft: linear-gradient(
    135deg,
    rgba(var(--color-success-500-rgb), 0.25) 0%,
    rgba(var(--color-success-500-rgb), 0.12) 100%
  );
  --gradient-brand-medium: linear-gradient(
    135deg,
    rgba(var(--color-success-500-rgb), 0.35) 0%,
    rgba(var(--color-success-500-rgb), 0.18) 100%
  );
  --gradient-hero-glow: radial-gradient(
    circle at center,
    rgba(var(--color-success-500-rgb), 0.25) 0%,
    rgba(var(--color-success-500-rgb), 0.12) 40%,
    transparent 65%
  );
}

/* === Auto dark mode based on system preference === */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background-page: #121212;
    --color-background-elevated: #1f1f1f;
    --color-surface-base: #1a1a1a;
    --color-surface-muted: #1f1f1f;
    --color-surface-subtle: rgba(var(--color-success-500-rgb), 0.18);
    --color-surface-hover: rgba(var(--color-success-500-rgb), 0.22);
    --color-surface-active: rgba(var(--color-success-500-rgb), 0.28);
    --color-surface-success-soft: rgba(var(--color-success-500-rgb), 0.2);
    --color-surface-success-medium: rgba(var(--color-success-500-rgb), 0.3);
    --color-surface-danger-soft: rgba(var(--color-danger-500-rgb), 0.15);
    --color-surface-warning-soft: rgba(var(--color-warning-500-rgb), 0.15);
    --color-surface-info-soft: rgba(var(--color-info-500-rgb), 0.15);
    
    --color-border-soft: rgba(var(--color-success-500-rgb), 0.35);
    --color-border-medium: rgba(var(--color-success-500-rgb), 0.45);
    --color-border-strong: rgba(255, 255, 255, 0.12);
    --color-border-dark: rgba(255, 255, 255, 0.2);
    --color-border-light: rgba(255, 255, 255, 0.08);
    
    --color-text-primary: #f8f9fa;
    --color-text-secondary: rgba(248, 249, 250, 0.85);
    --color-text-tertiary: rgba(248, 249, 250, 0.75);
    --color-text-muted: rgba(248, 249, 250, 0.7);
    --color-text-disabled: rgba(248, 249, 250, 0.4);
    --color-text-inverse: var(--color-neutral-900);
    --color-text-link: var(--color-success-400);
    --color-text-link-hover: var(--color-success-300);
    
    --color-overlay-soft: rgba(0, 0, 0, 0.5);
    --color-overlay-medium: rgba(0, 0, 0, 0.7);
    --color-overlay-strong: rgba(0, 0, 0, 0.85);
    
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.45), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.55), 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 1.5rem 3rem rgba(0, 0, 0, 0.6), 0 0.75rem 1.5rem rgba(0, 0, 0, 0.4);
    --shadow-2xl: 0 2rem 4rem rgba(0, 0, 0, 0.65), 0 1rem 2rem rgba(0, 0, 0, 0.45);
    --shadow-glow-success: 0 0 20px rgba(var(--color-success-500-rgb), 0.4);
    
    --gradient-brand-soft: linear-gradient(
      135deg,
      rgba(var(--color-success-500-rgb), 0.25) 0%,
      rgba(var(--color-success-500-rgb), 0.12) 100%
    );
    --gradient-brand-medium: linear-gradient(
      135deg,
      rgba(var(--color-success-500-rgb), 0.35) 0%,
      rgba(var(--color-success-500-rgb), 0.18) 100%
    );
    --gradient-hero-glow: radial-gradient(
      circle at center,
      rgba(var(--color-success-500-rgb), 0.25) 0%,
      rgba(var(--color-success-500-rgb), 0.12) 40%,
      transparent 65%
    );
  }
}

/* === Base typography === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-background-page);
  transition: background-color var(--transition-emphasis), color var(--transition-emphasis);
  overflow-x: hidden;
}

/* === Headings === */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--space-md);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

h1 { 
  font-size: var(--font-size-hero);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-tighter);
}

h2 { 
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

h3 { 
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

h4 { 
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

h5 { 
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

h6 { 
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

/* === Text elements === */
p {
  margin-top: 0;
  margin-bottom: var(--space-md);
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: var(--transition-color);
}

a:hover,
a:focus {
  color: var(--color-text-link-hover);
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

small, 
.small {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}

strong, 
b {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

em, 
i {
  font-style: italic;
}

mark {
  background-color: var(--color-surface-success-soft);
  color: var(--color-text-primary);
  padding: 0.125em 0.25em;
  border-radius: var(--radius-xs);
}

code {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
  padding: 0.125rem 0.375rem;
  background-color: var(--color-surface-muted);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-xs);
  color: var(--color-text-primary);
}

pre {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  padding: var(--space-md);
  background-color: var(--color-surface-muted);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-md);
  line-height: var(--line-height-normal);
}

pre code {
  padding: 0;
  background: none;
  border: none;
  font-size: inherit;
}

blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-success-500);
  background-color: var(--color-surface-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-style: italic;
}

blockquote p:last-child {
  margin-bottom: 0;
}

hr {
  margin: var(--space-xl) 0;
  border: none;
  border-top: 1px solid var(--color-border-strong);
  opacity: 0.5;
}

/* === Lists === */
ul, ol {
  margin-top: 0;
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-bottom: 0;
}

li {
  margin-bottom: var(--space-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* === Images & media === */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

svg {
  display: inline-block;
  vertical-align: middle;
}

/* === Tables === */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
}

th {
  font-weight: var(--font-weight-semibold);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-surface-muted);
  border-bottom: 2px solid var(--color-border-strong);
  color: var(--color-text-primary);
}

td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-soft);
  color: var(--color-text-secondary);
}

tr:hover {
  background-color: var(--color-surface-hover);
}

/* === Utility classes === */
.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-tertiary { color: var(--color-text-tertiary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-success { color: var(--color-success-600) !important; }
.text-danger { color: var(--color-danger-500) !important; }
.text-warning { color: var(--color-warning-500) !important; }
.text-info { color: var(--color-info-500) !important; }

.bg-surface { background-color: var(--color-surface-base) !important; }
.bg-muted { background-color: var(--color-surface-muted) !important; }
.bg-subtle { background-color: var(--color-surface-subtle) !important; }
.bg-success-soft { background-color: var(--color-surface-success-soft) !important; }

.fw-light { font-weight: var(--font-weight-light) !important; }
.fw-regular { font-weight: var(--font-weight-regular) !important; }
.fw-medium { font-weight: var(--font-weight-medium) !important; }
.fw-semibold { font-weight: var(--font-weight-semibold) !important; }
.fw-bold { font-weight: var(--font-weight-bold) !important; }

.rounded-xs { border-radius: var(--radius-xs) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-pill { border-radius: var(--radius-pill) !important; }
.rounded-circle { border-radius: var(--radius-circle) !important; }

.shadow-none { box-shadow: var(--shadow-none) !important; }
.shadow-xs { box-shadow: var(--shadow-xs) !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* === Accessibility === */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-success-500);
  color: white;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: var(--z-max);
}

.skip-link:focus {
  top: 0;
}

/* === Print styles === */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === High contrast mode === */
@media (prefers-contrast: high) {
  :root {
    --color-border-strong: rgba(0, 0, 0, 0.3);
    --color-text-muted: var(--color-text-secondary);
  }

  [data-theme="dark"] {
    --color-border-strong: rgba(255, 255, 255, 0.3);
  }
}

/* === Color scheme meta === */
:root {
  color-scheme: light dark;
}

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}