/* Design tokens for the full-visual-replacement route (see README).

   Two layers, two namespaces:
   1. --brand-color-* — a FIXED namespace, same names on every project,
      only the values change. 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 theme 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 — from Grehamer & Company Brand Guidelines
     (.idea/design/brand-guidelines/13-brand-colours.jpg). Pantone/CMYK
     values live in that file; hex below is the screen-accurate source. */
  --brand-color-primary: #30364c; /* Blue — Pantone 7546 C, brand hero colour */
  --brand-color-secondary: #a07a57; /* Gold — Pantone 2314 C */
  --brand-color-accent: #f1860d; /* Orange — Pantone 158 C, accent/hover only */
  --brand-color-contrast: #000;
  --brand-color-dark: #30364c;
  --brand-color-light: #efeeed; /* Grey — Pantone 663 C */
  --brand-color-sand: #c1b8ae; /* Pantone 400 C */

  /* Semantic tokens — components read these, not --brand-color-* directly */
  --theme-color-background: var(--brand-color-light);
  --theme-color-surface: var(--brand-color-light);
  --theme-color-border: black;
  --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);

  /* Type — Brandon Grotesque per brand guidelines (self-hosted, see
     assets/fonts/brandon-grotesque/fonts.css); Arial is the brand's
     own documented substitute, kept here as the CSS fallback. */
  --theme-font-body: "Brandon Grotesque", arial, ui-sans-serif, system-ui, sans-serif;
  --theme-font-heading: var(--theme-font-body);

  /* Normal body-copy size (paragraphs of readable text, not labels/meta) —
     single.css's .single-post__content used to be the only place this was
     set; other copy containers (front-page sections, about/team-member
     bios) fell back to the browser default 1rem, reading noticeably
     smaller side-by-side with a single post. One token so they match. */
  --theme-font-size-copy: 1.2rem;

  /* Radius */
  --theme-radius-sm: 0.375rem;
  --theme-radius-md: 0.75rem;
  --theme-radius-lg: 1.5rem;
  --theme-radius-pill: 62.5rem;

  /* Motion */
  --theme-ease-signature: cubic-bezier(0.65, 0, 0.35, 1);

  /* Frosted-glass blur for elements over images/maps/scrolling content
     (backdrop-filter: blur(var(--theme-blur))) — one value instead of
     the same number repeated per component. */
  --theme-blur: 5px;

  /* 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);

  /* Brand page margin (cover, business card) — same 3rem ceiling the
     brand guide specifies, but fluid below ~800px viewport width
     instead of a flat 3rem everywhere; a fixed 48px reads as too much
     inset once the viewport itself is only a few hundred px wide. */
  --theme-section-padding: clamp(1.25rem, 6vw, 3rem);

  /* Lattice hairline — plain border, style/color fixed here so
     components only ever set border-*-width per edge (default 0,
     box-sizing: border-box is global via reset.css so a width never
     disturbs grid track sizing). */
  --theme-line-width: 1px;
  --theme-line-color: var(--theme-color-border);
}


 @media (width <= 768px) {
   :root {
     --theme-section-padding: clamp(.5rem, 3vw, 3rem);
   }
}

/* 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);
  }
}
*/