/* GroovyPlanning — design tokens & base styles
   Modeled on 37signals/Fizzy: crisp, confident, functional */

:root {
  /* Spacing — same system as Fizzy */
  --block-space: 1rem;
  --block-space-half: 0.5rem;
  --block-space-double: 2rem;
  --inline-space: 1ch;
  --inline-space-half: 0.5ch;
  --inline-space-double: 2ch;

  /* Typography */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 1rem;
  --text-md: 1.1rem;
  --text-lg: 1.5rem;
  --text-xl: 1.8rem;
  --text-2xl: 2.5rem;

  @media (max-width: 639px) {
    --text-xs: 0.8rem;
    --text-sm: 0.9rem;
    --text-base: 1.05rem;
    --text-md: 1.15rem;
  }

  /* Colors — clean neutrals, one warm accent
     Ink scale follows Fizzy: darkest → lightest (cool neutral) */
  --color-canvas: oklch(100% 0 0);
  --color-ink: oklch(26% 0.02 260);
  --color-ink-dark: oklch(40% 0.015 260);
  --color-ink-medium: oklch(56% 0.01 260);
  --color-ink-light: oklch(84% 0.005 256);
  --color-ink-lighter: oklch(92% 0.003 254);
  --color-ink-lightest: oklch(96% 0.002 252);

  /* GP accent — clean amber/gold, not muddy */
  --color-accent: oklch(72% 0.16 75);
  --color-accent-light: oklch(92% 0.04 80);

  /* Borders — crisp, like Fizzy */
  --border: 1px solid var(--color-ink-lighter);

  /* Shadows — multi-layer, from Fizzy */
  --shadow: 0 0 0 1px oklch(0% 0 0 / 5%),
            0 0.2em 0.2em oklch(0% 0 0 / 5%),
            0 0.4em 0.4em oklch(0% 0 0 / 5%),
            0 0.8em 0.8em oklch(0% 0 0 / 5%);

  /* Radius — small, confident */
  --radius: 0.3em;

  /* Layout */
  --content-width: 640px;
  --content-padding: clamp(var(--inline-space), 5vw, var(--inline-space-double));
}

/* Reset */

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

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  text-decoration: none;
  color: var(--color-accent);

  &:hover {
    text-decoration: underline;
  }
}

button,
input {
  font-family: inherit;
  font-size: inherit;
}

img {
  display: block;
  max-inline-size: 100%;
}