/**
 * Design tokens — Bold Modernist.
 *
 * Direction C, chosen from three. The aesthetic is high contrast and
 * structural: hard edges, 2px black rules, solid black bands, oversized
 * Fraunces display type, and orange used as a signal rather than decoration.
 *
 * Two things changed from the previous system and they carry the whole look:
 *
 *   1. RADIUS IS ZERO. Rounded corners soften; this design does not soften.
 *      The only exceptions are the pill on a photo chip and circular avatars.
 *   2. BORDERS DO THE WORK, NOT SHADOWS. A 2px black edge separates surfaces.
 *      Shadows survive only for genuinely floating things.
 *
 * Everything is prefixed --fmr- because styles.css is compiled Tailwind and
 * owns unprefixed names like --text-lg and --radius-md.
 */

:root {
    /* ---- Ink ------------------------------------------------------------ */
    --fmr-ink-900: #18181b;
    --fmr-ink-700: #3f3f46;
    --fmr-ink-500: #52525b;
    --fmr-ink-400: #a1a1aa;

    /* ---- Brand ----------------------------------------------------------- */
    --fmr-brand-500: #f97316;
    --fmr-brand-600: #ea580c;
    /* on dark grounds the mid orange goes muddy; this is its stand-in */
    --fmr-brand-300: #fb923c;
    --fmr-brand-50: #fff7ed;

    /* ---- Surfaces --------------------------------------------------------- */
    --fmr-surface: #ffffff;
    --fmr-surface-muted: #fafaf9;
    --fmr-surface-dark: #18181b;
    --fmr-on-dark: #fafaf9;

    /* ---- Borders ----------------------------------------------------------
       Two weights only: a hairline for quiet separation inside a block, and
       the structural 2px black that defines cards and buttons. */
    --fmr-border: #e4e4e7;
    --fmr-border-strong: #18181b;
    --fmr-border-dark: #3f3f46;

    /* ---- Radius -----------------------------------------------------------
       Zero. Not "small". If something needs a curve it asks for it by name. */
    --fmr-radius-sm: 0;
    --fmr-radius-md: 0;
    --fmr-radius-lg: 0;
    --fmr-radius-full: 999px;

    /* ---- Elevation --------------------------------------------------------
       Borders separate surfaces here, so this is nearly unused. Kept for the
       few things that genuinely float above the page. */
    --fmr-shadow-sm: 0 1px 2px rgba(24, 24, 27, .05);
    --fmr-shadow-md: 0 8px 24px -10px rgba(24, 24, 27, .18);
    --fmr-shadow-lg: 0 24px 48px -20px rgba(24, 24, 27, .28);
    --fmr-shadow-accent: 0 10px 28px -12px rgba(249, 115, 22, .45);

    /* ---- Type scale -------------------------------------------------------
       Wider range than before: this design needs a genuine display size, and
       display type sets much tighter than body type. */
    --fmr-text-xs: 12px;
    --fmr-text-sm: 14px;
    --fmr-text-base: 16px;
    --fmr-text-md: 18px;
    --fmr-text-lg: 21px;
    --fmr-text-xl: 26px;
    --fmr-text-2xl: 34px;
    --fmr-text-3xl: 46px;
    --fmr-text-4xl: clamp(46px, 7.4vw, 106px);

    --fmr-track-display: -.05em;
    --fmr-track-head: -.035em;
    --fmr-track-title: -.02em;
    --fmr-track-label: .14em;

    /* ---- Spacing (4px base) ------------------------------------------------ */
    --fmr-space-1: 4px;
    --fmr-space-2: 8px;
    --fmr-space-3: 12px;
    --fmr-space-4: 16px;
    --fmr-space-6: 24px;
    --fmr-space-8: 32px;
    --fmr-space-12: 48px;
    --fmr-space-16: 64px;
}

/* Motion preference is honoured globally; individual sheets add their own
   reduced-motion blocks for anything they animate. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Keyboard focus. Square, like everything else. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--fmr-brand-500);
    outline-offset: 2px;
    border-radius: 0;
}

/* ---- Numbers --------------------------------------------------------------
   Recipe data reads in columns, so every figure is tabular. */
.stat-value,
.info-card-value,
.nutrition-value,
.rating-number,
.recipe-time,
.review-count,
time {
    font-family: "Geist", var(--font-sans, sans-serif);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.stat-label,
.info-card-label,
.nutrition-label {
    font-family: "Geist", var(--font-sans, sans-serif);
    letter-spacing: .02em;
}