/* ============================================================
   Non-color design tokens (spacing, radius, type, weight, shadow).

   Companion to the Honey COLOR tokens in application.css. Introduced
   as part of the move to vanilla, Campfire-style CSS: component and
   utility rules consume these instead of hardcoded rem/px literals or
   Tailwind utility classes.

   Values mirror the scale the views were already using (Tailwind's
   0.25rem spacing step, its type ramp) so existing layouts are
   preserved exactly while the markup migrates to semantic classes.

   Responsive convention: a SINGLE breakpoint is used across the app,
   `@media (max-width: 48rem)` (~768px), rather than per-device
   sm/md/lg tiers. Media queries can't read custom properties, so the
   value is written literally at each use site; this comment is the
   single source of truth for it.
   ============================================================ */

:root {
    /* ---------- Font families ----------
       Mirror Tailwind's theme tokens so var(--font-*) keeps resolving once
       the Tailwind build is removed. --font-sans matches the tailwind entry. */
    --font-sans: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* ---------- Spacing scale (0.25rem step) ---------- */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-3-5: 0.875rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ---------- Border radius ---------- */
    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* ---------- Type scale (size + matching line-height) ---------- */
    --txt-xs: 0.75rem;      --leading-xs: 1rem;
    --txt-sm: 0.875rem;     --leading-sm: 1.25rem;
    --txt-base: 1rem;       --leading-base: 1.5rem;
    --txt-lg: 1.125rem;     --leading-lg: 1.75rem;
    --txt-xl: 1.25rem;      --leading-xl: 1.75rem;
    --txt-2xl: 1.5rem;      --leading-2xl: 2rem;
    --txt-3xl: 1.875rem;    --leading-3xl: 2.25rem;
    --txt-4xl: 2.25rem;     --leading-4xl: 2.5rem;
    --txt-5xl: 3rem;        --leading-5xl: 1;
    --txt-6xl: 3.75rem;     --leading-6xl: 1;

    /* ---------- Font weight ---------- */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;

    /* ---------- Letter spacing ---------- */
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;

    /* ---------- Elevation ---------- */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.12);
    --shadow: 0 1px 3px rgb(0 0 0 / 0.15);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.12);
    --shadow-xl: 0 20px 25px rgb(0 0 0 / 0.15), 0 8px 10px rgb(0 0 0 / 0.1);
}