/*
 * 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;

  /* === Palette: warm accents === */
  --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-500-rgb: 204, 119, 34;

  --color-basil-200: #c6d9ba;
  --color-basil-300: #aaca92;
  --color-basil-400: #91bb73;
  --color-basil-500: #7ba05b;
  --color-basil-600: #5c7d3f;

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

  /* === Palette: neutrals & states === */
  --color-neutral-0: #ffffff;
  --color-neutral-100: #f8f9fa;
  --color-neutral-200: #e9ecef;
  --color-neutral-300: #dee2e6;
  --color-neutral-800: #2f2f2f;
  --color-neutral-900: #1a1a1a;

  --color-danger-500: #d9534f;
  --color-warning-500: #f0ad4e;
  --color-info-500: #0dcaf0;

  /* === Semantic surfaces & text === */
  --color-background-page: var(--color-cream-100);
  --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-success-soft: rgba(var(--color-success-500-rgb), 0.12);
  --color-border-soft: rgba(var(--color-success-500-rgb), 0.18);
  --color-border-strong: rgba(0, 0, 0, 0.12);
  --color-border-dark: rgba(0, 0, 0, 0.4);

  --color-text-primary: #5d3a00;
  --color-text-secondary: rgba(93, 58, 0, 0.82);
  --color-text-muted: rgba(93, 58, 0, 0.65);
  --color-text-inverse: var(--color-neutral-0);

  --color-overlay-soft: rgba(0, 0, 0, 0.35);
  --color-overlay-strong: rgba(0, 0, 0, 0.7);
  --focus-ring-color: rgba(var(--color-success-500-rgb), 0.35);

  /* === Gradients === */
  --gradient-brand-soft: linear-gradient(
    135deg,
    rgba(var(--color-success-500-rgb), 0.12),
    rgba(var(--color-success-500-rgb), 0.03)
  );
  --gradient-brand-intense: linear-gradient(135deg, #34ab79, #198754);
  --gradient-premium: linear-gradient(45deg, #ffd700, #ffb700);
  --gradient-hero-glow: radial-gradient(circle at center, rgba(var(--color-success-500-rgb), 0.18), transparent 65%);

  /* === Typography === */
  --font-family-base: 'Open Sans', sans-serif;
  --font-family-heading: 'Open Sans', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: clamp(2.5rem, 5vw, 3.5rem);
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-base: 1.6;

  /* === Spacing scale === */
  --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;

  /* === Radii === */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(15, 81, 50, 0.12);
  --shadow-sm: 0 0.25rem 0.5rem rgba(15, 81, 50, 0.08);
  --shadow-md: 0 0.75rem 1.5rem rgba(15, 81, 50, 0.12);
  --shadow-lg: 0 1rem 2.5rem rgba(var(--color-success-500-rgb), 0.18);
  --shadow-xl: 0 1.5rem 3rem rgba(var(--color-success-500-rgb), 0.2);

  /* === Layout tokens === */
  --content-width-auth: 25rem;
  --content-width-dialog: 24rem;
  --content-width-dialog-wide: 32rem;
  --size-logo: 2.5rem;

  /* === Motion === */
  --transition-base: 150ms ease;
  --transition-emphasis: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-transform: transform var(--transition-emphasis);
  --focus-ring: 0 0 0 0.25rem var(--focus-ring-color);
}

[data-theme="dark"] {
  --color-background-page: #121212;
  --color-surface-base: #1a1a1a;
  --color-surface-muted: #1f1f1f;
  --color-surface-subtle: rgba(var(--color-success-500-rgb), 0.18);
  --color-surface-success-soft: rgba(var(--color-success-500-rgb), 0.2);
  --color-border-soft: rgba(var(--color-success-500-rgb), 0.35);
  --color-border-strong: rgba(255, 255, 255, 0.12);
  --color-text-primary: #f8f9fa;
  --color-text-secondary: rgba(248, 249, 250, 0.85);
  --color-text-muted: rgba(248, 249, 250, 0.7);
  --shadow-lg: 0 1rem 2.5rem rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 1.5rem 3rem rgba(0, 0, 0, 0.6);
  --gradient-brand-soft: linear-gradient(
    135deg,
    rgba(var(--color-success-500-rgb), 0.25),
    rgba(var(--color-success-500-rgb), 0.12)
  );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-background-page: #121212;
    --color-surface-base: #1a1a1a;
    --color-surface-muted: #1f1f1f;
    --color-surface-subtle: rgba(var(--color-success-500-rgb), 0.18);
    --color-surface-success-soft: rgba(var(--color-success-500-rgb), 0.2);
    --color-border-soft: rgba(var(--color-success-500-rgb), 0.35);
    --color-border-strong: rgba(255, 255, 255, 0.12);
    --color-text-primary: #f8f9fa;
    --color-text-secondary: rgba(248, 249, 250, 0.85);
    --color-text-muted: rgba(248, 249, 250, 0.7);
    --shadow-lg: 0 1rem 2.5rem rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 1.5rem 3rem rgba(0, 0, 0, 0.6);
    --gradient-brand-soft: linear-gradient(
      135deg,
      rgba(var(--color-success-500-rgb), 0.25),
      rgba(var(--color-success-500-rgb), 0.12)
    );
  }
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  background-color: var(--color-background-page);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
  transition: background-color var(--transition-emphasis), color var(--transition-emphasis);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-sm); }

p {
  font-size: var(--font-size-md);
  margin-bottom: var(--space-md);
  color: var(--color-text-secondary);
}

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

strong {
  font-weight: var(--font-weight-semibold);
}