Design Token Platform

/* ============================================================
   Design Tokens — CSS Custom Properties
   Generated by State of Colors
   ============================================================ */

:root {
  /* Primitive Tokens */
  /* Primary */
  --color-primary-50: #eff1ff;
  --color-primary-100: #dee4fe;
  --color-primary-200: #bfc8fc;
  --color-primary-300: #9da9f8;
  --color-primary-400: #7e88f2;
  --color-primary-500: #4f46e5;
  --color-primary-600: #403cb8;
  --color-primary-700: #32318c;
  --color-primary-800: #242663;
  --color-primary-900: #191c41;
  --color-primary-950: #111325;

  /* Secondary */
  --color-secondary-50: #f6f0ff;
  --color-secondary-100: #ece2ff;
  --color-secondary-200: #dac4fd;
  --color-secondary-300: #c6a3fa;
  --color-secondary-400: #b380f5;
  --color-secondary-500: #9333ea;
  --color-secondary-600: #772ebc;
  --color-secondary-700: #5b288f;
  --color-secondary-800: #412165;
  --color-secondary-900: #2c1942;
  --color-secondary-950: #1a1226;

  /* Accent */
  --color-accent-50: #eff6f9;
  --color-accent-100: #deedf3;
  --color-accent-200: #bddce7;
  --color-accent-300: #98c8d9;
  --color-accent-400: #71b4cb;
  --color-accent-500: #0891b2;
  --color-accent-600: #15758f;
  --color-accent-700: #185b6e;
  --color-accent-800: #17414e;
  --color-accent-900: #142c34;
  --color-accent-950: #0f1a1e;

  /* Neutral */
  --color-neutral-50: #f2f3f5;
  --color-neutral-100: #e5e8ec;
  --color-neutral-200: #cbd1d9;
  --color-neutral-300: #aeb7c4;
  --color-neutral-400: #939eaf;
  --color-neutral-500: #64748b;
  --color-neutral-600: #525e70;
  --color-neutral-700: #404957;
  --color-neutral-800: #2f353f;
  --color-neutral-900: #20242a;
  --color-neutral-950: #151719;

  /* Success */
  --color-success-50: #eff7f2;
  --color-success-100: #deeee6;
  --color-success-200: #bdddcd;
  --color-success-300: #98cbb2;
  --color-success-400: #71b897;
  --color-success-500: #059669;
  --color-success-600: #147956;
  --color-success-700: #185d43;
  --color-success-800: #174331;
  --color-success-900: #142d22;
  --color-success-950: #0f1b15;

  /* Warning */
  --color-warning-50: #fdf4ee;
  --color-warning-100: #fbeadd;
  --color-warning-200: #f6d4bc;
  --color-warning-300: #f0bc96;
  --color-warning-400: #e8a46e;
  --color-warning-500: #d97706;
  --color-warning-600: #ae6113;
  --color-warning-700: #854c17;
  --color-warning-800: #5e3716;
  --color-warning-900: #3e2613;
  --color-warning-950: #23180f;

  /* Error */
  --color-error-50: #fff0f0;
  --color-error-100: #ffe0e0;
  --color-error-200: #ffc1c2;
  --color-error-300: #fb9ea1;
  --color-error-400: #f47981;
  --color-error-500: #e11d48;
  --color-error-600: #b5203c;
  --color-error-700: #8b1f30;
  --color-error-800: #631c24;
  --color-error-900: #41161a;
  --color-error-950: #261011;


  /* Semantic Tokens */
  --bg-default: #f2f3f5;
  --bg-subtle: #e5e8ec;
  --bg-muted: #cbd1d9;
  --text-primary: #20242a;
  --text-secondary: #525e70;
  --text-disabled: #939eaf;
  --border-default: #cbd1d9;
  --border-strong: #939eaf;
  --action-bg: #403cb8;
  --action-text: #ffffff;
  --action-hover: #32318c;
  --success-surface: #deeee6;
  --success-text: #185d43;
  --warning-surface: #fbeadd;
  --warning-text: #854c17;
  --error-surface: #ffe0e0;
  --error-text: #8b1f30;
  --focus-ring: #4f46e5;
}

/* Dark Mode */
.dark {
  --bg-default: #151719;
  --bg-subtle: #20242a;
  --bg-muted: #2f353f;
  --text-primary: #f2f3f5;
  --text-secondary: #aeb7c4;
  --text-disabled: #525e70;
  --border-default: #2f353f;
  --border-strong: #525e70;
  --action-bg: #4f46e5;
  --action-text: #ffffff;
  --action-hover: #7e88f2;
  --success-surface: #0f1b15;
  --success-text: #98cbb2;
  --warning-surface: #23180f;
  --warning-text: #f0bc96;
  --error-surface: #261011;
  --error-text: #fb9ea1;
  --focus-ring: #7e88f2;
}