/* Lumia DS - Tokens */

:root {
  color-scheme: dark;

  /* Color - Item */
  --color-item-disabled: #27272A;

  --color-item-primary-idle: #00CEBF;
  --color-item-primary-hover: #00F0E0;
  --color-item-primary-selected: #00948A;

  --color-item-secondary-idle: #3F3F46;
  --color-item-secondary-hover: #4A4A52;
  --color-item-secondary-selected: #18181B;

  --color-item-subtle-idle: #27272A;
  --color-item-subtle-hover: #333338;
  --color-item-subtle-selected: #52525B;

  --color-item-success-idle: #34D399;
  --color-item-success-hover: #6EE7B7;
  --color-item-success-selected: #10B981;

  --color-item-warning-idle: #FBBF24;
  --color-item-warning-hover: #FCD34D;
  --color-item-warning-selected: #D97706;

  --color-item-danger-idle: #EF4444;
  --color-item-danger-hover: #F87171;
  --color-item-danger-selected: #DC2626;

  /* Color - Surface */
  --color-surface-default: #18181B;
  --color-surface-raised: #27272A;

  /* Color - Text */
  --color-text-default: #FAFAFA;
  --color-text-subtle: #A1A1AA;
  --color-text-disabled: #52525B;
  --color-text-inverse: #09090B;
  --color-text-brand: #00CEBF;
  --color-text-success: #34D399;
  --color-text-warning: #FBBF24;
  --color-text-warning-inverse: #09090B;
  --color-text-danger: #EF4444;

  /* Color - Link */
  --color-link-idle: #14BFC8;
  --color-link-pressed: #55DCE3;
  --color-link-visited: #A78BFA;
  --color-link-visited-pressed: #8B5CF6;

  /* Color - Border */
  --color-border-default: #3F3F46;
  --color-border-disabled: #27272A;
  --color-border-focused: #14BFC8;
  --color-border-danger: #EF4444;

  /* Font - Family */
  --font-family-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Font - Size */
  --font-size-heading-h1: 2.25rem;
  --font-size-heading-h2: 1.875rem;
  --font-size-heading-h3: 1.5rem;
  --font-size-heading-h4: 1.25rem;
  --font-size-heading-h5: 1.125rem;
  --font-size-heading-h6: 1rem;

  --font-size-body-large: 1.125rem;
  --font-size-body-medium: 1rem;
  --font-size-body-small: 0.875rem;

  /* Font - Weight */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Shadow */
  --shadow-idle: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-drag: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-static: 0 1px 2px rgba(0, 0, 0, 0.35);

  /* Spacing */
  --spacing-0: 0;
  --spacing-025: 2px;
  --spacing-050: 4px;
  --spacing-075: 6px;
  --spacing-100: 8px;
  --spacing-150: 12px;
  --spacing-200: 16px;
  --spacing-250: 20px;
  --spacing-300: 24px;
  --spacing-400: 32px;
  --spacing-500: 40px;
  --spacing-600: 48px;
  --spacing-800: 64px;
  --spacing-1000: 80px;

  /* Radius */
  --radius-none: 0;
  --radius-small: 4px;
  --radius-medium: 6px;
  --radius-large: 8px;
  --radius-full: 9999px;

  /* Border */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;

  /* Motion */
  --motion-duration-instant: 0ms;
  --motion-duration-short: 150ms;
  --motion-duration-medium: 200ms;
  --motion-duration-long: 250ms;
  --motion-duration-large: 700ms;
  --motion-easing-linear: linear;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
}

:root[data-theme="midnight"] {
  --color-item-disabled: #18181B;

  --color-item-secondary-idle: #1F1F22;
  --color-item-secondary-hover: #2A2A2E;
  --color-item-secondary-selected: #09090B;

  --color-item-subtle-idle: #101012;
  --color-item-subtle-hover: #1A1A1D;
  --color-item-subtle-selected: #2A2A2E;

  --color-surface-default: #09090B;
  --color-surface-raised: #131316;

  --color-border-disabled: #27272A;
}

:root[data-theme="light"] {
  color-scheme: light;

  --color-item-disabled: #F4F4F5;

  --color-item-primary-idle: #10979E;
  --color-item-primary-hover: #0C787D;
  --color-item-primary-selected: #07565A;

  --color-item-secondary-idle: #E4E4E7;
  --color-item-secondary-hover: #D4D4D8;
  --color-item-secondary-selected: #A1A1AA;

  --color-item-subtle-idle: #F7F7F8;
  --color-item-subtle-hover: #EDEDEF;
  --color-item-subtle-selected: #D4D4D8;

  --color-item-success-idle: #10B981;
  --color-item-success-hover: #059669;
  --color-item-success-selected: #047857;

  --color-item-warning-idle: #F59E0B;
  --color-item-warning-hover: #D97706;
  --color-item-warning-selected: #B45309;

  --color-item-danger-idle: #EF4444;
  --color-item-danger-hover: #DC2626;
  --color-item-danger-selected: #B91C1C;

  --color-surface-default: #FFFFFF;
  --color-surface-raised: #F4F4F5;

  --color-text-default: #09090B;
  --color-text-subtle: #71717A;
  --color-text-disabled: #C4C4C9;
  --color-text-inverse: #FAFAFA;
  --color-text-brand: #10979E;
  --color-text-success: #059669;
  --color-text-warning: #D97706;
  --color-text-warning-inverse: #09090B;
  --color-text-danger: #DC2626;

  --color-link-idle: #0B7378;
  --color-link-pressed: #084F53;
  --color-link-visited: #7C3AED;
  --color-link-visited-pressed: #5B21B6;

  --color-border-default: #D4D4D8;
  --color-border-disabled: #E4E4E7;
  --color-border-focused: #0D8187;
  --color-border-danger: #EF4444;

  --shadow-idle: 0 1px 3px rgba(24, 24, 22, 0.1), 0 1px 2px rgba(24, 24, 22, 0.06);
  --shadow-drag: 0 10px 15px -3px rgba(24, 24, 22, 0.1), 0 4px 6px -4px rgba(24, 24, 22, 0.1);
  --shadow-static: 0 1px 2px rgba(24, 24, 22, 0.05);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-medium);
  line-height: 1.5;
  color: var(--color-text-default);
  background-color: var(--color-surface-default);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
}

:focus-visible {
  outline: var(--border-width-thin) solid var(--color-border-focused);
  outline-offset: var(--border-width-thin);
}

:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}