/* Design tokens.

   Two layers, two namespaces:
   1. --brand-*: a FIXED namespace, same names on every project,
      only the values change. Colors are --brand-color-* with a small,
      ROLE-named palette: primary,
      secondary, accent, contrast, dark, light. Role names, not
      appearance names: "dark" can become a tinted navy instead of
      pure black without the name becoming a lie (the trap with names
      like "steel" or "ink", which describe a look, not a role).
      A project doesn't need its own prefix to use these: reference
      var(--brand-color-primary) directly, or with a hardcoded
      fallback (var(--brand-color-primary, #1b1bff)) if a component
      needs to work even where brand tokens aren't defined.
   2. --theme-color-*: the semantic layer. Maps UI concerns (background,
      text, border, ...) onto the brand roles above. Components should
      read this layer, not brand tokens directly, so a dark theme (or
      any re-theme) only means repointing semantic tokens, no
      component CSS changes. */

:root {
  /* Brand palette: fixed names, replace the values with your
     project's actual palette. Only genuinely-branded colors go here;
     plain grays don't need a role name beyond dark/light.

     Default: "Fris", teal and light blue (pitch deck p. 7 and 9). The
     untold config panel (assets/js/untold-config.js) overrides these
     six on :root with the theme saved in untold/themes.json. */
  --brand-color-primary: #1f4a45;
  --brand-color-secondary: #2c6964;
  --brand-color-accent: #c4e7e9;
  --brand-color-contrast: #1f4a45;
  --brand-color-dark: #1d2422;
  --brand-color-light: #fff;

  /* Semantic tokens: components read these, not --brand-color-* directly */
  --theme-color-background: var(--brand-color-light);
  --theme-color-surface: #fff;
  --theme-color-border: color-mix(in srgb, var(--brand-color-dark) 20%, var(--brand-color-light));
  --theme-color-text: var(--brand-color-dark);
  --theme-color-text-muted: color-mix(
    in srgb,
    var(--brand-color-dark) 60%,
    var(--brand-color-light)
  );
  --theme-color-primary: var(--brand-color-primary);
  --theme-color-secondary: var(--brand-color-secondary);
  --theme-color-accent: var(--brand-color-accent);
  --theme-color-contrast: var(--brand-color-contrast);
  --theme-color-highlight: var(--brand-color-accent);
  --theme-color-rule: var(--brand-color-secondary);
  --theme-color-heading: var(--brand-color-primary);
  --theme-color-inverse-background: var(--brand-color-primary);
  --theme-color-inverse-text: #fff;
  --theme-color-inverse-muted: color-mix(in srgb, #fff 70%, var(--brand-color-primary));

  /* Type. Hanken Grotesk (Google Fonts) stands in for Makira, the brand's
     licensed sans, until the font files are supplied. */
  --theme-font-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --theme-font-heading: var(--theme-font-body);
  --theme-font-weight-medium: 500;
  --theme-font-weight-semibold: 600;
  --theme-font-weight-regular: 400;
  --theme-font-weight-bold: 700;
  --theme-text-sm: 0.875rem;
  --theme-text-md: 1.0625rem;
  --theme-text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --theme-text-xl: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  --theme-text-2xl: clamp(2.75rem, 1.6rem + 5vw, 6rem);

  /* Layout */
  --theme-gutter: clamp(16px, 4vw, 64px);
  --theme-content-max: 104rem;
  --theme-section-space: clamp(88px, 12vw, 200px);

  /* Site header height, so the hero can fill the rest of the viewport. */
  --theme-header-height: clamp(64px, 6vw, 84px);

  /* Distance from the content edge to the viewport edge, and the part of
     it a visual may use to step out of the content column. Pages using
     these clip horizontal overflow (100vw counts the scrollbar). */
  --theme-bleed: max(var(--theme-gutter), (100vw - var(--theme-content-max)) / 2);
  --theme-escape: min(var(--theme-bleed) - 12px, clamp(24px, 6vw, 128px));

  /* Radius. Blocks have square corners, as in the brand; only buttons and tags
     are rounded. */
  --theme-radius-sm: 0.25rem;
  --theme-radius-pill: 62.5rem;

  /* Motion */
  --theme-ease-signature: cubic-bezier(0.22, 1, 0.36, 1);

  /* Spacing scale */
  --theme-space-xs: clamp(24px, 2.2vw, 36px);
  --theme-space-sm: clamp(28px, 3vw, 48px);
  --theme-space-md: clamp(32px, 4vw, 56px);
  --theme-space-lg: clamp(32px, 5vw, 72px);
  --theme-space-xl: clamp(48px, 6vw, 80px);
}

/* Example dark-theme override: uncomment and adjust once real dark-mode
   support is needed. Only the semantic layer needs repointing. */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --theme-color-background: var(--brand-color-dark);
    --theme-color-surface: color-mix(in srgb, var(--brand-color-dark) 85%, white);
    --theme-color-border: color-mix(in srgb, var(--brand-color-light) 20%, var(--brand-color-dark));
    --theme-color-text: var(--brand-color-light);
    --theme-color-text-muted: color-mix(in srgb, var(--brand-color-light) 60%, var(--brand-color-dark));
    --theme-color-contrast: var(--brand-color-light);
  }
}
*/