/*
 * DWARFLAB Design System tokens.
 * Raw values live only in this mapping layer; component styles consume semantic tokens.
 */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-primary: #05a479;
  --color-on-primary: #f4fff7;
  --color-primary-container: #008863;
  --color-on-primary-container: #f4fff7;
  --color-secondary: #917eff;
  --color-on-secondary: #fffbff;
  --color-secondary-container: #765cfa;
  --color-on-secondary-container: #fffbff;
  --color-secondary-container-variant: #33765cfa;
  --color-tertiary: #dd7522;
  --color-on-tertiary: #fffbff;
  --color-tertiary-container: #bc5c02;
  --color-on-tertiary-container: #fffbff;
  --color-error: #f65d59;
  --color-on-error: #fffbff;
  --color-error-container: #d34442;
  --color-on-error-container: #fffbff;
  --color-surface-dim: #000000;
  --color-surface: #111111;
  --color-surface-bright: #1b1b1c;
  --color-surface-container-lowest: #000000;
  --color-surface-container-low: #111111;
  --color-surface-container: #1b1b1c;
  --color-surface-container-high: #252526;
  --color-surface-container-highest: #303031;
  --color-on-surface: #efeff4;
  --color-on-surface-variant: #909093;
  --color-border: #464648;
  --color-border-variant: #303031;
  --color-mask-strong: #bf000000;
  --color-mask-medium: #8c000000;
  --color-mask-weak: #59000000;
  --color-mask-weakest: #26000000;
  --color-link: #3c9ae8;
  --color-gradient-secondary-start: #2a556a;
  --color-gradient-secondary-end: #42396c;
  --color-gradient-primary-start: #05a479;
  --color-gradient-primary-end: #5ddcad;
  --color-battery-yellow: #ffd81a;
  --color-ai-gradient-startpoint: #4592ff;
  --color-ai-gradient-endpoint: #960cff;
  --color-pressed-10: #1affffff;

  --gradient-secondary: linear-gradient(135deg, var(--color-gradient-secondary-start), var(--color-gradient-secondary-end));
  --gradient-primary: linear-gradient(135deg, var(--color-gradient-primary-start), var(--color-gradient-primary-end));
  --gradient-ai: linear-gradient(135deg, var(--color-ai-gradient-startpoint), var(--color-ai-gradient-endpoint));

  --font-family: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "PingFang SC", system-ui, sans-serif;
  --typography-headline: 500 24px/32px var(--font-family);
  --typography-headline-emphasized: 700 24px/32px var(--font-family);
  --typography-title-large: 500 20px/28px var(--font-family);
  --typography-title-large-emphasized: 600 20px/28px var(--font-family);
  --typography-title-medium: 500 16px/24px var(--font-family);
  --typography-title-medium-emphasized: 600 16px/24px var(--font-family);
  --typography-title-small: 500 14px/22px var(--font-family);
  --typography-title-small-emphasized: 600 14px/22px var(--font-family);
  --typography-body-large: 400 16px/24px var(--font-family);
  --typography-body-large-emphasized: 500 16px/24px var(--font-family);
  --typography-body-medium: 400 14px/22px var(--font-family);
  --typography-body-medium-emphasized: 500 14px/22px var(--font-family);
  --typography-body-small: 400 12px/20px var(--font-family);
  --typography-body-small-emphasized: 500 12px/20px var(--font-family);
  --typography-label-large: 500 14px/22px var(--font-family);
  --typography-label-large-emphasized: 600 14px/22px var(--font-family);
  --typography-label-medium: 500 12px/20px var(--font-family);
  --typography-label-medium-emphasized: 600 12px/20px var(--font-family);
  --typography-label-small: 500 10px/18px var(--font-family);
  --typography-label-small-emphasized: 600 10px/18px var(--font-family);

  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;

  --radius-extra-small: 4px;
  --radius-small: 8px;
  --radius-medium: 12px;
  --radius-large: 16px;
  --radius-extra-large: 32px;
  --radius-rounded: 999px;
}

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

  --color-primary: #05a479;
  --color-on-primary: #e7fff1;
  --color-primary-container: #006c4e;
  --color-on-primary-container: #e7fff1;
  --color-secondary: #917eff;
  --color-on-secondary: #fdf8ff;
  --color-secondary-container: #5d3fe0;
  --color-on-secondary-container: #fdf8ff;
  --color-secondary-container-variant: #335d3fe0;
  --color-tertiary: #dd7522;
  --color-on-tertiary: #fff8f5;
  --color-tertiary-container: #974800;
  --color-on-tertiary-container: #fff8f5;
  --color-error: #f65d59;
  --color-on-error: #fff8f7;
  --color-error-container: #b12b2d;
  --color-on-error-container: #fff8f7;
  --color-surface-dim: #e1e1e5;
  --color-surface: #efeff4;
  --color-surface-bright: #f8f8fc;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #fcfcff;
  --color-surface-container: #f8f8fc;
  --color-surface-container-high: #efeff4;
  --color-surface-container-highest: #e1e1e5;
  --color-on-surface: #252526;
  --color-on-surface-variant: #767679;
  --color-border: #aaaaad;
  --color-border-variant: #e1e1e5;
  --color-link: #3c9ae8;
  --color-gradient-secondary-start: #dde8ee;
  --color-gradient-secondary-end: #c8d1f0;
  --color-gradient-primary-start: #3cc093;
  --color-gradient-primary-end: #5ddcad;
  --color-battery-yellow: #e9be31;
  --color-pressed-10: #1a000000;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;

    --color-primary: #05a479;
    --color-on-primary: #e7fff1;
    --color-primary-container: #006c4e;
    --color-on-primary-container: #e7fff1;
    --color-secondary: #917eff;
    --color-on-secondary: #fdf8ff;
    --color-secondary-container: #5d3fe0;
    --color-on-secondary-container: #fdf8ff;
    --color-secondary-container-variant: #335d3fe0;
    --color-tertiary: #dd7522;
    --color-on-tertiary: #fff8f5;
    --color-tertiary-container: #974800;
    --color-on-tertiary-container: #fff8f5;
    --color-error: #f65d59;
    --color-on-error: #fff8f7;
    --color-error-container: #b12b2d;
    --color-on-error-container: #fff8f7;
    --color-surface-dim: #e1e1e5;
    --color-surface: #efeff4;
    --color-surface-bright: #f8f8fc;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #fcfcff;
    --color-surface-container: #f8f8fc;
    --color-surface-container-high: #efeff4;
    --color-surface-container-highest: #e1e1e5;
    --color-on-surface: #252526;
    --color-on-surface-variant: #767679;
    --color-border: #aaaaad;
    --color-border-variant: #e1e1e5;
    --color-link: #3c9ae8;
    --color-gradient-secondary-start: #dde8ee;
    --color-gradient-secondary-end: #c8d1f0;
    --color-gradient-primary-start: #3cc093;
    --color-gradient-primary-end: #5ddcad;
    --color-battery-yellow: #e9be31;
    --color-pressed-10: #1a000000;
  }
}