:root {
  /* 1. Color */
  /* 1a. Primitives */
  --ds-color-navy: #0a122a;
  --ds-color-navy-light: #c9d2e1;
  --ds-color-green: #21cc36;
  --ds-color-green-light: #ccf1d2;
  --ds-color-yellow: #f0c808;
  --ds-color-yellow-light: #fbe9a2;
  --ds-color-platinum: #dad9d7;
  --ds-color-platinum-light: #e6e5e3;
  --ds-color-pink: #e81167;
  --ds-color-pink-light: #f7cde1;
  --ds-color-red: #d32f2f;
  --ds-color-red-light: #f8cccc;
  --ds-color-light-blue: #4a90e2;
  --ds-color-light-blue-light: #cfe3f9;
  --ds-color-signal-blue: #69a2b0;
  --ds-color-signal-blue-light: #d1e5eb;
  --ds-color-teal: #09b180;
  --ds-color-teal-light: #c6eee4;
  --ds-color-light-green: #2dcdb0;
  --ds-color-light-green-light: #cdefd9;
  --ds-color-white: #ffffff;
  --ds-color-soft: #f7f7f7;
  --ds-color-chip: #f0f0f0;
  --ds-color-black: #101318;
  --ds-color-body: #636466;
  --ds-color-medium-gray: var(--ds-color-body);
  --ds-color-medium-gray-light: #d6d7d9;
  --ds-color-text: #141b2d;
  --ds-color-subtle: #8f939c;

  /* 1b. Semantics */
  --ds-bg-app: var(--ds-color-soft);
  --ds-bg-surface: var(--ds-color-white);
  --ds-bg-alt: var(--ds-color-chip);
  --ds-bg-dark: var(--ds-color-navy);
  --ds-bg-overlay: color-mix(in srgb, var(--ds-color-navy) 55%, transparent);

  --ds-border-default: color-mix(in srgb, var(--ds-color-platinum) 62%, white);
  --ds-border-soft: color-mix(in srgb, var(--ds-color-platinum) 45%, white);
  --ds-border-dashed: var(--ds-color-platinum);
  --ds-border-subtle: #e5e7eb;
  --ds-border-strong: #d1d5db;
  --ds-border-hover: #9ca3af;

  --ds-text-title: var(--ds-color-navy);
  --ds-text-body: var(--ds-color-body);
  --ds-text-muted: #8b909a;
  --ds-text-label: #a0a2ab;
  --ds-text-strong: #111827;
  --ds-text-secondary: #4b5563;
  --ds-text-tertiary: #6b7280;
  --ds-text-quaternary: #374151;
  --ds-text-soft: #666a75;
  --ds-text-warning-strong: #7a6100;
  --ds-text-on-dark: var(--ds-color-white);

  --ds-surface-subtle: #f9fafb;
  --ds-surface-neutral: #f3f4f6;
  --ds-surface-code: #f8fafc;
  --ds-bg-success-subtle: #ecfdf0;

  --ds-color-action: var(--ds-color-green);
  --ds-color-action-hover: var(--ds-color-teal);
  --ds-color-action-active: var(--ds-color-light-green);
  --ds-color-success: var(--ds-color-green);
  --ds-color-info: var(--ds-color-light-blue);
  --ds-color-warning: var(--ds-color-yellow);
  --ds-color-danger: var(--ds-color-pink);
  --ds-color-disabled: var(--ds-color-platinum);

  --ds-color-status-active-light-border: #8fdaa0;
  --ds-color-status-pending-light-border: #eecf62;
  --ds-color-status-inactive-light-border: #ee9d9d;

  /* 2. Typography */
  /* 2a. Primitives */
  --ds-font-family: "Raleway", "Segoe UI", sans-serif;
  --ds-font-weight-light: 300;
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 700;

  /* 2b. Semantics */
  --ds-font-size-body: 16px;
  --ds-line-height-body: 1.5;
  --ds-font-size-label: 0.62rem;
  --ds-font-size-title: clamp(2rem, 6vw, 3rem);
  --ds-font-size-subtitle: 1rem;
  --ds-font-size-card-title: 1.6rem;
  --ds-font-size-input: 1rem;
  --ds-font-size-btn: 0.875rem;

  --ds-letter-spacing-tight: -0.03em;
  --ds-letter-spacing-card: -0.03em;
  --ds-letter-spacing-label: 0.2em;

  --ds-typography-scale-11: 11px;
  --ds-typography-scale-12: 12px;
  --ds-typography-scale-13: 13px;
  --ds-typography-scale-14: 14px;
  --ds-typography-scale-16: 16px;
  --ds-typography-scale-18: 18px;
  --ds-typography-scale-20: 20px;
  --ds-typography-scale-24: 24px;
  --ds-typography-scale-36: 36px;
  --ds-typography-scale-48: 48px;

  /* 3. Spacing */
  /* 3a. Primitives */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-space-20: 80px;

  /* 3b. Semantics */
  --ds-container-max-width: 1200px;
  --ds-section-padding-y: clamp(80px, 10vw, 140px);
  --ds-section-padding-x: clamp(20px, 5vw, 80px);

  /* 4. Radius */
  /* 4a. Primitives */
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-pill: 999px;

  /* 4b. Semantics */
  --ds-radius-button: 14px;
  --ds-radius-control: 10px;

  /* 5. Borders */
  /* 5a. Primitives */
  --ds-border-width-1: 1px;
  --ds-border-width-2: 2px;
  --ds-border-style-solid: solid;

  /* 5b. Semantics */
  --ds-border-control: var(--ds-border-strong);
  --ds-border-control-hover: var(--ds-border-hover);

  /* 6. Elevation */
  /* 6a. Primitives */
  --ds-shadow-sm: 0 4px 14px rgba(10, 18, 42, 0.06);
  --ds-shadow-md: 0 12px 28px rgba(10, 18, 42, 0.12);
  --ds-shadow-green: 0 4px 14px rgba(33, 204, 54, 0.3);

  /* 6b. Semantics */
  --ds-elevation-1: var(--ds-shadow-sm);
  --ds-elevation-2: var(--ds-shadow-md);
  --ds-shadow-menu: 0 6px 20px rgba(10, 18, 42, 0.1);

  /* 7. Motion */
  /* 7a. Primitives */
  --ds-motion-duration-fast: 180ms;
  --ds-motion-duration-base: 250ms;
  --ds-motion-ease-standard: ease;

  /* 7b. Semantics */
  --ds-transition-fast: var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
  --ds-transition-base: var(--ds-motion-duration-base) var(--ds-motion-ease-standard);

  /* 8. Focus/State */
  /* 8a. Primitives */
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;

  /* 8b. Semantics */
  --ds-focus-ring-color: var(--ds-color-green);
  --ds-z-navbar: 50;
  --ds-z-toast: 999;

  /* 9. Sizing Scales Shared */
  /* 9a. Controls (sm/md/lg/xl) */
  --ds-size-control-sm-height: 40px;
  --ds-size-control-md-height: 44px;
  --ds-size-control-lg-height: 48px;
  --ds-size-control-xl-height: 52px;
  --ds-size-control-sm-padding-x: 16px;
  --ds-size-control-md-padding-x: 16px;
  --ds-size-control-lg-padding-x: 20px;
  --ds-size-control-xl-padding-x: 24px;

  /* 9b. Pills/Tags (xs/sm/md/lg) */
  --ds-size-pill-xs-font-size: 11px;
  --ds-size-pill-sm-font-size: 12px;
  --ds-size-pill-md-font-size: 13px;
  --ds-size-pill-lg-font-size: 14px;
  --ds-size-pill-xs-padding-y: 5px;
  --ds-size-pill-xs-padding-x: 9px;
  --ds-size-pill-sm-padding-y: 6px;
  --ds-size-pill-sm-padding-x: 10px;
  --ds-size-pill-md-padding-y: 7px;
  --ds-size-pill-md-padding-x: 12px;
  --ds-size-pill-lg-padding-y: 8px;
  --ds-size-pill-lg-padding-x: 14px;
}