/*
 * eldstad-tokens / themes/hi-fi-se.css
 * Tier 2 theme: HI-FI / **ELDSTAD.SE** (the consumer storefront).
 * Load AFTER core.css. Added 0.3.0 (ELD-78).
 *
 * Resolves the SAME semantic roles as low-fi and hi-fi-pro (no role added or
 * renamed), so a component swaps themes with only a stylesheet change.
 *
 * Intent: eldstad.se as it actually looks today. A serif heading over a
 * humanist sans, copper buttons on a warm off-white ground, near-square
 * corners. This is a shop, not a tool: it is allowed to be warm and quiet,
 * where hi-fi-pro is warm and blunt.
 *
 * MEASURED, NOT AUTHORED. That is the whole point of this file. Every colour
 * below resolves to an --eldstad-se-* seed in core.css, and each of those seeds
 * carries its own source in a comment: a settings_data.json key, a line of the
 * theme's CSS, or an explicit DERIVED / INVENTED marker. Two values, and only
 * two, are not measured:
 *
 *   --color-accent-strong  the store ships no hover colour, so the copper is
 *                          darkened 18% (DERIVED from a measured value)
 *   --color-success        the storefront has no success colour anywhere, in
 *                          settings or in CSS, so this one is INVENTED
 *
 * Do not tune anything else by eye. If eldstad.se changes, re-read
 * settings_data.json and bump; do not nudge a value here to taste.
 *
 * Source: eldstad-theme/config/settings_data.json @ commit d04bc34, read
 * 2026-08-27. See DESIGN.md for the provenance table and contrast numbers.
 */

:root {
  /* Surfaces. The store never uses pure white: the page is a warm off-white
     and panels sit slightly DEEPER than the page, not lighter. That inversion
     is deliberate and measured, so do not "fix" raised to #fff. */
  --color-surface: var(--eldstad-se-ground);
  --color-surface-raised: var(--eldstad-se-panel);
  --color-on-surface: var(--eldstad-se-ink);
  --color-muted: var(--eldstad-se-ink-secondary);
  --color-line: var(--eldstad-se-line);

  /* Accent: the copper button fill. This is the storefront's signature and,
     unlike the Pro ember, it is dark enough for text as well as fill
     (4.95:1 on the ground). accent-strong is the hover/pressed step. */
  --color-accent: var(--eldstad-se-copper);
  --color-accent-strong: var(--eldstad-se-copper-deep);
  --color-accent-soft: var(--eldstad-se-ground-alt);

  /* Status. Danger is the theme's own hard-coded --color-error, so it is the
     red the storefront already shows on a failed form. Success has no source
     and is invented; it is tuned to land within ~0.3 of danger's contrast so
     the pair reads as one family rather than one shouting over the other. */
  --color-danger: var(--eldstad-se-error);
  --color-success: var(--eldstad-se-go);

  /* The mark (0.4.0, ELD-89): the flame red off the logo, the one colour on
     eldstad.se that is the brand's own. A shade from --color-danger (#b93131),
     and they stay two roles: one says "here", the other "wrong". */
  --color-mark: var(--eldstad-se-flame);

  /* Type: the two-face split that forced --eldstad-font-heading to exist.
     Playfair Display for headings, Open Sans for UI. The bundle NAMES these
     faces and does not ship them (see DESIGN.md, "The type decision"), so the
     fallback stacks matter: without the webfont a heading must still land on a
     serif and body on a humanist sans, or the page changes character. */
  --eldstad-font-heading: "Playfair Display", "Iowan Old Style",
    "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --eldstad-font-ui: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Mono is carried over from core UNCHANGED and is NOT measured: eldstad.se
     sets no monospace face, because a storefront has no measured data to set.
     A prototype that shows a chimney diameter still wants one. */

  /* Radius: near-square. DERIVED from the theme's own block radius (0.2rem in
     assets/base.css, about 2px at the store's root size), not from a setting:
     settings_data.json carries no global radius. The storefront is closer to
     low-fi's boxes than to hi-fi-pro's softened corners. */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px; /* kept for genuine pills (badges, toggles) */

  /* Spacing is core's, untouched: the store's scale is Shopify section
     padding, which does not translate to a component spacing ramp. */
}