/* ============================================================
   S3EB DataLake — design tokens (only)
   Brand: orange #f08221 (S3EB), secondary blue #4778ff.
   Typography: Geist (body + titles + labels), Geist Mono (code/values).
   Inspired by Docker Desktop / Vercel / Linear modern dashboards.
   Icons: Font Awesome 6.
   Color scales: Tailwind v4 OKLCH for perceptual consistency.

   This file declares CSS custom properties only. Reset, typography,
   layout, components and page-specific styles live in dedicated
   files loaded alongside this one (see views/layouts/*.ejs).
   ============================================================ */

:root {
  /* Brand */
  --color-primary: #f08221;
  --color-primary-dark: #ff6900;
  --color-primary-light: #ffb86a;
  --color-primary-bg: #fff3e6;
  --color-secondary: #4778ff;
  --color-secondary-bg: #e6edff;

  /* Typography — Geist family (Vercel) for that Docker Desktop / modern SaaS feel */
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-title: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-label: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans: var(--font-body);
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

  /* Tailwind v4 OKLCH scales */
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-orange-600: oklch(64.6% 0.222 41.116);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-green-50: oklch(98.2% 0.018 155.826);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --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-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-black: #000;
  --color-white: #fff;

  /* Semantic — only references used outside this file. A brand tweak
     only touches this block. */
  --color-bg: var(--color-gray-50);
  --color-surface: var(--color-white);
  --color-surface-alt: var(--color-gray-100);
  --color-border: var(--color-gray-200);
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-500);
  --color-primary-hover: var(--color-primary-dark);

  /* Status palette — navy / amber / rose. Modern, perceptually
     balanced in OKLCH. Operational uses the S3EB deep navy
     (#001d70) instead of green: distinctive, on-brand, contrasts
     cleanly with the warm amber/rose/orange trio. Brand orange
     remains reserved for CTA/hover/focus and is never a status
     colour. Rescue mode (L8) will pick its own tone outside this
     trio when it lands. */
  --color-success: #001d70;
  --color-success-bg: oklch(95% 0.04 270);
  --color-warning: oklch(72% 0.16 75);
  --color-warning-bg: oklch(96% 0.05 85);
  --color-danger: oklch(62% 0.21 15);
  --color-danger-bg: oklch(95% 0.04 15);
  --color-info-bg: var(--color-blue-50);

  /* Spacing — Tailwind-style 0.25rem base */
  --spacing: 0.25rem;
  --space-1: calc(var(--spacing) * 1); /* 0.25rem */
  --space-2: calc(var(--spacing) * 2); /* 0.5rem  */
  --space-3: calc(var(--spacing) * 3); /* 0.75rem */
  --space-4: calc(var(--spacing) * 4); /* 1rem    */
  --space-5: calc(var(--spacing) * 6); /* 1.5rem  */
  --space-6: calc(var(--spacing) * 8); /* 2rem    */
  --space-7: calc(var(--spacing) * 12);/* 3rem    */

  /* Type ramp */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);
}