/* 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 — Appel Realty: amber accent on warm ivory, deep
     midnight-navy for dark sections/text. Sourced from the approved
     design (see ../../.idea/appel-design.html, gitignored reference). */
  --brand-color-primary: #f37021;
  --brand-color-secondary: #0c142c;
  --brand-color-accent: #f79157;
  --brand-color-contrast: #ffffff;
  --brand-color-dark: #0c142c;
  --brand-color-light: #faf9f5;

  /* Semantic tokens — components read these, not --brand-color-* directly */
  --theme-color-background: var(--brand-color-light);
  --theme-color-surface: #f1eee8;
  --theme-color-border: color-mix(in srgb, var(--brand-color-dark) 12%, transparent);
  --theme-color-border-soft: color-mix(in srgb, var(--brand-color-dark) 8%, transparent);
  --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);

  /* Inverse (dark-panel) tokens — for sections that flip to the
     midnight brand color instead of the light background, e.g. the
     front-page closing/contact section. */
  --theme-color-inverse-background: var(--brand-color-secondary);
  --theme-color-inverse-surface: #111a38;
  --theme-color-inverse-text: var(--brand-color-contrast);
  --theme-color-inverse-text-muted: color-mix(in srgb, var(--brand-color-contrast) 66%, var(--brand-color-secondary));
  --theme-color-inverse-text-dim: color-mix(in srgb, var(--brand-color-contrast) 50%, var(--brand-color-secondary));
  --theme-color-inverse-border: color-mix(in srgb, var(--brand-color-contrast) 16%, var(--brand-color-secondary));

  /* Type */
  --theme-font-body: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --theme-font-heading: "Zilla Slab", Georgia, serif;

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

  /* Motion */
  --theme-ease-signature: cubic-bezier(0.22, 1, 0.36, 1);
  --theme-ease-reveal: cubic-bezier(0.2, 0.75, 0.2, 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);
  --theme-space-xxl: clamp(70px, 10vw, 150px);

  /* Layout */
  --theme-layout-maxw: 1320px;
  --theme-layout-gutter: clamp(22px, 5vw, 64px);
}

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