/*
 * Hyper Parameter Oasis - Design System Variables
 * Island Oasis theme: calm, professional, subtly tropical
 */

:root {
  /* === Color Palette (Light Mode) === */

  /* Primary - deep ocean blue */
  --color-ocean-deep: #1e3a5f;
  --color-ocean-mid: #2d5a87;
  --color-ocean-light: #e8f1f8;

  /* Accent - teal lagoon */
  --color-lagoon: #0d9488;
  --color-lagoon-light: #14b8a6;

  /* Surface - pale sand */
  --color-sand: #fefce8;
  --color-sand-warm: #fef9c3;

  /* Semantic colors */
  --color-success: #166534;      /* palm green */
  --color-error: #dc2626;        /* coral red */
  --color-warning: #f59e0b;      /* sunset orange */

  /* Text colors */
  --color-text-primary: #1e293b;   /* slate-800 */
  --color-text-secondary: #64748b; /* slate-500 */
  --color-text-muted: #94a3b8;     /* slate-400 */
  --color-text-inverse: #f8fafc;   /* slate-50 */

  /* Borders */
  --color-border: #e2e8f0;         /* slate-200 */
  --color-border-strong: #cbd5e1;  /* slate-300 */

  /* Backgrounds */
  --color-bg-page: #eef3f7;        /* pale blue-tinted white */
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #ffffff;
  --color-bg-hover: #f1f5f9;       /* slate-100 */

  /* Sidebar */
  --color-sidebar-bg: var(--color-ocean-deep);
  --color-sidebar-text: #e2e8f0;
  --color-sidebar-text-muted: #94a3b8;
  --color-sidebar-hover: #354e6f;
  --color-sidebar-active: #405877;
  --color-sidebar-border: rgba(255, 255, 255, 0.1);

  /* === Spacing Scale === */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */

  /* === Typography === */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* === Border Radius === */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;

  /* === Layout === */
  --sidebar-width-expanded: 240px;
  --sidebar-width-collapsed: 56px;
  --header-height: 56px;
  --content-max-width: 1200px;

  /* === Z-Index Scale === */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-tooltip: 500;
}

/* === Dark Mode === */
[data-theme="dark"] {
  /* Primary - night ocean */
  --color-ocean-deep: #0f172a;
  --color-ocean-mid: #1e3a5f;
  --color-ocean-light: #1e293b;

  /* Accent - brighter for contrast */
  --color-lagoon: #14b8a6;
  --color-lagoon-light: #2dd4bf;

  /* Surface - dark sand */
  --color-sand: #1e293b;
  --color-sand-warm: #334155;

  /* Semantic colors - adjusted for dark */
  --color-success: #22c55e;
  --color-error: #f87171;
  --color-warning: #fbbf24;

  /* Text colors */
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  /* Borders */
  --color-border: #334155;
  --color-border-strong: #475569;

  /* Backgrounds */
  --color-bg-page: #0f172a;
  --color-bg-surface: #1e293b;
  --color-bg-elevated: #334155;
  --color-bg-hover: #334155;

  /* Sidebar - slightly lighter than page for contrast */
  --color-sidebar-bg: #1e293b;
  --color-sidebar-text: #e2e8f0;
  --color-sidebar-text-muted: #64748b;
  --color-sidebar-hover: #293445;
  --color-sidebar-active: #353e4f;
  --color-sidebar-border: rgba(255, 255, 255, 0.05);

  /* Adjusted shadows for dark mode */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}