:root {
  /* == Neutrals == */
  --color-palette-black-ink: oklch(21.9% 0.006 285.911deg);
  --color-palette-charcoal: oklch(26.6% 0.008 240.166deg);
  --color-palette-charcoal-gray: oklch(33.7% 0.026 266.801deg);
  --color-palette-carbon: oklch(39.8% 0 89.876deg);
  --color-palette-cloud-gray: oklch(53.6% 0.005 236.565deg);
  --color-palette-stone: oklch(64.3% 0.005 91.471deg);
  --color-palette-silver: oklch(72.9% 0.001 17.185deg);
  --color-palette-light-silver: oklch(82.6% 0.002 247.844deg);
  --color-palette-pale-gray: oklch(91.3% 0.004 91.449deg);
  --color-palette-very-pale-gray: oklch(94.3% 0 89.876deg);
  --color-palette-off-white: oklch(98.1% 0.003 247.858deg);
  --color-palette-ice-blue: oklch(99.9% 0.001 197.139deg);

  /* == Accents == */
  --color-palette-lava: oklch(63.6% 0.193 17.075deg);
  --color-palette-cerise: oklch(60.7% 0.23 18.554deg);
  --color-palette-persimmon: oklch(68.6% 0.179 40.01deg);
  --color-palette-fuchsia: oklch(49.6% 0.181 351.176deg);
  --color-palette-bright-canary: oklch(89% 0.157 97.726deg);
  --color-palette-lime-green: oklch(74.6% 0.18 129.939deg);
  --color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);
  --color-palette-electric-blue: oklch(90.8% 0.128 188.419deg);

  /* === Semantic Colors === */

  /* == Primary / Secondary / Tertiary == */
  --color-primary: var(--color-palette-lava);
  --color-primary-surface: oklch(from var(--color-primary) calc(l + 0.1) c h);
  --color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
  --color-secondary: var(--color-palette-lime-green);
  --color-secondary-surface: oklch(
    from var(--color-secondary) calc(l + 0.1) c h
  );
  --color-secondary-emphasis: oklch(
    from var(--color-secondary) calc(l - 0.15) c h
  );
  --color-tertiary: var(--color-palette-bright-canary);
  --color-tertiary-surface: oklch(from var(--color-tertiary) calc(l + 0.1) c h);
  --color-tertiary-emphasis: oklch(
    from var(--color-tertiary) calc(l - 0.15) c h
  );

  /* == Text == */
  --color-text-primary: var(--color-palette-black-ink);
  --color-text-secondary: var(--color-palette-charcoal);
  --color-text-tertiary: var(--color-palette-charcoal-gray);
  --color-text-quarternary: var(--color-palette-carbon);
  --color-text-inverse: var(--color-palette-ice-blue);
  --color-text-disabled: var(--color-palette-cloud-gray);

  /* == Surfaces == */
  --color-surface-base: var(--color-palette-ice-blue);
  --color-surface-elevated-1: var(--color-palette-off-white);
  --color-surface-elevated-2: var(--color-palette-very-pale-gray);
  --color-surface-elevated-3: var(--color-palette-pale-gray);
  --color-surface-elevated-4: var(--color-palette-light-silver);
  --color-surface-inverse: var(--color-palette-black-ink);

  /* == Borders == */
  --color-border-subtle: var(--color-palette-silver);
  --color-border-normal: var(--color-palette-stone);
  --color-border-strong: var(--color-palette-charcoal-gray);

  /* == States == */
  --color-state-error: var(--color-palette-cerise);
  --color-state-warning: var(--color-palette-persimmon);
  --color-state-success: var(--color-palette-lime-green);
  --color-state-info: var(--color-palette-royal-blue);

  /* == Links == */
  --color-text-link: var(--color-text-tertiary);
  --color-text-link-hover: var(--color-secondary);
  --color-text-link-visited: var(--color-palette-fuchsia);

  /* == Focus == */
  --color-focus-ring: var(--color-primary);

  /* == Overlays == */
  --color-overlay-light: oklch(0% 0 0deg / 10%);
  --color-overlay-medium: oklch(0% 0 0deg / 30%);
  --color-overlay-heavy: oklch(0% 0 0deg / 60%);

  /* == Shadows == */
  --color-shadow: oklch(0% 0 0deg / 10%);
  --color-shadow-strong: oklch(0% 0 0deg / 25%);

  /* == Utility == */
  --color-highlight: var(--color-tertiary-surface);
  --color-highlight-strong: var(--color-tertiary);
  --color-skeleton-base: var(--color-surface-elevated-2);
  --color-skeleton-shimmer: var(--color-surface-elevated-1);
}

.dark {
  --color-text-primary: var(--color-palette-ice-blue);
  --color-text-secondary: var(--color-palette-pale-gray);
  --color-text-tertiary: var(--color-palette-light-silver);
  --color-text-quarternary: var(--color-palette-silver);
  --color-text-inverse: var(--color-palette-black-ink);
  --color-text-disabled: var(--color-palette-cloud-gray);
  --color-surface-base: var(--color-palette-black-ink);
  --color-surface-elevated-1: var(--color-palette-charcoal);
  --color-surface-elevated-2: var(--color-palette-charcoal-gray);
  --color-surface-elevated-3: var(--color-palette-carbon);
  --color-surface-elevated-4: var(--color-palette-cloud-gray);
  --color-surface-inverse: var(--color-palette-ice-blue);
  --color-border-subtle: var(--color-palette-charcoal-gray);
  --color-border-normal: var(--color-palette-carbon);
  --color-border-strong: var(--color-palette-silver);
}
