@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;

  /* ========================================
     TokenTracker Design System - Brand Colors
     ======================================== */

  /* Colors - Primary (using OKLCH for perceptual uniformity) */
  --oai-black: #0a0a0a;
  --oai-white: #fafafa;

  /* Colors - Warm-tinted Neutrals (subtle green tint for cohesion)
     sRGB hex fallbacks for browsers without oklch() support (Chromium <111,
     e.g. older WebView2). The @supports block at the end of this file restores
     the original oklch() values on modern engines, so nothing changes there. */
  --oai-gray-50: #f6f9f6;
  --oai-gray-100: #eef4ee;
  --oai-gray-200: #d8e1d8;
  --oai-gray-300: #c0cbbf;
  --oai-gray-400: #95a395;
  --oai-gray-500: #677667;
  --oai-gray-600: #4d594d;
  --oai-gray-700: #343d34;
  --oai-gray-800: #1d241d;
  --oai-gray-900: #0f130f;
  --oai-gray-950: #050605;

  /* Brand Color - Muted Forest Green (适合白色背景)
     使用更柔和的深绿色，而非刺眼的荧光绿
  */
  --brand-primary: #059669;
  --brand-primary-dark: #047857;
  --brand-primary-light: #10b981;
  --brand-50: #ecfdf5;
  --brand-100: #d1fae5;
  --brand-200: #a7f3d0;
  --brand-300: #6ee7b7;
  --brand-400: #34d399;
  --brand-500: #10b981;
  --brand-600: #059669;
  --brand-700: #047857;
  --brand-800: #065f46;
  --brand-900: #064e3b;
  --brand-950: #022c22;

  /* Supporting accent - Emerald (30%) */
  --forest: #10b981;
  --forest-dark: #059669;
  --forest-light: #34d399;

  /* Secondary accents - Amber for contrast (10%) */
  --amber: #f59e0b;
  --amber-dark: #d97706;
  --amber-light: #fbbf24;

  /* Legacy blue mapping - now uses brand green */
  --oai-blue: #059669;
  --oai-blue-dark: #047857;
  --oai-blue-light: #10b981;

  /* Colors - Semantic */
  --oai-success: #10b981;
  --oai-warning: #f59e0b;
  --oai-error: #ef4444;
  --oai-info: #059669;

  /* Typography - Font Families */
  --oai-font-sans: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, sans-serif;
  --oai-font-mono: "SF Mono", sfmono-regular, ui-monospace, menlo, monaco, consolas, monospace;

  /* Typography - Font Sizes */
  --text-hero: 48px;
  --text-h1: 36px;
  --text-h2: 28px;
  --text-h3: 22px;
  --text-h4: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-label: 11px;

  /* Spacing */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

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

/* ========================================
   Dark Mode Variables
   ======================================== */

:root.dark {
  color-scheme: dark;

  /* Colors - Primary (swapped for dark mode) */
  --oai-black: #fafafa;
  --oai-white: #0a0a0a;

  /* Colors - Warm-tinted Neutrals (hue 145 matches brand green for cohesion)
     sRGB hex fallbacks; oklch() restored via the @supports block at EOF. */
  --oai-gray-50: #151615;
  --oai-gray-100: #1e201e;
  --oai-gray-200: #2d2e2d;
  --oai-gray-300: #464846;
  --oai-gray-400: #6f726f;
  --oai-gray-500: #8d908d;
  --oai-gray-600: #acafac;
  --oai-gray-700: #cccecc;
  --oai-gray-800: #e4e5e4;
  --oai-gray-900: #f1f2f1;
  --oai-gray-950: #f8f8f8;

  /* Brand colors remain the same but may need adjustment for dark bg */
  --brand-primary: #10b981;
  --brand-primary-dark: #059669;
  --brand-primary-light: #34d399;

  /* Supporting accents remain the same */
  --forest: #34d399;
  --forest-dark: #10b981;
  --forest-light: #6ee7b7;

  /* Legacy blue mapping */
  --oai-blue: #10b981;
  --oai-blue-dark: #059669;
  --oai-blue-light: #34d399;

  /* Semantic colors */
  --oai-success: #34d399;
  --oai-warning: #fbbf24;
  --oai-error: #f87171;
  --oai-info: #10b981;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--oai-white);
  color: var(--oai-black);
  font-family: var(--oai-font-sans);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global: suppress focus outlines and Tailwind ring on Tab/click focus.
   Inputs/textareas keep their own border-color :focus styling defined per-component. */
*:focus,
*:focus-visible {
  outline: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* TokenTrackerBar WKWebView: `native-app` on <html> (inline head script + Swift); NSVisualEffectView under transparent WKWebView. */
html.native-app,
html.native-app.dark {
  background: transparent !important;
}

html.native-app body,
html.native-app #root {
  background: transparent !important;
}

html.native-app #root {
  min-height: 100%;
}

/* Mac App：主内容卡圆角由 Swift 注入 --tt-main-card-radius（与窗口留白同心近似），见 DashboardChromeMetrics */
html.native-app {
  --tt-main-card-radius: 1rem;
}

html.native-app .tt-native-main-card {
  border-radius: var(--tt-main-card-radius, 1rem);
}

/* Windows WebView2 native shell: DWM acrylic sits underneath the transparent page.
   Add a subtle tint so the sidebar/title strip reads like glass even when the
   OS backdrop has little content behind it to blur. */
html.native-windows-app .tt-native-glass-shell {
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018) 36%, rgba(0, 0, 0, 0.14)),
    rgba(32, 32, 32, 0.72) !important;
}

html.native-windows-app .tt-native-glass-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.018) 28%, transparent 58%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}

html.native-windows-app .tt-native-glass-shell > * {
  position: relative;
  z-index: 1;
}

html.native-windows-app.dark .tt-native-glass-shell::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 28%, transparent 58%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 5px);
}

html.native-windows-app .tt-native-glass-shell aside[aria-label] {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 42%, rgba(0, 0, 0, 0.1)),
    rgba(28, 28, 28, 0.58);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset -1px 0 0 rgba(0, 0, 0, 0.22),
    inset 1px 0 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(30px) saturate(155%);
  -webkit-backdrop-filter: blur(30px) saturate(155%);
}

@layer components {
  /* ========================================
     OpenAI Design System Components - Light Mode
     ======================================== */

  /* Panel - Main container style */
  .oai-panel {
    background: var(--oai-white);
    border: 1px solid var(--oai-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
  }

  .oai-panel--strong {
    background: var(--oai-gray-50);
    border-color: var(--oai-gray-300);
  }

  /* Card - Standard card style */
  .oai-card {
    background: var(--oai-white);
    border: 1px solid var(--oai-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: border-color 150ms ease;
  }

  .oai-card:hover {
    border-color: var(--oai-gray-300);
  }

  .oai-card--accent {
    background: var(--oai-gray-50);
    border-color: var(--oai-gray-300);
  }

  /* Button - Primary */
  .oai-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 var(--space-4);
    background: var(--oai-black);
    color: var(--oai-white);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--oai-font-sans);
    font-size: var(--text-body-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease;
  }

  .oai-button-primary:hover {
    background: var(--oai-gray-800);
  }

  .oai-button-primary:active {
    background: var(--oai-black);
  }

  /* Button - Secondary */
  .oai-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 var(--space-4);
    background: transparent;
    color: var(--oai-black);
    border: 1px solid var(--oai-gray-300);
    border-radius: var(--radius-md);
    font-family: var(--oai-font-sans);
    font-size: var(--text-body-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 150ms ease;
  }

  .oai-button-secondary:hover {
    background: var(--oai-gray-100);
  }

  /* Button - Ghost */
  .oai-button-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 var(--space-4);
    background: transparent;
    color: var(--oai-gray-600);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--oai-font-sans);
    font-size: var(--text-body-sm);
    font-weight: 500;
    cursor: pointer;
    transition: color 150ms ease;
  }

  .oai-button-ghost:hover {
    color: var(--oai-black);
  }

  /* Button - Small variant */
  .oai-button-sm {
    height: 36px;
    padding: 0 var(--space-3);
  }

  /* Input - Standard input style */
  .oai-input {
    height: 40px;
    padding: 0 var(--space-3);
    background: var(--oai-white);
    color: var(--oai-black);
    border: 1px solid var(--oai-gray-300);
    border-radius: var(--radius-md);
    font-family: var(--oai-font-sans);
    font-size: var(--text-body-sm);
    outline: none;
    transition: border-color 150ms ease;
  }

  .oai-input::placeholder {
    color: var(--oai-gray-400);
  }

  .oai-input:focus {
    border-color: var(--oai-blue);
  }

  /* ========================================
     Dark Mode Component Overrides
     ======================================== */

  :root.dark .oai-panel {
    background: linear-gradient(180deg, #1a1b1a 0%, #151615 100%);
    border-color: var(--oai-gray-800);
  }

  :root.dark .oai-panel--strong {
    background: linear-gradient(180deg, #282928 0%, #1e201e 100%);
    border-color: var(--oai-gray-700);
  }

  :root.dark .oai-card {
    background: linear-gradient(180deg, #1a1b1a 0%, #151615 100%);
    border-color: var(--oai-gray-800);
  }

  :root.dark .oai-card:hover {
    border-color: var(--oai-gray-700);
  }

  :root.dark .oai-card--accent {
    background: linear-gradient(180deg, #282928 0%, #1e201e 100%);
    border-color: var(--oai-gray-700);
  }

  :root.dark .oai-button-primary {
    background: var(--oai-gray-100);
    color: var(--oai-gray-950);
  }

  :root.dark .oai-button-primary:hover {
    background: var(--oai-gray-200);
  }

  :root.dark .oai-button-primary:active {
    background: var(--oai-gray-100);
  }

  :root.dark .oai-button-secondary {
    color: var(--oai-gray-100);
    border-color: var(--oai-gray-700);
  }

  :root.dark .oai-button-secondary:hover {
    background: var(--oai-gray-800);
  }

  :root.dark .oai-button-ghost {
    color: var(--oai-gray-500);
  }

  :root.dark .oai-button-ghost:hover {
    color: var(--oai-gray-100);
  }

  :root.dark .oai-input {
    background: var(--oai-gray-900);
    color: var(--oai-gray-100);
    border-color: var(--oai-gray-700);
  }

  :root.dark .oai-input::placeholder {
    color: var(--oai-gray-600);
  }

  :root.dark .oai-input:focus {
    border-color: var(--oai-blue);
  }
}

@layer utilities {
  /* ========================================
     OpenAI Design System Utilities - Light Mode
     ======================================== */

  /* Typography utilities */
  .oai-text-hero {
    font-size: var(--text-hero);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .oai-text-h1 {
    font-size: var(--text-h1);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .oai-text-h2 {
    font-size: var(--text-h2);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .oai-text-h3 {
    font-size: var(--text-h3);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .oai-text-h4 {
    font-size: var(--text-h4);
    line-height: 1.4;
    font-weight: 600;
  }

  .oai-text-body {
    font-size: var(--text-body);
    line-height: 1.5;
    font-weight: 400;
  }

  .oai-text-body-sm {
    font-size: var(--text-body-sm);
    line-height: 1.5;
    font-weight: 400;
  }

  .oai-text-caption {
    font-size: var(--text-caption);
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  .oai-text-label {
    font-size: var(--text-label);
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* Color utilities */
  .oai-text-muted {
    color: var(--oai-gray-500);
  }

  .oai-text-secondary {
    color: var(--oai-gray-600);
  }

  .oai-bg-surface {
    background: var(--oai-white);
  }

  .oai-bg-elevated {
    background: var(--oai-gray-50);
  }

  /* Scrollbar utilities - OpenAI style */
  .oai-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--oai-gray-300) transparent;
    scrollbar-gutter: stable both-edges;
  }

  .oai-scrollbar::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }

  .oai-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .oai-scrollbar::-webkit-scrollbar-thumb {
    background: var(--oai-gray-300);
    border-radius: var(--radius-full);
  }

  .oai-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--oai-gray-400);
  }

  /* ========================================
     Dark Mode Utility Overrides
     ======================================== */

  :root.dark .oai-text-muted {
    color: var(--oai-gray-500);
  }

  :root.dark .oai-text-secondary {
    color: var(--oai-gray-400);
  }

  :root.dark .oai-bg-surface {
    background: var(--oai-gray-900);
  }

  :root.dark .oai-bg-elevated {
    background: var(--oai-gray-100);
  }

  :root.dark .oai-scrollbar {
    scrollbar-color: var(--oai-gray-400) transparent;
  }

  :root.dark .oai-scrollbar::-webkit-scrollbar-thumb {
    background: var(--oai-gray-400);
  }

  :root.dark .oai-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--oai-gray-500);
  }
}

/* Heatmap: thin scrollbar that doesn't push content */
.heatmap-scroll-thin {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.heatmap-scroll-thin::-webkit-scrollbar {
  height: 4px;
}
.heatmap-scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}
.heatmap-scroll-thin::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
}
.heatmap-scroll-thin:hover,
.heatmap-scroll-thin:focus-within {
  scrollbar-color: var(--oai-gray-200) transparent;
}
.heatmap-scroll-thin:hover::-webkit-scrollbar-thumb,
.heatmap-scroll-thin:focus-within::-webkit-scrollbar-thumb {
  background: var(--oai-gray-200);
}
.heatmap-scroll-thin::-webkit-scrollbar-thumb:hover {
  background: var(--oai-gray-400);
}
:root.dark .heatmap-scroll-thin {
  scrollbar-color: transparent transparent;
}
:root.dark .heatmap-scroll-thin::-webkit-scrollbar-thumb {
  background: transparent;
}
:root.dark .heatmap-scroll-thin:hover,
:root.dark .heatmap-scroll-thin:focus-within {
  scrollbar-color: var(--oai-gray-600) transparent;
}
:root.dark .heatmap-scroll-thin:hover::-webkit-scrollbar-thumb,
:root.dark .heatmap-scroll-thin:focus-within::-webkit-scrollbar-thumb {
  background: var(--oai-gray-600);
}
:root.dark .heatmap-scroll-thin::-webkit-scrollbar-thumb:hover {
  background: var(--oai-gray-500);
}

@layer utilities {
  /* ========================================
     Animation Utilities - Bolder Dashboard
     ======================================== */

  /* Staggered fade-in animation for cards */
  .animate-fade-in-up {
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Stagger delays for card grids */
  .stagger-1 { animation-delay: 50ms; }
  .stagger-2 { animation-delay: 100ms; }
  .stagger-3 { animation-delay: 150ms; }
  .stagger-4 { animation-delay: 200ms; }
  .stagger-5 { animation-delay: 250ms; }
  .stagger-6 { animation-delay: 300ms; }

  /* Number count animation */
  .animate-count {
    animation: countPulse 0.3s ease-out;
  }

  @keyframes countPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
  }

  /* Hover lift effect */
  .hover-lift {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  }

  .hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
  }

  /* Spinner and entry animation utilities */
  .animate-spin-subtle {
    animation: spinSubtle 1s linear infinite;
  }

  @keyframes spinSubtle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .animate-scale-up-fade {
    animation: scaleUpFade 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes scaleUpFade {
    from {
      opacity: 0;
      transform: scale(0.96) translateY(2px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  /* Shimmer effect for loading states */
  .shimmer {
    background: linear-gradient(
      90deg,
      var(--oai-gray-100) 25%,
      var(--oai-gray-50) 50%,
      var(--oai-gray-100) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
  }

  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Clawd animated SVG: scale inner SVG to fill container */
  .clawd-animated > svg {
    width: 100%;
    height: 100%;
  }

  /* Marquee — used by SkillsPage empty state provider rail */
  @keyframes marquee-x {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .animate-marquee-x {
    animation: marquee-x 14s linear infinite;
  }

  /* ========================================
     Dark Mode Animation Overrides
     ======================================== */

  :root.dark .shimmer {
    background: linear-gradient(
      90deg,
      var(--oai-gray-100) 25%,
      var(--oai-gray-200) 50%,
      var(--oai-gray-100) 75%
    );
    background-size: 200% 100%;
  }

  :root.dark .hover-lift:hover {
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.4);
  }

  /* ========================================
     Cost Modal Transitions
     ======================================== */

  .cost-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    opacity: 1;
    transition: opacity 200ms ease-out;
  }

  .cost-modal-backdrop[data-starting-style],
  .cost-modal-backdrop[data-ending-style] {
    opacity: 0;
  }

  .cost-modal-popup {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition:
      opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .cost-modal-popup[data-starting-style],
  .cost-modal-popup[data-ending-style] {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }

  :root.dark .cost-modal-backdrop {
    background: rgba(0, 0, 0, 0.6);
  }
}

/* ========================================
   DateRangePicker — black/white selection
   ======================================== */
/* Range start/end/middle share black fill */
.rdp-selected {
  background: var(--oai-black) !important;
  border-radius: 0 !important;
}
.rdp-selected .rdp-day-btn {
  background: transparent !important;
  color: #fff !important;
  border-radius: 0 !important;
}
/* Only round the outer edge of start/end */
.rdp-range-start {
  border-radius: 8px 0 0 8px !important;
}
.rdp-range-end {
  border-radius: 0 8px 8px 0 !important;
}
/* Single day selected (start == end) */
.rdp-range-start.rdp-range-end {
  border-radius: 8px !important;
}
:root.dark .rdp-selected {
  background: var(--oai-white) !important;
}
:root.dark .rdp-selected .rdp-day-btn {
  background: transparent !important;
  color: var(--oai-black) !important;
}
/* Range middle inherits from .rdp-selected above */
/* Navigation chevron arrows — dark mode */
:root.dark .rdp-oai svg.rdp-chevron {
  fill: var(--oai-gray-400);
}

/* ========================================
   Progressive enhancement: restore OKLCH on engines that support it.
   The base declarations above use sRGB hex so older Chromium/WebView2
   (<111, no oklch() parsing → transparent custom properties, issue #252)
   render correctly. Modern engines fall into this block and get the
   original perceptually-uniform OKLCH values back — visuals unchanged.
   Custom properties are not parse-time validated, so a same-block hex→oklch
   fallback would NOT work; the @supports gate is required.
   ======================================== */
@supports (color: oklch(0% 0 0)) {
  :root {
    --oai-gray-50: oklch(98% 0.005 145);
    --oai-gray-100: oklch(96% 0.01 145);
    --oai-gray-200: oklch(90% 0.015 145);
    --oai-gray-300: oklch(83% 0.02 145);
    --oai-gray-400: oklch(70% 0.025 145);
    --oai-gray-500: oklch(55% 0.03 145);
    --oai-gray-600: oklch(45% 0.025 145);
    --oai-gray-700: oklch(35% 0.02 145);
    --oai-gray-800: oklch(25% 0.015 145);
    --oai-gray-900: oklch(18% 0.01 145);
    --oai-gray-950: oklch(12% 0.005 145);
  }

  :root.dark {
    --oai-gray-50: oklch(20% 0.002 145);
    --oai-gray-100: oklch(24% 0.003 145);
    --oai-gray-200: oklch(30% 0.004 145);
    --oai-gray-300: oklch(40% 0.005 145);
    --oai-gray-400: oklch(55% 0.006 145);
    --oai-gray-500: oklch(65% 0.005 145);
    --oai-gray-600: oklch(75% 0.004 145);
    --oai-gray-700: oklch(85% 0.003 145);
    --oai-gray-800: oklch(92% 0.002 145);
    --oai-gray-900: oklch(96% 0.001 145);
    --oai-gray-950: oklch(98% 0.001 145);
  }

  :root.dark .oai-panel,
  :root.dark .oai-card {
    background: linear-gradient(180deg, oklch(22% 0.003 145) 0%, oklch(20% 0.002 145) 100%);
  }

  :root.dark .oai-panel--strong,
  :root.dark .oai-card--accent {
    background: linear-gradient(180deg, oklch(28% 0.004 145) 0%, oklch(24% 0.003 145) 100%);
  }
}
