@tailwind base;
@tailwind components;
@tailwind utilities;

/**
 * Design tokens — the Phosphor palette.
 *
 * High-chroma green on a near-white that is faintly cool, with corners almost square. The palette a terminal would pick if it had to render a CV — and the sharp radius is what separates it from Signal, which uses a neighbouring hue at the opposite extreme.
 *
 * This file is the reason a pasted block looks right. Every block and page
 * styles itself with semantic classes — `bg-card`, `text-muted-foreground`,
 * `border-border` — rather than literal colours, so they inherit whatever
 * you define here instead of fighting it. Change a value below and every
 * section in the project moves with it. Change the hue on `--primary` and
 * `--ring` together and you have rebranded the site.
 *
 * Values are bare HSL channels, not `hsl(...)` calls. That is what lets
 * Tailwind compose them with an alpha suffix: `bg-primary/10` expands to
 * `hsl(var(--primary) / 0.1)`, which is impossible if the variable already
 * carries its own function wrapper.
 *
 * Every foreground/background pair below clears WCAG AA (4.5:1) in both
 * themes. If you retune one, check the pair rather than trusting the eye —
 * mid-lightness accents are the ones that fail.
 */

@layer base {
  :root {
    --background: 150 42% 99%;
    --foreground: 150 45% 9%;
    --card: 0 0% 100%;
    --card-foreground: 150 45% 9%;
    --popover: 0 0% 100%;
    --popover-foreground: 150 45% 9%;
    --primary: 150 85% 27%;
    --primary-foreground: 0 0% 100%;
    --secondary: 150 42% 96%;
    --secondary-foreground: 150 40% 20%;
    --muted: 150 28% 96%;
    --muted-foreground: 150 12% 41%;
    --accent: 168 60% 95%;
    --accent-foreground: 168 50% 22%;
    --destructive: 0 72% 45%;
    --destructive-foreground: 0 0% 100%;
    --border: 150 28% 90%;
    --input: 150 28% 90%;
    --ring: 150 85% 34%;

    --radius: 0.125rem;
  }

  .dark {
    --background: 150 40% 5%;
    --foreground: 150 15% 97%;
    --card: 150 32% 8%;
    --card-foreground: 150 15% 97%;
    --popover: 150 32% 8%;
    --popover-foreground: 150 15% 97%;
    --primary: 150 90% 72%;
    --primary-foreground: 150 45% 8%;
    --secondary: 150 25% 15%;
    --secondary-foreground: 150 15% 97%;
    --muted: 150 25% 15%;
    --muted-foreground: 150 12% 68%;
    --accent: 168 30% 18%;
    --accent-foreground: 168 40% 92%;
    --destructive: 0 62% 52%;
    --destructive-foreground: 0 0% 100%;
    --border: 150 22% 19%;
    --input: 150 22% 19%;
    --ring: 150 90% 72%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
  }

  /**
   * Global motion opt-out.
   *
   * Blocks guard their own animations with Tailwind's `motion-safe:`, but
   * third-party CSS and anything you add later will not. This is the
   * backstop: it neutralises every animation and transition on the page
   * for users who have asked the OS for reduced motion, rather than
   * relying on each author to remember.
   */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}