/* Design tokens (redesign v2), copied from ai-agent-dashboard-redesign-v2.html. Loaded first. */

:root {
  /* ---- Raw palette (do not use directly in components) ---- */
  --lagoon-50:  #E3F4EF;
  --lagoon-100: #C6EAE0;
  --lagoon-200: #93D8C6;
  --lagoon-300: #7FE3CC;
  --lagoon-400: #4FD1B5;
  --lagoon-600: #0B7A68;
  --lagoon-700: #086556;
  --lagoon-800: #075C4F;
  --lagoon-900: #12302A;

  --stone-0:   #FFFFFF;
  --stone-25:  #F5F3EF;
  --stone-50:  #EFECE6;
  --stone-100: #E8E4DD;
  --stone-200: #E2DDD4;
  --stone-300: #CFC8BD;
  --stone-400: #A8A29E;
  --stone-500: #6B645E;
  --stone-600: #57534E;
  --stone-700: #3A3632;
  --stone-800: #2A2724;
  --stone-850: #22201E;
  --stone-900: #1A1917;
  --stone-950: #100F0E;

  --amber-400: #F5B544;

  /* ---- Semantic colors (light) ---- */
  --color-bg:            var(--stone-25);
  --color-surface:       var(--stone-0);
  --color-surface-2:     var(--stone-50);
  --color-surface-3:     var(--stone-100);
  --color-overlay:       rgba(28, 25, 23, 0.5);
  --color-border:        var(--stone-200);
  --color-border-strong: var(--stone-300);
  --color-text:          #1C1917;
  --color-text-2:        var(--stone-600);
  --color-text-3:        var(--stone-500);
  --color-text-disabled: var(--stone-400);

  --color-primary:        var(--lagoon-600);
  --color-primary-hover:  var(--lagoon-700);
  --color-primary-active: var(--lagoon-800);
  --color-on-primary:     #FFFFFF;
  --color-primary-soft:   var(--lagoon-50);
  --color-primary-soft-2: var(--lagoon-100);
  --color-primary-text:   var(--lagoon-800);
  --color-link:           var(--lagoon-600);
  --color-focus:          rgba(11, 122, 104, 0.4);
  --color-accent:         var(--amber-400);

  --color-success:      #1F9D55;
  --color-success-soft: #E7F6EC;
  --color-success-text: #166534;
  --color-warning:      #D97F0C;
  --color-warning-soft: #FDF3E3;
  --color-warning-text: #8A4A06;
  --color-danger:       #C2352A;
  --color-danger-hover: #A32A20;
  --color-on-danger:    #FFFFFF;
  --color-danger-soft:  #FDEDEB;
  --color-danger-text:  #B42318;
  --color-info:         #2F7BC4;
  --color-info-soft:    #E8F1FB;
  --color-info-text:    #1D5F99;

  /* Sidebar is always "ink" (dark) in both themes */
  --sidebar-bg:          #1C1A17;
  --sidebar-border:      #2C2925;
  --sidebar-text:        #F5F3EF;
  --sidebar-text-2:      #A8A29E;
  --sidebar-hover:       #26231F;
  --sidebar-active-bg:   #27302C;
  --sidebar-active-text: #5EE0C4;

  --color-code-bg:   #1C1A17;
  --color-code-text: #EDEAE5;
  --color-code-dim:  #A8A29E;
  --color-code-str:  #F5C77A;

  --skeleton-a: var(--stone-100);
  --skeleton-b: var(--stone-50);

  /* ---- Typography ---- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

  --text-xs:   12px;  --leading-xs:   16px;
  --text-sm:   13px;  --leading-sm:   20px;
  --text-base: 14px;  --leading-base: 22px;
  --text-md:   16px;  --leading-md:   24px;
  --text-lg:   18px;
  --text-xl:   22px;  --leading-xl:   28px;
  --text-2xl:  28px;  --leading-2xl:  36px;
  --text-3xl:  34px;  --leading-3xl:  40px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --tracking-tight: -0.02em;
  --tracking-caps:  0.08em;

  /* ---- Spacing (4px base) ---- */
  --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-16: 64px;

  /* ---- Layout ---- */
  --shell-pad: var(--space-3);
  --sidebar-w: 256px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;
  --content-max: 1520px;
  --gutter: var(--space-10);
  --card-pad: var(--space-6);
  --section-gap: var(--space-8);
  --control-h-sm: 34px;
  --control-h:    40px;

  /* ---- Radii (softer) ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---- Shadows (warm-tinted, soft) ---- */
  --shadow-xs: 0 1px 2px rgba(41, 37, 36, 0.04);
  --shadow-sm: 0 1px 2px rgba(41, 37, 36, 0.05), 0 2px 8px -2px rgba(41, 37, 36, 0.06);
  --shadow-md: 0 12px 32px -8px rgba(41, 37, 36, 0.16), 0 2px 6px rgba(41, 37, 36, 0.05);
  --shadow-lg: 0 32px 64px -16px rgba(41, 37, 36, 0.28);
  --ring: 0 0 0 3px var(--color-focus);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --transition-colors: color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);

  /* ---- Z-index ---- */
  --z-sidebar: 30;
  --z-topbar: 20;
  --z-dropdown: 40;
  --z-modal: 50;
  --z-toast: 60;

  --brand: #1A3C5C;
  --on-brand: #FFFFFF;

  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg:            var(--stone-950);
  --color-surface:       var(--stone-900);
  --color-surface-2:     var(--stone-850);
  --color-surface-3:     var(--stone-800);
  --color-overlay:       rgba(0, 0, 0, 0.65);
  --color-border:        #2F2C29;
  --color-border-strong: var(--stone-700);
  --color-text:          #EDEAE5;
  --color-text-2:        #B5AFA7;
  --color-text-3:        #948D84;
  --color-text-disabled: #625C55;

  --color-primary:        var(--lagoon-400);
  --color-primary-hover:  var(--lagoon-300);
  --color-primary-active: var(--lagoon-200);
  --color-on-primary:     #0B1512;
  --color-primary-soft:   var(--lagoon-900);
  --color-primary-soft-2: #1A433A;
  --color-primary-text:   var(--lagoon-300);
  --color-link:           var(--lagoon-300);
  --color-focus:          rgba(79, 209, 181, 0.5);

  --color-success:      #3CC47F;
  --color-success-soft: #12261A;
  --color-success-text: #5FD89C;
  --color-warning:      #F2A93B;
  --color-warning-soft: #2A1F0E;
  --color-warning-text: #F2B45A;
  --color-danger:       #F07C72;
  --color-danger-hover: #F59A92;
  --color-on-danger:    var(--stone-950);
  --color-danger-soft:  #2E1614;
  --color-danger-text:  #F59088;
  --color-info:         #5AA6EE;
  --color-info-soft:    #101F31;
  --color-info-text:    #7CB8F2;

  --sidebar-bg:          #0B0A09;
  --sidebar-border:      #24211E;
  --sidebar-hover:       #1A1816;
  --sidebar-active-bg:   #14241F;

  --color-code-bg: #0B0A09;
  --skeleton-a: var(--stone-800);
  --skeleton-b: var(--stone-850);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 12px 32px -8px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 32px 64px -16px rgba(0, 0, 0, 0.8);

  color-scheme: dark;
}