@layer reset, tokens, base, components, utilities;

/*
 * Couvra Design Tokens
 * Single source of truth for all visual tokens.
 */

@layer tokens {
:root {
  /* ------------------------------------------------
   * Primary — Terracotta (brand identity)
   * ------------------------------------------------ */
  --color-primary-50:  hsl(18, 65%, 96%);
  --color-primary-100: hsl(18, 65%, 90%);
  --color-primary-200: hsl(18, 65%, 80%);
  --color-primary-300: hsl(18, 65%, 70%);
  --color-primary-400: hsl(18, 65%, 60%);
  --color-primary-500: hsl(18, 65%, 50%);
  --color-primary-600: hsl(18, 65%, 42%);
  --color-primary-700: hsl(18, 65%, 33%);
  --color-primary-800: hsl(18, 60%, 22%);
  --color-primary-900: hsl(18, 50%, 12%);

  /* Brand aliases (backward-compatible) */
  --color-brand:       var(--color-primary-500);
  --color-brand-light: var(--color-primary-50);
  --color-brand-dark:  var(--color-primary-700);
  --color-brand-hover: var(--color-primary-600);

  /* ------------------------------------------------
   * Contrast — Deep Teal (complement, hue 198)
   * ------------------------------------------------ */
  --color-contrast-50:  hsl(198, 55%, 95%);
  --color-contrast-100: hsl(198, 55%, 87%);
  --color-contrast-200: hsl(198, 50%, 72%);
  --color-contrast-300: hsl(198, 50%, 56%);
  --color-contrast-400: hsl(198, 55%, 45%);
  --color-contrast-500: hsl(198, 60%, 38%);
  --color-contrast-600: hsl(198, 60%, 30%);
  --color-contrast-700: hsl(198, 55%, 22%);
  --color-contrast-800: hsl(198, 50%, 15%);
  --color-contrast-900: hsl(198, 45%, 10%);

  /* ------------------------------------------------
   * Harmony — Warm Gold (analogous, hue 40)
   * ------------------------------------------------ */
  --color-harmony-50:  hsl(40, 70%, 95%);
  --color-harmony-100: hsl(40, 70%, 88%);
  --color-harmony-200: hsl(40, 65%, 75%);
  --color-harmony-300: hsl(40, 60%, 60%);
  --color-harmony-400: hsl(40, 58%, 50%);
  --color-harmony-500: hsl(40, 60%, 42%);
  --color-harmony-600: hsl(40, 55%, 33%);
  --color-harmony-700: hsl(40, 45%, 22%);
  --color-harmony-800: hsl(40, 40%, 15%);
  --color-harmony-900: hsl(40, 35%, 9%);

  /* ------------------------------------------------
   * Neutral — Warm Grays (hue 20-30)
   * ------------------------------------------------ */
  --color-gray-50:  hsl(30, 20%, 98%);
  --color-gray-100: hsl(30, 15%, 95%);
  --color-gray-200: hsl(30, 12%, 90%);
  --color-gray-300: hsl(30, 10%, 82%);
  --color-gray-400: hsl(25, 8%, 65%);
  --color-gray-500: hsl(22, 7%, 50%);
  --color-gray-600: hsl(20, 8%, 38%);
  --color-gray-700: hsl(20, 10%, 25%);
  --color-gray-800: hsl(20, 12%, 16%);
  --color-gray-900: hsl(20, 15%, 10%);

  /* Neutral aliases (backward-compatible) */
  --color-bg:            var(--color-gray-50);
  --color-bg-subtle:     var(--color-gray-100);
  --color-surface:       hsl(30, 20%, 99%);
  --color-surface-raised: #ffffff;
  --color-border:        var(--color-gray-300);
  --color-border-light:  var(--color-gray-200);
  --color-text:          var(--color-gray-700);
  --color-text-muted:    var(--color-gray-500);
  --color-text-quiet:    var(--color-gray-400);

  /* ------------------------------------------------
   * Semantic — Success (hue 152)
   * ------------------------------------------------ */
  --color-success:        hsl(152, 50%, 38%);
  --color-success-bg:     hsl(152, 40%, 94%);
  --color-success-border: hsl(152, 35%, 78%);
  --color-success-text:   hsl(152, 50%, 22%);

  /* Semantic — Danger (hue 4) */
  --color-danger:        hsl(4, 55%, 50%);
  --color-danger-bg:     hsl(4, 50%, 95%);
  --color-danger-border: hsl(4, 45%, 82%);
  --color-danger-text:   hsl(4, 55%, 32%);

  /* Semantic — Warning (hue 42, offset from brand hue 18) */
  --color-warning:        hsl(42, 80%, 48%);
  --color-warning-bg:     hsl(42, 70%, 94%);
  --color-warning-border: hsl(42, 55%, 78%);
  --color-warning-text:   hsl(42, 70%, 28%);

  /* Semantic — Info (hue 210) */
  --color-info:        hsl(222, 50%, 50%);
  --color-info-bg:     hsl(222, 45%, 95%);
  --color-info-border: hsl(222, 40%, 80%);
  --color-info-text:   hsl(222, 50%, 30%);

  /* Semantic — Neutral badge */
  --color-neutral-badge-bg:   var(--color-gray-200);
  --color-neutral-badge-text: var(--color-gray-600);

  /* ------------------------------------------------
   * Special-purpose
   * ------------------------------------------------ */
  --color-text-inverse: #ffffff;
  --color-overlay:    hsla(20, 20%, 10%, 0.5);
  --color-focus-ring: hsla(18, 65%, 50%, 0.35);
  --color-focus-ring-solid: hsl(18, 70%, 38%);
  --color-link:       var(--color-contrast-500);
  --color-link-hover: var(--color-contrast-600);
  --color-selection:  hsl(18, 65%, 92%);
  --color-skeleton:   var(--color-gray-200);

  /* Typography */
  --font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: clamp(1.125rem, 1.1rem + 0.3vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
  --font-size-2xl: clamp(1.375rem, 1.2rem + 1vw, 1.75rem);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;

  /* Spacing */
  --space-2xs: 0.25rem;
  --space-xs: 0.375rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;

  /* Touch targets (accessibility) */
  --touch-target-min: 2.75rem;

  /* Borders & radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --border-width: 1px;

  /* Shadows */
  --shadow-sm: 0 1px 2px hsla(20, 20%, 30%, 0.06);
  --shadow-md: 0 1px 3px hsla(20, 20%, 30%, 0.08), 0 1px 2px hsla(20, 20%, 30%, 0.06);
  --shadow-lg: 0 4px 12px hsla(20, 20%, 30%, 0.1);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;

  /* Layout */
  --sidebar-width: 250px;
  --header-height: auto;
  --main-max-width: 1200px;
  --public-max-width: 720px;
  --breakpoint-sm: 600px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 900px;
}
}