/*
 * Hono — minimal design tokens
 * Default: dark mode. Light mode auto-applied if user has no preference.
 * Palette: neutral monochrome (oklch grays)
 * Typography: system font stack, regular/medium only
 * Borders: 1px hairline, soft radii
 * Motion: opacity transitions only — no transforms, no keyframes
 */

@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap");

:root {
  color-scheme: dark;

  /* Surface */
  --color-bg:        oklch(15% 0 0);
  --color-bg-2:      oklch(18% 0 0);
  --color-bg-3:      oklch(22% 0 0);

  /* Ink */
  --color-ink:       oklch(96% 0 0);
  --color-ink-2:     oklch(78% 0 0);
  --color-ink-3:     oklch(62% 0 0);
  --color-ink-4:     oklch(45% 0 0);

  /* Hairline */
  --color-border:    oklch(26% 0 0);
  --color-border-2:  oklch(32% 0 0);

  /* Accent — single subtle neutral-ink tone for primary actions */
  --color-accent:        var(--color-ink);
  --color-accent-fg:     var(--color-bg);

  /* Status (kept minimal, low chroma) */
  --color-error:     oklch(70% 0.13 25);
  --color-error-bg:  oklch(22% 0.03 25);
  --color-error-bd:  oklch(32% 0.06 25);

  /* Focus ring */
  --color-focus:     oklch(70% 0.14 250);

  /* Fonts — system stack only */
  --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", monospace;

  /* Type scale — modest, two weights (regular/medium) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-display: clamp(2rem, 4vw + 1rem, 3rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Page gutter */
  --page-gutter: clamp(1rem, 3vw, 1.5rem);

  /* Radius — small, never pill */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Motion — opacity only, no transforms */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur:       120ms;

  /* Layout */
  --max-w:     720px;
  --max-w-wide: 960px;

  /* Z-index */
  --z-sticky: 10;
}

/* Light mode auto-applied for users who explicitly prefer it */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --color-bg:        oklch(99% 0 0);
    --color-bg-2:      oklch(97% 0 0);
    --color-bg-3:      oklch(94% 0 0);

    --color-ink:       oklch(20% 0 0);
    --color-ink-2:     oklch(40% 0 0);
    --color-ink-3:     oklch(55% 0 0);
    --color-ink-4:     oklch(70% 0 0);

    --color-border:    oklch(92% 0 0);
    --color-border-2:  oklch(88% 0 0);

    --color-error:     oklch(55% 0.12 25);
    --color-error-bg:  oklch(97% 0.02 25);
    --color-error-bd:  oklch(88% 0.04 25);

    --color-focus:     oklch(55% 0.18 250);
  }
}