/* Iris Systems — design tokens
 * Brand palette: sky #6CA6D9 / muted blue #739CBF / olive #736E2C / brown #594022
 * Earth + sky. Grounded but with vision.
 *
 * Light = warm ivory canvas, brown shadows. Dark = dusk navy canvas.
 */

:root {
  /* Brand */
  --color-iris-sky:   #6CA6D9;
  --color-iris-blue:  #739CBF;
  --color-iris-olive: #736E2C;
  --color-iris-brown: #594022;

  /* Backgrounds — light */
  --color-bg-page:     #FAF8F3;
  --color-bg-surface:  #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-sunken:   #F2EEE5;
  --color-bg-hover:    #F5F1E6;

  /* Text */
  --color-text-primary:   #1A1D23;
  --color-text-secondary: #4A4F58;
  --color-text-muted:     #6B7280;
  --color-text-disabled:  #9CA3AF;
  --color-text-inverse:   #F1EFE8;

  /* Borders */
  --color-border-subtle:  #EDE8DC;
  --color-border-default: #DCD6C7;
  --color-border-strong:  #B8B09C;

  /* Roles */
  --color-action-primary:       #6CA6D9;
  --color-action-primary-hover: #5892C5;
  --color-action-secondary:     #739CBF;
  --color-brand-accent:         #736E2C;
  --color-premium:              #594022;

  /* Status */
  --color-status-success:    #6B8E5A;
  --color-status-success-bg: #EDF1E6;
  --color-status-warning:    #C89B3C;
  --color-status-warning-bg: #F8EFD8;
  --color-status-danger:     #B5503C;
  --color-status-danger-bg:  #F5E2DB;
  --color-status-info:       #6CA6D9;
  --color-status-info-bg:    #E4EFF8;
  --color-status-unknown:    #9CA3AF;
  --color-status-unknown-bg: #F1F0EC;

  /* Data viz */
  --color-viz-1:  #6CA6D9;
  --color-viz-2:  #736E2C;
  --color-viz-3:  #B5503C;
  --color-viz-4:  #739CBF;
  --color-viz-5:  #C89B3C;
  --color-viz-6:  #594022;
  --color-viz-7:  #6B8E5A;
  --color-viz-8:  #3D6B8C;
  --color-viz-9:  #A67C52;
  --color-viz-10: #8C6BAE;

  /* Chart semantic */
  --color-chart-positive:   #6B8E5A;
  --color-chart-negative:   #B5503C;
  --color-chart-neutral:    #739CBF;
  --color-chart-projection: #6CA6D9;
  --color-chart-threshold:  #C89B3C;
  --color-chart-grid:       #EDE8DC;

  /* Gradients */
  --gradient-sky:     linear-gradient(135deg, #6CA6D9 0%, #739CBF 100%);
  --gradient-earth:   linear-gradient(135deg, #736E2C 0%, #594022 100%);
  --gradient-horizon: linear-gradient(180deg, #6CA6D9 0%, #739CBF 45%, #736E2C 100%);

  /* Shadows — warm-tinted (brown base) */
  --shadow-sm: 0 1px 2px rgba(89,64,34,0.06);
  --shadow-md: 0 4px 8px -2px rgba(89,64,34,0.08), 0 2px 4px -2px rgba(89,64,34,0.05);
  --shadow-lg: 0 12px 24px -6px rgba(89,64,34,0.12), 0 4px 8px -4px rgba(89,64,34,0.06);
  --shadow-xl: 0 24px 48px -12px rgba(89,64,34,0.18);

  /* Spacing — 4px base */
  --space-0: 0;     --space-1: 2px;  --space-2: 4px;  --space-3: 8px;
  --space-4: 12px;  --space-5: 16px; --space-6: 20px; --space-7: 24px;
  --space-8: 32px;  --space-9: 40px; --space-10: 48px; --space-11: 64px;
  --space-12: 80px; --space-13: 96px; --space-14: 128px;

  /* Radii */
  --radius-sharp: 0;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.2, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);

  /* Type */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, 'Roboto Mono', monospace;

  /* Layout */
  --nav-width-expanded: 240px;
  --nav-width-collapsed: 56px;
  --header-height: 56px;
}

[data-theme="dark"] {
  --color-bg-page:     #14171C;
  --color-bg-surface:  #1B1F26;
  --color-bg-elevated: #242932;
  --color-bg-sunken:   #0F1216;
  --color-bg-hover:    #242932;

  --color-text-primary:   #F1EFE8;
  --color-text-secondary: #B8BDC7;
  --color-text-muted:     #9BA1AD;  /* was #8A909C — raised to 4.7:1 for WCAG AA */
  --color-text-disabled:  #5A606B;
  --color-text-inverse:   #1A1D23;

  --color-border-subtle:  #262B33;
  --color-border-default: #353B47;
  --color-border-strong:  #4A5160;

  --color-action-primary:       #7FC7F0;  /* brighter for dark bg contrast */
  --color-action-primary-hover: #82B5E0;

  --color-status-success:    #7DBC58;
  --color-status-success-bg: #2A3D1F;  /* was #1E2819 — lightened for pill readability */
  --color-status-warning:    #E8B639;
  --color-status-warning-bg: #3F3620;  /* was #2E2818 */
  --color-status-danger:     #D97060;
  --color-status-danger-bg:  #402420;  /* was #2E1B16 */
  --color-status-info:       #82B5E0;
  --color-status-info-bg:    #1F3042;  /* was #18242E */
  --color-status-unknown-bg: #1F2229;

  --color-chart-grid: #262B33;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.5), 0 2px 4px -2px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 24px -6px rgba(0,0,0,0.6);
  --shadow-xl: 0 24px 48px -12px rgba(0,0,0,0.7);
}