/*
  VARIABLES.CSS
  =============
  This file holds values we reuse everywhere else: colors, fonts, spacing.

  WHY THIS FILE EXISTS:
  Instead of typing "#000000" or "Instrument Serif" in 20 different CSS files,
  we define it ONCE here as a named "variable", then reference the name everywhere
  else. If you ever rebrand and change your main color, you edit ONE line here
  instead of hunting through every file.

  This mirrors exactly what Shopify's color-schemes.liquid + 
  theme-styles-variables.liquid were doing -- just without the Liquid logic.
*/

:root {
  /* ---- FONTS ---- */
  /* Your Shopify settings show ALL text roles (body, heading, accent, subheading)
     use the same font: Instrument Serif. So we only need one font variable. */
  --font-primary: 'Instrument Serif', serif;
  --font-accent: 'Instrument Serif', serif;
  --font-body: 'Instrument Serif', serif;

  /* ---- FONT SIZES ---- */
  /* Pulled directly from settings_data.json */
  --font-size-h1: 72px;
  --font-size-h2: 48px;
  --font-size-h3: 32px;
  --font-size-h4: 24px;
  --font-size-h5: 18px;
  --font-size-paragraph: 14px;

  /* ---- COLOR SCHEME: scheme-5 (CORRECTED) ---- */
  /* IMPORTANT CORRECTION: settings_data.json never explicitly listed real
     values for scheme-5 -- only "scheme-1" and 3 custom schemes were customized.
     I incorrectly assumed unlisted schemes fell back to the theme's factory-
     default demo colors (black/white). But the real live site is purple,
     which means Shopify is actually reusing YOUR scheme-1 colors (the one
     scheme you explicitly customized) for other numbered schemes.
     These values below are pulled directly from your real scheme-1 settings. */
  --color-scheme5-background: #f0e6ef;
  --color-scheme5-foreground: #372345;
  --color-scheme5-foreground-heading: #372345; /* confirmed via browser inspector, 07/2026 */
}