/**
 * Fluid Theme - the 1.x look, as knob values (dist/fluid-legacy-1x.css)
 *
 * Link it after fluid.min.css and before the site's own stylesheet:
 *   <link rel="stylesheet" href="/fluid.min.css">
 *   <link rel="stylesheet" href="/fluid-legacy-1x.css">
 *   <link rel="stylesheet" href="/site.css">
 * Or link dist/fluid-1x.min.css alone: core and this file in one, for a
 * consumer that serves exactly one theme stylesheet.
 *
 * It brings back the 1.x type sizes and weights, shape, spacing, motion and
 * system fonts. It does not bring back the 1.x role lightness (a small shift) or the 1.x
 * component styles (open cards, square badges, the nav): those are what
 * v2 is. Values only, on :root, in the themes layer: knobs, not variations.
 * Every value here is a documented knob or role (_docs/STATUS.md), never a
 * scale step, so a consumer that inlines its knobs (the stack's brand.ts)
 * can copy them as they are.
 */

@layer themes {
  :root {
    --accent: oklch(52% 0.16 245);
    --neutral-tint: oklch(50% 0.008 230);
    --font-heading: var(--font-system);
    --font-body: var(--font-system);
    /* 1.x headings: h1 700, h2 and h3 600 (--weight-heading). */
    --weight-display: 700;
    --weight-heading: 600;
    --type-ratio: 1.25;
    --display-max: 3.5rem;
    --measure: 65ch;
    --hero-headline-size: clamp(2rem, 1rem + 5vw, 3.5rem);
    /* The 1.x type: body 16 → 18 (--text-min, --text-max) and the 1.x
       heading clamps through the heading-size knobs, so the steps (the nav
       brand, lede, card title, blockquote) keep their own values. */
    --text-min: 1;
    --text-max: 1.125;
    --h1-size: clamp(1.75rem, 1rem + 4vw, 3.75rem);
    --h2-size: clamp(1.75rem, 1.43rem + 1.61vw, 2.375rem);
    --h3-size: clamp(1.5rem, 1.29rem + 1.04vw, 1.875rem);
    --radius-card: 16px;
    --radius-control: 10px;
    /* In v2 --shadow-style reaches only the elevated card (--shadow-md);
       the 1.x resting and hover shadows on buttons and cards are gone. */
    --shadow-style: 1;
    --space-section: 5rem;
    /* The 1.x gutter, both sides together (12px a side). The per-side edge
       never drops below 3vi, so on a desktop the 1.x 12px is not restored. */
    --space-gutter: 1.5rem;
    --motion-base: 467ms;
  }

  /* 1.x buttons are the accent in both schemes, with its own text; on the
     nav too, which declares its own (flipped) fills. */
  :root,
  .nav:not([data-bg="plain"], [data-variant="transparent"]), .nav[data-bg="inverse"] {
    --accent-fill: var(--accent);
    --on-accent-fill: var(--on-accent);
    --accent-fill-hover: var(--accent-hover);
  }
}