/* =============================================================================
   Glisse Design Tokens
   Single source of truth for colours, type, spacing, radius, shadow, motion.
   Replaces the Tailwind `@theme` block. Values are FAITHFUL — identical to what
   the previous Tailwind build emitted, so there is no visual change.

   Sections:
     1. Brand / semantic palette   (authored design system)
     2. Neutral gray ramp
     3. Status palettes            (red / yellow / green / blue — were Tailwind defaults)
     4. Surface & legacy aliases   (added during de-Tailwind for page stylesheets)
     5. Typography scale
     6. Spacing, radius, shadow, motion
   See docs/webapp/design-system.md
   ============================================================================= */

:root {
  /* ---- 1. Brand / semantic palette ---------------------------------------- */
  --color-primary: #2196f3;
  --color-primary-dark: #1976d2;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --color-info: #17a2b8;
  --color-purple: #6f42c1;
  --color-teal: #20c997;
  --color-orange: #fd7e14;

  /* Bootstrap-compatible blue (used in buttons / links) */
  --color-blue: #007bff;
  --color-blue-hover: #0056b3;
  --color-blue-active: #004085;

  /* ---- 2. Neutral gray ramp ----------------------------------------------- */
  --color-white: #fff;
  --color-gray-50: #f8f9fa;
  --color-gray-100: #f1f3f5;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* Border aliases */
  --color-border: #dee2e6;
  --color-border-light: #f0f0f0;

  /* ---- 3. Status palettes (Bootstrap-aligned, were Tailwind oklch defaults) */
  /* Kept as the exact oklch values the Tailwind build emitted (flash / state). */
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-yellow-50: oklch(98.7% 0.026 102.212);
  --color-yellow-200: oklch(94.5% 0.129 101.54);
  --color-yellow-600: oklch(68.1% 0.162 75.834);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-green-50: oklch(98.2% 0.018 155.826);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-300: oklch(87.1% 0.15 154.449);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-800: oklch(42.4% 0.199 265.638);

  /* ---- 5. Typography scale ------------------------------------------------ */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);

  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);

  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-wide: 0.025em;

  /* ---- 6. Spacing, radius, shadow, motion --------------------------------- */
  --spacing: 0.25rem;
  --container-6xl: 72rem;

  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px #0000000d;
  --shadow-sm: 0 2px 4px #0000001a;
  --shadow-md: 0 2px 8px #00000026;
  --shadow-lg: 0 4px 12px #00000026;
  --shadow-xl: 0 0.5rem 1rem #00000026;

  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --default-transition-duration: 0.15s;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   Semantic palette extensions (status darks/tints, primary tint, accents)
   Added during the colour consolidation: the per-hex tokens were merged into
   this curated set by hue family + lightness role. See design-system.md.
   ============================================================================= */
:root {
  --color-black: #000000;

  --color-primary-light: #cfe2ff;

  --color-success-dark: #0f5132;
  --color-success-bg: #d4edda;
  --color-danger-dark: #721c24;
  --color-danger-bg: #f8d7da;
  --color-warning-dark: #664d03;
  --color-warning-bg: #fff3cd;
  --color-info-dark: #055160;
  --color-info-bg: #cff4fc;
  --color-orange-dark: #9a3412;
  --color-orange-bg: #ffedd5;
  --color-teal-dark: #0d5a44;
  --color-teal-bg: #d2f4ea;
  --color-purple-dark: #432874;
  --color-purple-bg: #e2d9f3;

  --color-pink: #e83e8c;
}