/* WhiteBoar Design System — OKLCH Tokens (single source of truth)
 *
 * Consumed by src/app/globals.css via @import.
 * All tokens use the --wb- prefix to avoid collision with tenant tokens.
 */

:root {
  /* ── Core Palette ── */
  --wb-color-accent: oklch(0.881 0.181 94);      /* #FFD400 */
  --wb-color-accent-hover: oklch(0.82 0.17 94);  /* darkened accent for hover */
  --wb-color-black: oklch(0 0 0);                 /* #000000 */
  --wb-color-white: oklch(1 0 0);                 /* #FFFFFF */

  /* ── Neutral Gray Scale ── */
  --wb-gray-900: oklch(0.218 0 0);                /* #1A1A1A */
  --wb-gray-700: oklch(0.42 0 0);                 /* #4D4D4D */
  --wb-gray-500: oklch(0.6 0 0);                  /* #808080 */
  --wb-gray-300: oklch(0.861 0 0);                /* #D1D1D1 */
  --wb-gray-100: oklch(0.97 0 0);                 /* #F5F5F5 */

  /* ── Admin Semantic Colors (Light) ── */
  --wb-foreground: oklch(0.205 0 0);              /* #171717 — primary text, buttons */
  --wb-foreground-hover: oklch(0.371 0 0);        /* #404040 — button hover */
  --wb-muted-foreground: oklch(0.551 0.023 264.4); /* #6b7280 — secondary text */
  --wb-tertiary: oklch(0.714 0.019 261.3);        /* #9ca3af — hints, placeholders */
  --wb-ring: oklch(0.715 0 0);                    /* #a3a3a3 — focus rings */
  --wb-tooltip: oklch(0.373 0.031 259.7);         /* #374151 — tooltip text */
  --wb-border: oklch(0.922 0 0);                  /* #e5e5e5 — borders, dividers */
  --wb-border-light: oklch(0.87 0 0);             /* #d4d4d4 — subtle borders */
  --wb-hover-bg: oklch(0.97 0 0);                 /* #f5f5f5 — hover backgrounds */
  --wb-panel-bg: oklch(0.985 0 0);                /* #fafafa — panel backgrounds */
  --wb-background: oklch(1 0 0);                   /* #ffffff — app background */
  --wb-card: oklch(1 0 0);                         /* #ffffff — card / panel surface */
  --wb-muted: oklch(0.97 0 0);                    /* #f5f5f5 — subtle fill (= gray-100) */

  /* ── Status Colors (Light) ── */
  --wb-success: oklch(0.627 0.17 149.2);          /* #16a34a */
  --wb-warning: oklch(0.681 0.142 75.8);          /* #ca8a04 */
  --wb-error: oklch(0.577 0.215 27.3);            /* #dc2626 */
  --wb-error-dark: oklch(0.444 0.161 26.9);       /* #991b1b */
  --wb-success-bg: oklch(0.962 0.043 156.9);      /* #dcfce7 */
  --wb-error-bg: oklch(0.971 0.013 17);           /* #fef2f2 */
  --wb-error-border: oklch(0.885 0.059 18.3);     /* #fecaca */
  --wb-warning-bg: oklch(0.987 0.026 102.3);      /* #fefce8 */
  --wb-warning-border: oklch(0.905 0.077 95.2);   /* #fde68a */
  --wb-success-border: oklch(0.905 0.093 164.1);  /* #86efac */
  --wb-info: oklch(0.546 0.215 262.9);            /* #2563eb — info / resolving */
  --wb-info-bg: oklch(0.97 0.014 254.6);          /* #eff6ff */
  --wb-info-border: oklch(0.882 0.057 254.1);     /* #bfdbfe */

  /* ── Avatar / Categorical Accents (decorative, per-expert) ── */
  --wb-avatar-teal: oklch(0.591 0.09 183.4);      /* #2f8f83 */
  --wb-avatar-amber: oklch(0.764 0.142 72.2);     /* #e9a23b */
  --wb-avatar-plum: oklch(0.542 0.114 301);       /* #7b5ea7 */
  --wb-avatar-rose: oklch(0.597 0.144 1.1);       /* #c2557a */
  --wb-avatar-olive: oklch(0.563 0.088 119.8);    /* #6f7d3f */
  --wb-avatar-ink: var(--wb-foreground);          /* #171717 (tracks foreground) */

  /* ── Typography ── */
  --wb-font-heading: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --wb-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --wb-font-mono: "Fira Code", ui-monospace, monospace;

  /* type scale (mobile-first; headings clamp) */
  --wb-text-display: clamp(2.5rem, 5vw + 1rem, 4rem);
  --wb-text-h1: clamp(2rem, 3vw + 1rem, 3rem);
  --wb-text-h2: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
  --wb-text-h3: 1.5rem;
  --wb-text-h4: 1.25rem;
  --wb-text-lg: 1.125rem;
  --wb-text-base: 1rem;
  --wb-text-sm: 0.875rem;
  --wb-text-xs: 0.75rem;

  /* weights */
  --wb-weight-regular: 400;
  --wb-weight-medium: 500;
  --wb-weight-semibold: 600;
  --wb-weight-bold: 700;

  /* leading */
  --wb-leading-tight: 1.1;
  --wb-leading-snug: 1.3;
  --wb-leading-normal: 1.5;
  --wb-leading-relaxed: 1.65;

  /* tracking */
  --wb-tracking-tight: -0.01em;
  --wb-tracking-normal: 0;
  --wb-tracking-wide: 0.04em;

  /* ── Spacing (Geist scale) ── */
  --wb-space-0: 0;
  --wb-space-1: 4px;
  --wb-space-2: 8px;
  --wb-space-3: 12px;
  --wb-space-4: 16px;
  --wb-space-5: 24px;
  --wb-space-6: 32px;
  --wb-space-7: 48px;
  --wb-space-8: 64px;

  /* ── Radii & Elevation ── */
  --wb-radius-none: 0;
  --wb-radius-sm: 2px;
  --wb-radius-md: 4px;
  --wb-radius-lg: 8px;
  --wb-radius-pill: 9999px;
  --wb-elev-sm: 0 1px 2px oklch(0 0 0 / 0.05);
  --wb-elev-md: 0 2px 4px oklch(0 0 0 / 0.1);
  --wb-elev-lg: 0 4px 16px oklch(0 0 0 / 0.15);

  /* ── Motion (shared easing / durations) ── */
  --wb-ease-standard: cubic-bezier(0.25, 0.8, 0.25, 1);
  --wb-dur-fast: 150ms;
  --wb-dur-base: 200ms;
  --wb-dur-slow: 300ms;
  --wb-dur-slower: 400ms;

  /* ── Max Widths ── */
  --wb-max-readable: 72ch;
  --wb-max-content: 1200px;
}

/* ── Dark Mode ── */
.dark {
  /* Semantic — inverted */
  --wb-foreground: oklch(0.985 0 0);              /* light text on dark */
  --wb-foreground-hover: oklch(0.87 0 0);
  --wb-muted-foreground: oklch(0.714 0.019 261.3);
  --wb-tertiary: oklch(0.551 0.023 264.4);
  --wb-ring: oklch(0.6 0 0);
  --wb-tooltip: oklch(0.87 0 0);
  --wb-border: oklch(0.3 0 0);
  --wb-border-light: oklch(0.371 0 0);
  --wb-hover-bg: oklch(0.25 0 0);
  --wb-panel-bg: oklch(0.205 0 0);
  --wb-background: oklch(0.145 0 0);              /* #0a0a0a */
  --wb-card: oklch(0.205 0 0);                    /* #171717 */
  --wb-muted: oklch(0.218 0 0);                   /* #1a1a1a */

  /* Status — keep hues, adjust lightness for dark backgrounds */
  --wb-success: oklch(0.7 0.17 149.2);
  --wb-warning: oklch(0.75 0.142 75.8);
  --wb-error: oklch(0.65 0.215 27.3);
  --wb-error-dark: oklch(0.55 0.161 26.9);
  --wb-success-bg: oklch(0.25 0.04 150);
  --wb-error-bg: oklch(0.25 0.03 20);
  --wb-error-border: oklch(0.35 0.06 20);
  --wb-warning-bg: oklch(0.25 0.03 90);
  --wb-info: oklch(0.65 0.18 262.9);
  --wb-info-bg: oklch(0.25 0.05 262);
  --wb-info-border: oklch(0.35 0.07 262);

  /* Elevation — lighter shadows on dark */
  --wb-elev-sm: 0 1px 2px oklch(0 0 0 / 0.2);
  --wb-elev-md: 0 2px 4px oklch(0 0 0 / 0.3);
  --wb-elev-lg: 0 4px 16px oklch(0 0 0 / 0.4);
}