/**
 * Design tokens — raw palette, semantic mappings, and Tailwind theme.
 *
 * Imported by `index.css`. This file is the source of truth consumed by
 * `tailwind-token-extractor` — run `pnpm generate:tokens` after editing.
 */

:root {
  --white: oklch(1 0 0);

  /* Gray — H: 235 (sky blue tint), minimal chroma for branded neutral */
  --gray-50: oklch(0.975 0.001 235);
  --gray-100: oklch(0.945 0.0015 235);
  --gray-200: oklch(0.9 0.003 235);
  --gray-300: oklch(0.84 0.004 235);
  --gray-400: oklch(0.75 0.005 235);
  --gray-500: oklch(0.66 0.006 235);
  --gray-600: oklch(0.52 0.006 235);
  --gray-700: oklch(0.42 0.003 235);
  --gray-800: oklch(0.3 0.002 235);
  --gray-900: oklch(0.25 0.0015 235);
  --gray-950: oklch(0.18 0.001 235);

  /* Red — H: 25 */
  --red-50: oklch(0.975 0.016 25);
  --red-100: oklch(0.945 0.042 25);
  --red-200: oklch(0.9 0.084 25);
  --red-300: oklch(0.84 0.15 25);
  --red-400: oklch(0.75 0.225 25);
  --red-500: oklch(0.66 0.27 25);
  --red-600: oklch(0.575 0.255 25);
  --red-700: oklch(0.49 0.22 25);
  --red-800: oklch(0.41 0.18 25);
  --red-900: oklch(0.37 0.14 25);
  --red-950: oklch(0.18 0.1 25);

  /* Pink — H: 350 */
  --pink-50: oklch(0.975 0.016 350);
  --pink-100: oklch(0.945 0.038 350);
  --pink-200: oklch(0.9 0.078 350);
  --pink-300: oklch(0.84 0.145 350);
  --pink-400: oklch(0.75 0.225 350);
  --pink-500: oklch(0.66 0.27 350);
  --pink-600: oklch(0.575 0.26 350);
  --pink-700: oklch(0.49 0.23 350);
  --pink-800: oklch(0.41 0.19 350);
  --pink-900: oklch(0.37 0.15 350);
  --pink-950: oklch(0.18 0.108 350);

  /* Purple — H: 305 */
  --purple-50: oklch(0.975 0.018 305);
  --purple-100: oklch(0.945 0.042 305);
  --purple-200: oklch(0.9 0.082 305);
  --purple-300: oklch(0.84 0.155 305);
  --purple-400: oklch(0.75 0.24 305);
  --purple-500: oklch(0.66 0.29 305);
  --purple-600: oklch(0.575 0.295 305);
  --purple-700: oklch(0.49 0.265 305);
  --purple-800: oklch(0.41 0.22 305);
  --purple-900: oklch(0.37 0.175 305);
  --purple-950: oklch(0.18 0.125 305);

  /* Cyan — H: 210 (Secondary) */
  --cyan-50: oklch(0.975 0.022 210);
  --cyan-100: oklch(0.945 0.055 210);
  --cyan-200: oklch(0.9 0.098 210);
  --cyan-300: oklch(0.84 0.155 210);
  --cyan-400: oklch(0.75 0.18 210);
  --cyan-500: oklch(0.66 0.17 210);
  --cyan-600: oklch(0.575 0.15 210);
  --cyan-700: oklch(0.49 0.128 210);
  --cyan-800: oklch(0.41 0.105 210);
  --cyan-900: oklch(0.37 0.082 210);
  --cyan-950: oklch(0.18 0.058 210);

  /* Blue — H: 260 */
  --blue-50: oklch(0.975 0.016 260);
  --blue-100: oklch(0.945 0.04 260);
  --blue-200: oklch(0.9 0.078 260);
  --blue-300: oklch(0.84 0.145 260);
  --blue-400: oklch(0.75 0.21 260);
  --blue-500: oklch(0.66 0.255 260);
  --blue-600: oklch(0.575 0.275 260);
  --blue-700: oklch(0.49 0.26 260);
  --blue-800: oklch(0.41 0.215 260);
  --blue-900: oklch(0.37 0.165 260);
  --blue-950: oklch(0.18 0.118 260);

  /* Teal — H: 180 (Primary) */
  --teal-50: oklch(0.975 0.02 180);
  --teal-100: oklch(0.945 0.058 180);
  --teal-200: oklch(0.9 0.11 180);
  --teal-300: oklch(0.84 0.16 180);
  --teal-400: oklch(0.75 0.175 180);
  --teal-500: oklch(0.66 0.165 180);
  --teal-600: oklch(0.575 0.145 180);
  --teal-700: oklch(0.49 0.12 180);
  --teal-800: oklch(0.41 0.098 180);
  --teal-900: oklch(0.37 0.078 180);
  --teal-950: oklch(0.18 0.055 180);

  /* Green — H: 150 */
  --green-50: oklch(0.975 0.02 150);
  --green-100: oklch(0.945 0.052 150);
  --green-200: oklch(0.9 0.1 150);
  --green-300: oklch(0.84 0.175 150);
  --green-400: oklch(0.75 0.235 150);
  --green-500: oklch(0.66 0.245 150);
  --green-600: oklch(0.575 0.22 150);
  --green-700: oklch(0.49 0.18 150);
  --green-800: oklch(0.41 0.14 150);
  --green-900: oklch(0.37 0.108 150);
  --green-950: oklch(0.18 0.075 150);

  /* Yellow — H: 90 */
  --yellow-50: oklch(0.975 0.03 90);
  --yellow-100: oklch(0.945 0.08 90);
  --yellow-200: oklch(0.9 0.148 90);
  --yellow-300: oklch(0.84 0.2 90);
  --yellow-400: oklch(0.75 0.2 90);
  --yellow-500: oklch(0.66 0.18 90);
  --yellow-600: oklch(0.575 0.158 90);
  --yellow-700: oklch(0.49 0.135 90);
  --yellow-800: oklch(0.41 0.11 90);
  --yellow-900: oklch(0.37 0.085 90);
  --yellow-950: oklch(0.18 0.06 90);

  /* Orange — H: 55 */
  --orange-50: oklch(0.975 0.02 55);
  --orange-100: oklch(0.945 0.05 55);
  --orange-200: oklch(0.9 0.098 55);
  --orange-300: oklch(0.84 0.165 55);
  --orange-400: oklch(0.75 0.22 55);
  --orange-500: oklch(0.66 0.24 55);
  --orange-600: oklch(0.575 0.235 55);
  --orange-700: oklch(0.49 0.2 55);
  --orange-800: oklch(0.41 0.165 55);
  --orange-900: oklch(0.37 0.128 55);
  --orange-950: oklch(0.18 0.09 55);

  --fg-base: var(--gray-900);
  --fg-subtle: var(--gray-400);
  --fg-mute: var(--gray-700);
  --fg-inverse: var(--gray-50);
  --fg-info: var(--blue-800);
  --fg-success: var(--green-800);
  --fg-warning: var(--yellow-800);
  --fg-error: var(--red-800);

  --bg-base: var(--white);
  --bg-raised: var(--white);
  --bg-surface: var(--gray-50);
  --bg-subtle: var(--gray-100);
  --bg-mute: var(--gray-200);
  --bg-emphasize: var(--gray-300);
  --bg-inverse: var(--gray-900);
  --bg-info: var(--blue-100);
  --bg-success: var(--green-100);
  --bg-warning: var(--yellow-100);
  --bg-error: var(--red-100);

  --border-base: var(--gray-400);
  --border-subtle: var(--gray-100);
  --border-mute: var(--gray-200);
  --border-emphasize: var(--gray-500);
  --border-inverse: var(--gray-700);
  --border-info: var(--blue-500);
  --border-success: var(--green-500);
  --border-warning: var(--yellow-500);
  --border-error: var(--red-500);

  --primary-fg: var(--teal-800);
  --primary-bg: var(--teal-200);
  --primary-bg-subtle: var(--teal-50);
  --primary-bg-mute: var(--teal-100);
  --primary-bg-emphasize: var(--teal-300);
  --primary-border: var(--teal-500);

  --secondary-fg: var(--cyan-800);
  --secondary-bg: var(--cyan-200);
  --secondary-bg-subtle: var(--cyan-50);
  --secondary-bg-mute: var(--cyan-100);
  --secondary-bg-emphasize: var(--cyan-300);
  --secondary-border: var(--cyan-500);

  --back-drop: rgb(0, 0, 0, 0.5);

  --z-overlay: 1000;
  --z-modal: 1300;
  --z-toast: 1500;

  /* TODO: 上の変数の一環として使えるようにする */
  --group-primary: var(--teal-800);
  --group-secondary: var(--cyan-800);
  --group-tertiary: var(--pink-800);
  --group-quaternary: var(--purple-800);
}

.dark {
  --fg-base: var(--gray-50);
  --fg-subtle: var(--gray-500);
  --fg-mute: var(--gray-300);
  --fg-inverse: var(--gray-900);
  --fg-info: var(--blue-200);
  --fg-success: var(--green-200);
  --fg-warning: var(--yellow-200);
  --fg-error: var(--red-200);

  --bg-base: var(--gray-800);
  --bg-raised: var(--gray-700);
  --bg-surface: var(--gray-950);
  --bg-subtle: var(--gray-900);
  --bg-mute: var(--gray-700);
  --bg-emphasize: var(--gray-600);
  --bg-inverse: var(--white);
  --bg-info: var(--blue-900);
  --bg-success: var(--green-900);
  --bg-warning: var(--yellow-900);
  --bg-error: var(--red-900);

  --border-base: var(--gray-600);
  --border-subtle: var(--gray-700);
  --border-mute: var(--gray-600);
  --border-emphasize: var(--gray-500);
  --border-inverse: var(--gray-300);
  --border-info: var(--blue-400);
  --border-success: var(--green-400);
  --border-warning: var(--yellow-400);
  --border-error: var(--red-400);

  --primary-fg: var(--teal-300);
  --primary-bg: var(--teal-800);
  --primary-bg-subtle: var(--teal-950);
  --primary-bg-mute: var(--teal-900);
  --primary-bg-emphasize: var(--teal-700);
  --primary-border: var(--teal-500);

  --secondary-fg: var(--cyan-300);
  --secondary-bg: var(--cyan-800);
  --secondary-bg-subtle: var(--cyan-950);
  --secondary-bg-mute: var(--cyan-900);
  --secondary-bg-emphasize: var(--cyan-700);
  --secondary-border: var(--cyan-500);

  /* TODO: 上の変数の一環として使えるようにする */
  --group-primary: var(--teal-200);
  --group-secondary: var(--cyan-200);
  --group-tertiary: var(--pink-200);
  --group-quaternary: var(--purple-200);
}

@theme inline {
  --color-*: initial;
  --color-fg-base: var(--fg-base);
  --color-fg-subtle: var(--fg-subtle);
  --color-fg-mute: var(--fg-mute);
  --color-fg-inverse: var(--fg-inverse);
  --color-fg-info: var(--fg-info);
  --color-fg-success: var(--fg-success);
  --color-fg-warning: var(--fg-warning);
  --color-fg-error: var(--fg-error);

  --color-bg-base: var(--bg-base);
  --color-bg-raised: var(--bg-raised);
  --color-bg-surface: var(--bg-surface);
  --color-bg-subtle: var(--bg-subtle);
  --color-bg-mute: var(--bg-mute);
  --color-bg-emphasize: var(--bg-emphasize);
  --color-bg-inverse: var(--bg-inverse);
  --color-bg-info: var(--bg-info);
  --color-bg-success: var(--bg-success);
  --color-bg-warning: var(--bg-warning);
  --color-bg-error: var(--bg-error);

  --color-border-base: var(--border-base);
  --color-border-subtle: var(--border-subtle);
  --color-border-mute: var(--border-mute);
  --color-border-emphasize: var(--border-emphasize);
  --color-border-inverse: var(--border-inverse);
  --color-border-info: var(--border-info);
  --color-border-success: var(--border-success);
  --color-border-warning: var(--border-warning);
  --color-border-error: var(--border-error);

  --color-primary-fg: var(--primary-fg);
  --color-primary-bg: var(--primary-bg);
  --color-primary-bg-subtle: var(--primary-bg-subtle);
  --color-primary-bg-mute: var(--primary-bg-mute);
  --color-primary-bg-emphasize: var(--primary-bg-emphasize);
  --color-primary-border: var(--primary-border);

  --color-secondary-fg: var(--secondary-fg);
  --color-secondary-bg: var(--secondary-bg);
  --color-secondary-bg-subtle: var(--secondary-bg-subtle);
  --color-secondary-bg-mute: var(--secondary-bg-mute);
  --color-secondary-bg-emphasize: var(--secondary-bg-emphasize);
  --color-secondary-border: var(--secondary-border);

  --color-transparent: transparent;
  --color-back-drop: var(--back-drop);

  --color-group-primary: var(--group-primary);
  --color-group-secondary: var(--group-secondary);
  --color-group-tertiary: var(--group-tertiary);
  --color-group-quaternary: var(--group-quaternary);

  --radius-*: initial;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;

  --font-*: initial;
  --font-noto-sans-jp: var(--font-noto-sans-jp);
  --font-m-plus-2: var(--font-m-plus-2);

  --text-*: initial;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-md: 1rem;
  --text-md--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-emphasize: 3rem;
  --text-emphasize--line-height: 1;
  --text-highlight: 6rem;
  --text-highlight--line-height: 1;

  --font-weight-*: initial;
  --font-weight-medium: 450;
  --font-weight-bold: 700;

  --tracking-*: initial;
  --tracking-none: 0em;
  --tracking-normal: 0.025em;

  --leading-*: initial;
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  --shadow-*: initial;
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  --inset-shadow-*: initial;
  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);
  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);
  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);

  --spacing: 0.25rem;

  --breakpoint-*: initial;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
}