/*
 * ============================================================================
 * THEME: demo.localhost
 * ============================================================================
 *
 * Generated by the Site Builder. Redefine custom properties to rebrand,
 * or re-run the Site Builder with updated color/font choices.
 */

:root {
  /* ========== FONTS ========== */
  --font-url:       "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;1,400&display=swap";
  --font-sans:      "Inter", system-ui, -apple-system, sans-serif;
  --font-heading:   "Inter", system-ui, -apple-system, sans-serif;
  --font-display:   "Inter", system-ui, -apple-system, sans-serif;
  --font-body:      "Inter", system-ui, -apple-system, sans-serif;
  --font-editorial: "Lora", Georgia, "Times New Roman", serif;
  --font-script:    "Lora", Georgia, cursive;

  /* ========== BRAND PALETTE ========== */
  --color-brand-50:  oklch(97% 0.02 250);
  --color-brand-100: oklch(92% 0.05 250);
  --color-brand-300: oklch(78% 0.11 250);
  --color-brand-500: oklch(60% 0.16 250);
  --color-brand-600: oklch(53% 0.17 250);
  --color-brand-700: oklch(46% 0.17 250);
  --color-brand-900: oklch(20% 0.04 255);

  /* ========== SEMANTIC TOKENS ========== */
  --color-primary:       var(--color-brand-600);
  --color-primary-hover: var(--color-brand-700);
  --color-primary-dark:  var(--color-brand-900);
  --color-secondary:     var(--color-brand-700);
  --color-accent:        #ea580c;
  --color-surface:       oklch(100% 0 0);
  --color-surface-alt:   var(--color-brand-50);
  --color-heading:       var(--color-brand-900);
  --color-body:          oklch(25% 0.01 255);

  /* Footer / UI accent (footer CTA button, social icons, secondary-link hover). */
  --ui-accent:           #ea580c;

  /* ========== SECTION BACKGROUNDS ========== */
  /* Coloured block backgrounds. The frontend's <Section> defers these variants to CSS, so a
     generated site needs both the tokens and the section[data-bg] rules below to render them. */
  --color-section-dark:        var(--color-brand-900);
  --color-section-dark-fg:      #ffffff;
  --color-section-primary:      var(--color-primary);
  --color-section-primary-fg:   #ffffff;
  --color-section-secondary:    var(--color-secondary);
  --color-section-secondary-fg: #ffffff;
  --color-section-accent:       var(--color-accent);
  --color-section-accent-fg:    #ffffff;

  /* ========== RADII ========== */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

/* ========== SECTION BACKGROUND RULES ==========
   <Section> applies only the text colour inline for these "theme pattern" variants and expects
   the background to come from the per-site theme, so emit the rules here (brand-driven). */
section[data-bg="dark"]      { background: var(--color-section-dark);      color: var(--color-section-dark-fg); }
section[data-bg="primary"]   { background: var(--color-section-primary);   color: var(--color-section-primary-fg); }
section[data-bg="secondary"] { background: var(--color-section-secondary); color: var(--color-section-secondary-fg); }
section[data-bg="accent"]    { background: var(--color-section-accent);    color: var(--color-section-accent-fg); }