/* ============================================================
   MINI MUNDI — BRAND TOKENS
   Shared across all pages. Link this before page-specific styles.
   Source colors: RAL 3001, 2000, 1003, 6029, 5021, 5010, 6034
   Brand identity: red (primary), orange+yellow (playful), green (park),
                   blue/turquoise (mascot accent, used sparingly)
   ============================================================ */

@font-face {
  font-family: 'Dreaming Outloud Pro';
  src: url('fonts/DreamingOutloudPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand base colors (RAL source) ──────────────────────── */
  --color-brand-red:       #A02128;   /* RAL 3001 — primary red    */
  --color-brand-orange:    #DD7907;   /* RAL 2000 — warm orange    */
  --color-brand-yellow:    #F9A800;   /* RAL 1003 — signal yellow  */
  --color-brand-green:     #007243;   /* RAL 6029 — park green     */
  --color-brand-water:     #07737A;   /* RAL 5021 — water blue     */
  --color-brand-blue:      #13447C;   /* RAL 5010 — gentian blue   */
  --color-brand-turquoise: #7FB0B2;   /* RAL 6034 — pastel turquoise */

  /* ── Semantic CTA tokens ─────────────────────────────────── */
  --color-cta-primary:        #A02128;  /* purchase / main action   */
  --color-cta-primary-dark:   #7A1820;
  --color-cta-secondary:      #007243;  /* secondary / nav action — green */
  --color-cta-secondary-dark: #005C35;
  --color-cta-warm:           #DD7907;  /* promotional warm action  */
  --color-cta-warm-dark:      #B86506;

  /* ── Semantic heading colors ─────────────────────────────── */
  --color-heading-red:    #A02128;
  --color-heading-orange: #DD7907;
  --color-heading-green:  #007243;
  --color-heading-blue:   #13447C;
  --color-heading-water:  #07737A;

  /* ── Section background tints ────────────────────────────── */
  /* Warm/yellow: default festive/arrangement section bg        */
  --color-section-warm:        #FEF3D8;  /* light warm yellow       */
  --color-section-yellow-soft: #FEF3D8;  /* same as warm — both used */
  --color-section-orange-soft: #FDEBD4;  /* peach-orange            */
  --color-section-red-soft:    #FAE5E6;  /* very light red tint     */
  --color-section-green-soft:  #E4F2EA;  /* park green soft         */
  /* Water/blue: use only as accent, not default bg             */
  --color-section-water-soft:  #DDF0F1;  /* sparingly only          */

  /* ── Legacy / compat tokens (mapped to brand palette) ────── */
  --color-primary:       #A02128;
  --color-primary-dark:  #7A1820;
  --color-primary-light: #C2535A;
  --color-blue:          #7FB0B2;
  --color-blue-light:    #FEF3D8;   /* was water-soft — now warm yellow */
  --color-blue-dark:     #07737A;
  --color-green:         #007243;
  --color-green-light:   #E4F2EA;   /* warm green-soft */
  --color-orange:        #DD7907;
  --color-orange-light:  #FDEBD4;
  --color-pink:          #A02128;
  --color-yellow:        #F9A800;

  /* ── Surfaces & backgrounds ──────────────────────────────── */
  /* Warm white as the default — not blue-tinted                */
  --color-surface:       #FFFFFF;
  --color-bg:            #FFFDF8;   /* warm white page background  */
  --color-surface-warm:  #FFF3D8;   /* warm cream surfaces         */
  --color-surface-cream: #F8EED8;   /* slightly deeper cream       */
  --color-cream:         #FFF3D8;   /* warm cream (was water-blue!) */
  --color-gray:          #EDE8E0;   /* warm gray (was blue-gray)   */
  --color-gray-dark:     #D4C9BC;   /* warm gray border            */
  --color-utility-bg:    #FEF9F0;   /* utility warm background     */
  --color-dark:          #201008;   /* warm dark (was teal-dark)   */

  /* ── Text ────────────────────────────────────────────────── */
  --color-text:       #1A1A1A;
  --color-text-light: #5A4E42;   /* warm brown-gray (was teal)    */
  --color-text-soft:  #5A4E42;

  /* ── Borders ─────────────────────────────────────────────── */
  --color-border: #D4C9BC;   /* warm gray border */

  /* ── Typography ──────────────────────────────────────────── */
  --font-heading: 'Cavolini', cursive;
  --font-body:    'Dreaming Outloud Pro', cursive;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:   0.75rem;
  --radius-md:   1.25rem;
  --radius-lg:   1.75rem;
  --radius-xl:   2.5rem;
  --radius-full: 50rem;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.14);
  --shadow-glow: 0 0 30px rgba(160,33,40,0.18);  /* red glow */

  /* ── Transitions ─────────────────────────────────────────── */
  --transition:      0.3s ease;
  --transition-slow: 0.5s ease;
}