/**
 * Agent Design System - CSS Variables
 * Version: 0.1
 * 
 * Usage:
 * 1. Import this file in your main CSS/HTML
 * 2. Use variables like: var(--blue-400), var(--spacing-16), etc.
 * 3. For theming: add class "dark" to root element for dark mode
 */

/* ================================
   Base Color Tokens (Primitives)
   ================================ */
:root {
  /* Blue */
  --blue-25: #f5fbff;
  --blue-50: #e5f5ff;
  --blue-75: #c4e7ff;
  --blue-100: #93d2ff;
  --blue-200: #68c0ff;
  --blue-300: #3daeff;
  --blue-400: #0094fc;
  --blue-500: #0077d9;
  --blue-600: #005fb8;
  --blue-700: #004b96;
  --blue-800: #00244d;
  --blue-900: #001226;
  --blue-1000: #000c14;

  /* Gray */
  --gray-0: #ffffff;
  --gray-50: #fafafa;
  --gray-75: #f5f5f5;
  --gray-100: #ededed;
  --gray-200: #cccccc;
  --gray-300: #adadad;
  --gray-400: #8a8a8a;
  --gray-500: #575757;
  --gray-600: #414141;
  --gray-700: #303030;
  --gray-800: #212121;
  --gray-900: #171717;
  --gray-1000: #121212;

  /* Green */
  --green-25: #edfaf2;
  --green-50: #d9f4e4;
  --green-75: #a5e5bf;
  --green-100: #80e0a6;
  --green-200: #4ed082;
  --green-300: #28c567;
  --green-400: #04b54b;
  --green-500: #009c3d;
  --green-600: #008635;
  --green-700: #00692a;
  --green-800: #004f1f;
  --green-900: #082614;
  --green-1000: #001207;

  /* Orange */
  --orange-25: #fff6f0;
  --orange-50: #ffeee3;
  --orange-75: #ffd0b2;
  --orange-100: #ffb485;
  --orange-200: #ff9452;
  --orange-300: #fa8237;
  --orange-400: #f56811;
  --orange-500: #e25507;
  --orange-600: #b9480d;
  --orange-700: #923b0f;
  --orange-800: #4d200b;
  --orange-900: #311908;
  --orange-1000: #1a0a00;

  /* Red */
  --red-25: #fef6f7;
  --red-50: #feedee;
  --red-75: #ffc9ce;
  --red-100: #ffa3ab;
  --red-200: #ff828c;
  --red-300: #ff5e6c;
  --red-400: #f73646;
  --red-500: #e31937;
  --red-600: #bf152f;
  --red-700: #9e0e24;
  --red-800: #4d0610;
  --red-900: #33030a;
  --red-1000: #140003;

  /* Yellow */
  --yellow-25: #fff9ed;
  --yellow-50: #fff3d9;
  --yellow-75: #ffe9b8;
  --yellow-100: #ffdb8c;
  --yellow-200: #ffcf66;
  --yellow-300: #ffc340;
  --yellow-400: #ffae00;
  --yellow-500: #e09900;
  --yellow-600: #ba7f00;
  --yellow-700: #916300;
  --yellow-800: #4d3400;
  --yellow-900: #261a00;
  --yellow-1000: #120e00;

  /* Opacity - Black */
  --opacity-black-0: #0a0a0a00;
  --opacity-black-2: #0a0a0a05;
  --opacity-black-4: #0a0a0a0a;
  --opacity-black-8: #0a0a0a14;
  --opacity-black-15: #0a0a0a26;
  --opacity-black-20: #0a0a0a33;
  --opacity-black-25: #0a0a0a40;
  --opacity-black-50: #0a0a0a80;
  --opacity-black-70: #0a0a0ab2;
  --opacity-black-80: #0a0a0acc;
  --opacity-black-90: #0a0a0ae5;
  --opacity-black-95: #0a0a0af2;

  /* Opacity - White */
  --opacity-white-0: #ffffff00;
  --opacity-white-2: #ffffff05;
  --opacity-white-4: #ffffff0a;
  --opacity-white-8: #ffffff12;
  --opacity-white-15: #ffffff26;
  --opacity-white-20: #ffffff33;
  --opacity-white-25: #ffffff40;
  --opacity-white-50: #ffffff80;
  --opacity-white-70: #ffffffb2;
  --opacity-white-80: #ffffffcc;
  --opacity-white-90: #ffffffe5;
  --opacity-white-95: #fffffff2;

  /* ================================
     Spacing Tokens
     ================================ */
  --spacing-0: 0px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-90: 90px;
  --spacing-128: 128px;

  /* ================================
     Radius Tokens
     ================================ */
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-full: 999px;

  /* ================================
     Typography Tokens
     ================================ */
  /* Font Size */
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-size-48: 48px;
  --font-size-64: 64px;

  /* Line Height */
  --line-height-16: 16px;
  --line-height-18: 18px;
  --line-height-20: 20px;
  --line-height-22: 22px;
  --line-height-26: 26px;
  --line-height-28: 28px;
  --line-height-36: 36px;
  --line-height-40: 40px;

  /* Font Weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
}

/* ================================
   Light Theme (Default)
   ================================ */
:root,
[data-theme="light"],
.theme-light {
  /* Background - Default */
  --bg-default-primary: var(--gray-0);
  --bg-default-primary-elevated: var(--gray-0);
  --bg-default-secondary: var(--gray-50);
  --bg-default-secondary-elevated: var(--gray-50);
  --bg-default-tertiary: var(--gray-75);
  --bg-default-tertiary-elevated: var(--gray-75);

  /* Background - Grouped */
  --bg-grouped-primary: var(--gray-50);
  --bg-grouped-primary-elevated: var(--gray-50);
  --bg-grouped-secondary: var(--gray-0);
  --bg-grouped-secondary-elevated: var(--gray-50);
  --bg-grouped-tertiary: var(--gray-75);

  /* Background - Interaction Accent */
  --bg-interaction-accent-default: var(--opacity-white-0);
  --bg-interaction-accent-hover: #0094fc0a;
  --bg-interaction-accent-inactive: var(--opacity-white-0);
  --bg-interaction-accent-press: #0094fc14;
  --bg-interaction-accent-focus-blue: var(--blue-400);
  --bg-interaction-accent-focus-highlight: var(--blue-200);

  /* Background - Interaction Danger */
  --bg-interaction-danger-primary-default: var(--red-400);
  --bg-interaction-danger-primary-hover: var(--red-300);
  --bg-interaction-danger-primary-inactive: var(--red-100);
  --bg-interaction-danger-primary-press: var(--red-500);
  --bg-interaction-danger-secondary-default: var(--red-50);
  --bg-interaction-danger-secondary-hover: var(--red-25);
  --bg-interaction-danger-secondary-inactive: var(--red-25);
  --bg-interaction-danger-secondary-press: var(--red-75);

  /* Background - Interaction Positive */
  --bg-interaction-positive-default: var(--green-400);
  --bg-interaction-positive-hover: var(--green-300);
  --bg-interaction-positive-inactive: var(--green-400);
  --bg-interaction-positive-press: var(--green-400);

  /* Background - Interaction Primary */
  --bg-interaction-primary-default: var(--gray-1000);
  --bg-interaction-primary-hover: var(--opacity-black-80);
  --bg-interaction-primary-inactive: var(--gray-300);
  --bg-interaction-primary-press: var(--opacity-black-90);
  --bg-interaction-primary-selected: var(--gray-1000);

  /* Background - Interaction Secondary */
  --bg-interaction-secondary-default: var(--opacity-black-4);
  --bg-interaction-secondary-hover: var(--opacity-black-8);
  --bg-interaction-secondary-inactive: var(--opacity-black-0);
  --bg-interaction-secondary-press: var(--opacity-black-15);
  --bg-interaction-secondary-selected: var(--gray-50);

  /* Background - Interaction Tertiary */
  --bg-interaction-tertiary-default: var(--opacity-black-0);
  --bg-interaction-tertiary-hover: var(--opacity-black-4);
  --bg-interaction-tertiary-inactive: var(--opacity-black-0);
  --bg-interaction-tertiary-press: var(--opacity-black-8);
  --bg-interaction-tertiary-selected: var(--opacity-black-4);

  /* Background - Interaction Warning */
  --bg-interaction-warning-default: var(--orange-300);
  --bg-interaction-warning-hover: var(--orange-200);
  --bg-interaction-warning-inactive: var(--orange-300);
  --bg-interaction-warning-press: var(--orange-300);

  /* Background - Status */
  --bg-status-blue: var(--blue-50);
  --bg-status-error: var(--red-25);
  --bg-status-positive: var(--green-25);
  --bg-status-tag: var(--gray-1000);
  --bg-status-warning: var(--orange-25);

  /* Border */
  --border-accent: var(--blue-400);
  --border-default: var(--opacity-black-8);
  --border-error: var(--red-400);
  --border-success: var(--green-400);
  --border-warning: var(--orange-400);

  /* Text - Default */
  --text-default-primary: var(--gray-1000);
  --text-default-secondary: var(--gray-500);
  --text-default-tertiary: var(--gray-400);
  --text-default-quaternary: var(--gray-300);
  --text-default-accent: var(--blue-500);
  --text-default-inverted: var(--gray-0);
  --text-default-inverted-static: var(--opacity-white-80);

  /* Text - Label Primary */
  --text-label-primary-default: var(--gray-1000);
  --text-label-primary-hover: var(--gray-1000);
  --text-label-primary-inactive: var(--gray-1000);
  --text-label-primary-press: var(--gray-1000);
  --text-label-primary-selected: var(--gray-1000);

  /* Text - Label Secondary */
  --text-label-secondary-default: var(--gray-0);
  --text-label-secondary-hover: var(--opacity-white-90);
  --text-label-secondary-inactive: var(--gray-500);
  --text-label-secondary-press: var(--opacity-white-80);
  --text-label-secondary-selected: var(--gray-0);

  /* Text - Label Tertiary */
  --text-label-tertiary-default: var(--gray-400);
  --text-label-tertiary-hover: var(--gray-300);
  --text-label-tertiary-inactive: var(--gray-600);
  --text-label-tertiary-press: var(--gray-300);
  --text-label-tertiary-selected: var(--gray-400);

  /* Text - Label Accent */
  --text-label-accent-default: var(--blue-500);
  --text-label-accent-hover: var(--blue-400);
  --text-label-accent-inactive: var(--blue-700);
  --text-label-accent-press: var(--blue-500);

  /* Text - Label Danger */
  --text-label-danger-primary-default: var(--gray-0);
  --text-label-danger-primary-hover: var(--gray-0);
  --text-label-danger-primary-inactive: var(--opacity-white-50);
  --text-label-danger-primary-press: var(--gray-0);
  --text-label-danger-secondary-default: var(--red-500);
  --text-label-danger-secondary-hover: var(--red-400);
  --text-label-danger-secondary-inactive: var(--red-700);
  --text-label-danger-secondary-press: var(--red-600);

  /* Text - Label Positive */
  --text-label-positive-primary-default: var(--gray-0);
  --text-label-positive-primary-hover: var(--gray-0);
  --text-label-positive-primary-inactive: var(--gray-0);
  --text-label-positive-primary-press: var(--gray-0);
  --text-label-positive-secondary-default: var(--green-400);
  --text-label-positive-secondary-hover: var(--green-300);
  --text-label-positive-secondary-inactive: var(--green-400);
  --text-label-positive-secondary-press: var(--green-500);

  /* Text - Label Warning */
  --text-label-warning-primary-default: var(--gray-0);
  --text-label-warning-primary-hover: var(--gray-0);
  --text-label-warning-primary-inactive: var(--gray-0);
  --text-label-warning-primary-press: var(--gray-0);
  --text-label-warning-secondary-default: var(--orange-500);
  --text-label-warning-secondary-hover: var(--orange-400);
  --text-label-warning-secondary-inactive: var(--orange-500);
  --text-label-warning-secondary-press: var(--orange-600);

  /* Text - Status */
  --text-status-blue: var(--blue-500);
  --text-status-error: var(--red-500);
  --text-status-success: var(--green-500);
  --text-status-warning: var(--orange-500);

  /* Icon - Default */
  --icon-default-primary: var(--gray-1000);
  --icon-default-secondary: var(--gray-500);
  --icon-default-tertiary: var(--gray-400);
  --icon-default-quaternary: var(--gray-300);
  --icon-default-accent: var(--blue-400);
  --icon-default-inverted: var(--gray-0);

  /* Icon - Status */
  --icon-status-error: var(--red-400);
  --icon-status-success: var(--green-400);
  --icon-status-warning: var(--orange-400);

  /* Utility */
  --utility-blanket: #000000b2;
  --utility-overlay: #00000066;
  --utility-popover: var(--opacity-white-95);
  --utility-scrim: #00000080;
  --utility-scrollbar: var(--opacity-black-15);
  --utility-tooltip: var(--opacity-black-90);

  /* Shadow */
  --shadow-default: var(--opacity-black-50);
}

/* ================================
   Dark Theme
   ================================ */
[data-theme="dark"],
.theme-dark,
.dark {
  /* Background - Default */
  --bg-default-primary: var(--gray-1000);
  --bg-default-primary-elevated: var(--gray-900);
  --bg-default-secondary: var(--gray-900);
  --bg-default-secondary-elevated: var(--gray-800);
  --bg-default-tertiary: var(--gray-800);
  --bg-default-tertiary-elevated: var(--gray-700);

  /* Background - Grouped */
  --bg-grouped-primary: var(--gray-900);
  --bg-grouped-primary-elevated: var(--gray-800);
  --bg-grouped-secondary: var(--gray-1000);
  --bg-grouped-secondary-elevated: var(--gray-900);
  --bg-grouped-tertiary: var(--gray-800);

  /* Background - Interaction Primary */
  --bg-interaction-primary-default: var(--gray-0);
  --bg-interaction-primary-hover: var(--opacity-white-90);
  --bg-interaction-primary-inactive: var(--gray-700);
  --bg-interaction-primary-press: var(--opacity-white-80);
  --bg-interaction-primary-selected: var(--gray-0);

  /* Background - Interaction Secondary */
  --bg-interaction-secondary-default: var(--opacity-white-4);
  --bg-interaction-secondary-hover: var(--opacity-white-8);
  --bg-interaction-secondary-inactive: var(--opacity-white-0);
  --bg-interaction-secondary-press: var(--opacity-white-15);
  --bg-interaction-secondary-selected: var(--gray-800);

  /* Background - Interaction Tertiary */
  --bg-interaction-tertiary-default: var(--opacity-white-0);
  --bg-interaction-tertiary-hover: var(--opacity-white-4);
  --bg-interaction-tertiary-inactive: var(--opacity-white-0);
  --bg-interaction-tertiary-press: var(--opacity-white-8);
  --bg-interaction-tertiary-selected: var(--opacity-white-4);

  /* Background - Status (Dark) */
  --bg-status-blue: var(--blue-900);
  --bg-status-error: var(--red-900);
  --bg-status-positive: var(--green-900);
  --bg-status-tag: var(--gray-0);
  --bg-status-warning: var(--orange-900);

  /* Border (Dark) */
  --border-default: var(--opacity-white-8);

  /* Text - Default (Dark) */
  --text-default-primary: var(--gray-0);
  --text-default-secondary: var(--gray-300);
  --text-default-tertiary: var(--gray-400);
  --text-default-quaternary: var(--gray-600);
  --text-default-inverted: var(--gray-1000);
  --text-default-inverted-static: var(--opacity-black-80);

  /* Text - Label Primary (Dark) */
  --text-label-primary-default: var(--gray-1000);
  --text-label-primary-hover: var(--gray-1000);
  --text-label-primary-inactive: var(--gray-1000);
  --text-label-primary-press: var(--gray-1000);
  --text-label-primary-selected: var(--gray-1000);

  /* Text - Label Secondary (Dark) */
  --text-label-secondary-default: var(--gray-75);
  --text-label-secondary-hover: var(--opacity-white-90);
  --text-label-secondary-inactive: var(--gray-500);
  --text-label-secondary-press: var(--opacity-white-80);
  --text-label-secondary-selected: var(--gray-75);

  /* Text - Label Tertiary (Dark) */
  --text-label-tertiary-default: var(--gray-400);
  --text-label-tertiary-hover: var(--gray-300);
  --text-label-tertiary-inactive: var(--gray-600);
  --text-label-tertiary-press: var(--gray-300);
  --text-label-tertiary-selected: var(--gray-400);

  /* Icon - Default (Dark) */
  --icon-default-primary: var(--gray-0);
  --icon-default-secondary: var(--gray-300);
  --icon-default-tertiary: var(--gray-400);
  --icon-default-quaternary: var(--gray-600);
  --icon-default-inverted: var(--gray-1000);

  /* Icon - Interaction Secondary (Dark) */
  --icon-interaction-secondary-default: var(--gray-75);
  --icon-interaction-secondary-hover: var(--opacity-white-90);
  --icon-interaction-secondary-inactive: var(--gray-500);
  --icon-interaction-secondary-press: var(--opacity-white-80);
  --icon-interaction-secondary-selected: var(--gray-75);

  /* Icon - Interaction Tertiary (Dark) */
  --icon-interaction-tertiary-default: var(--gray-400);
  --icon-interaction-tertiary-hover: var(--gray-300);
  --icon-interaction-tertiary-inactive: var(--gray-600);
  --icon-interaction-tertiary-press: var(--gray-300);
  --icon-interaction-tertiary-selected: var(--gray-400);

  /* Icon - Status (Dark) */
  --icon-status-error: var(--red-300);
  --icon-status-success: var(--green-300);
  --icon-status-warning: var(--orange-300);

  /* Utility (Dark) */
  --utility-popover: var(--opacity-black-95);
  --utility-scrollbar: var(--opacity-white-15);
  --utility-tooltip: var(--opacity-white-90);

  /* Shadow (Dark) */
  --shadow-default: var(--opacity-black-50);
}

/* ================================
   Utility Classes
   ================================ */

/* Spacing utilities */
.p-0 { padding: var(--spacing-0); }
.p-2 { padding: var(--spacing-2); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }
.p-12 { padding: var(--spacing-12); }
.p-16 { padding: var(--spacing-16); }
.p-20 { padding: var(--spacing-20); }
.p-24 { padding: var(--spacing-24); }
.p-32 { padding: var(--spacing-32); }
.p-40 { padding: var(--spacing-40); }
.p-48 { padding: var(--spacing-48); }

.m-0 { margin: var(--spacing-0); }
.m-2 { margin: var(--spacing-2); }
.m-4 { margin: var(--spacing-4); }
.m-6 { margin: var(--spacing-6); }
.m-8 { margin: var(--spacing-8); }
.m-12 { margin: var(--spacing-12); }
.m-16 { margin: var(--spacing-16); }
.m-20 { margin: var(--spacing-20); }
.m-24 { margin: var(--spacing-24); }
.m-32 { margin: var(--spacing-32); }
.m-40 { margin: var(--spacing-40); }
.m-48 { margin: var(--spacing-48); }

.gap-0 { gap: var(--spacing-0); }
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }
.gap-12 { gap: var(--spacing-12); }
.gap-16 { gap: var(--spacing-16); }
.gap-20 { gap: var(--spacing-20); }
.gap-24 { gap: var(--spacing-24); }
.gap-32 { gap: var(--spacing-32); }

/* Border radius utilities */
.rounded-4 { border-radius: var(--radius-4); }
.rounded-8 { border-radius: var(--radius-8); }
.rounded-12 { border-radius: var(--radius-12); }
.rounded-16 { border-radius: var(--radius-16); }
.rounded-20 { border-radius: var(--radius-20); }
.rounded-24 { border-radius: var(--radius-24); }
.rounded-32 { border-radius: var(--radius-32); }
.rounded-full { border-radius: var(--radius-full); }

/* Typography utilities */
.text-12 { font-size: var(--font-size-12); }
.text-14 { font-size: var(--font-size-14); }
.text-16 { font-size: var(--font-size-16); }
.text-20 { font-size: var(--font-size-20); }
.text-24 { font-size: var(--font-size-24); }
.text-32 { font-size: var(--font-size-32); }
.text-40 { font-size: var(--font-size-40); }
.text-48 { font-size: var(--font-size-48); }
.text-64 { font-size: var(--font-size-64); }

.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }