@layer tokens, base, components, shell, views, utils;

@layer tokens {
  :root {
    color-scheme: dark;

    --gray-0: oklch(0.115 0 0);
    --gray-1: oklch(0.145 0 0);
    --gray-2: oklch(0.172 0 0);
    --gray-3: oklch(0.2 0 0);
    --gray-4: oklch(0.232 0 0);
    --gray-5: oklch(0.262 0 0);
    --gray-6: oklch(0.31 0 0);
    --gray-7: oklch(0.4 0 0);
    --gray-8: oklch(0.58 0 0);
    --gray-9: oklch(0.74 0 0);
    --gray-10: oklch(0.86 0 0);
    --gray-11: oklch(0.95 0 0);

    --bg: var(--gray-1);
    --bg-sunken: var(--gray-0);
    --surface-1: var(--gray-2);
    --surface-2: var(--gray-3);
    --surface-3: var(--gray-4);
    --surface-hover: oklch(1 0 0 / 0.045);
    --surface-active: oklch(1 0 0 / 0.08);
    --border: var(--gray-5);
    --border-subtle: oklch(0.225 0 0);
    --border-strong: var(--gray-6);

    --text: var(--gray-11);
    --text-2: var(--gray-9);
    --text-3: var(--gray-8);
    --text-4: var(--gray-7);

    --accent: oklch(0.74 0.07 250);
    --accent-hover: oklch(0.82 0.06 250);
    --accent-press: oklch(0.68 0.07 250);
    --accent-soft: oklch(0.74 0.07 250 / 0.13);
    --accent-line: oklch(0.74 0.07 250 / 0.4);
    --on-accent: oklch(0.16 0 0);

    --primary: oklch(0.93 0 0);
    --primary-hover: oklch(0.99 0 0);
    --primary-press: oklch(0.86 0 0);
    --on-primary: oklch(0.15 0 0);

    --ok: oklch(0.76 0.14 155);
    --ok-soft: oklch(0.76 0.14 155 / 0.13);
    --ok-line: oklch(0.76 0.14 155 / 0.36);
    --warn: oklch(0.83 0.13 85);
    --warn-soft: oklch(0.83 0.13 85 / 0.13);
    --warn-line: oklch(0.83 0.13 85 / 0.38);
    --danger: oklch(0.68 0.18 25);
    --danger-soft: oklch(0.68 0.18 25 / 0.13);
    --danger-line: oklch(0.68 0.18 25 / 0.4);
    --danger-hover: oklch(0.72 0.17 25);

    --chart-1: oklch(0.74 0.11 250);
    --chart-2: oklch(0.8 0.1 190);
    --chart-3: oklch(0.82 0.12 90);
    --chart-4: oklch(0.74 0.13 310);

    --font-ui: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-md: 0.875rem;
    --fs-lg: 1rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --lh: 1.5;

    --s-0: 2px;
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;

    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 14px;
    --r-full: 999px;

    --ctl-h: 32px;
    --ctl-h-sm: 28px;
    --ctl-fs: var(--fs-md);
    --tap: 44px;

    --shadow-overlay: 0 12px 32px oklch(0 0 0 / 0.45), 0 0 0 1px var(--border);
    --shadow-pop: 0 6px 18px oklch(0 0 0 / 0.4);

    --dur-fast: 150ms;
    --dur: 200ms;
    --dur-slow: 250ms;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);

    --side-w: 232px;
    --top-h: 52px;
    --nav-h: 60px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --kb: 0px;
  }

  @media (pointer: coarse) {
    :root {
      --ctl-h: 38px;
      --ctl-h-sm: 34px;
      --ctl-fs: 16px;
    }
  }
}