/* ─── Font loading ───────────────────────────────────────────────── */
@import url('https://fonts.cdnfonts.com/css/adamcg-pro');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600&family=Josefin+Sans:wght@400;600&family=Raleway:wght@400;600;700&display=swap');

/* ─── Font palette ───────────────────────────────────────────────── */
:root {
  --font-adam-cg-pro:  'ADAM.CG PRO', 'Futura', 'Century Gothic', sans-serif;
  --font-josefin-sans: 'Josefin Sans', 'Futura', 'Century Gothic', sans-serif;
  --font-raleway:      'Raleway', 'Futura', 'Century Gothic', sans-serif;
  --font-palatino:     Palatino Linotype, Palatino, 'Book Antiqua', serif;
  --font-comfortaa:    'Comfortaa', 'Century Gothic', sans-serif;
}

/* ─── Semantic font mappings ─────────────────────────────────────── */
:root {
  --theme-font-display:       var(--font-raleway);
  --theme-font-body:          var(--font-comfortaa);
  --theme-font-ui:            var(--font-comfortaa);
  --theme-font-btn:           var(--font-josefin-sans);
  --theme-font-badge:         var(--font-adam-cg-pro);
  --theme-btn-text-transform: none;
}

/* ─── Primitive palette ───────────────────────────────────────────── */
:root {
  /* dark background scale */
  --color-navy-deep:        #0F1A2E;
  --color-navy-border:      #2E4470;

  /* light background scale (used by light variant) */
  --color-parchment-btn:    #CABCAC;
  --color-parchment-hover:  #C0B0A0;
  --color-parchment:        #e4ded0;
  --color-parchment-section:#E9E3DA;
  --color-parchment-item:   #EEE9E2;

  /* text — dark mode */
  --color-cream:            #E0D0BC;
  --color-cream-muted:      #8B7565;
  --color-cream-ghost:      #3A4E62;

  /* text — light mode */
  --color-ink:              #16100A;
  --color-ink-mid:          #2E1E12;
  --color-ink-muted:        #6B4E3A;
  --color-ink-ghost:        #C0B8B2;

  /* border */
  --color-navy:             #1C2B4A;
  --color-navy-light:       #2A3F6A;
  --color-navy-glow:        #1C2B4A1A;

  /* accents */
  --color-cobalt:           #1A4FAA;
  --color-cobalt-glow:      #1A4FAA2A;

  --color-crimson:          #8B1A1A;
  --color-crimson-dark:     #6B1414;
  --color-crimson-glow:     #8B1A1A2A;

  --color-forest:           #1A5C28;
  --color-forest-glow:      #1A5C282A;

  --color-amber:            #B8860B;
  --color-amber-dark:       #8A6408;
  --color-amber-glow:       #B8860B2A;

  --color-offwhite:         #F5F0E8;
}

/* ─── Semantic mappings: Dark ────────────────────────────────────── */
:root {
  --theme-bg:            var(--color-navy-deep);
  --theme-fg:            var(--color-cream);
  --theme-border:        var(--color-amber);
  --theme-accent:        var(--color-cobalt);
  --theme-muted:         var(--color-cream-muted);
  --theme-focus-ring:    var(--color-cobalt-glow);

  --theme-section-bg:    var(--color-navy);
  --theme-section-fg:    var(--color-cream);
  --theme-section-border:var(--color-amber);
  --theme-section-heading-fg: var(--color-amber);

  --theme-item-bg:       var(--color-navy);
  --theme-item-fg:       var(--color-cream);
  --theme-item-border:   var(--color-amber);
  --theme-item-hover-bg: var(--color-navy-light);
  --theme-item-meta-fg:  var(--color-cream-muted);

  --theme-btn-bg:        var(--color-parchment-btn);
  --theme-btn-fg:        var(--color-ink);
  --theme-btn-border:    var(--color-parchment-btn);
  --theme-btn-hover-bg:  var(--color-parchment-hover);

  --theme-btn-primary-bg:     var(--color-parchment-btn);
  --theme-btn-primary-fg:     var(--color-ink);
  --theme-btn-primary-border: var(--color-parchment-btn);
  --theme-btn-primary-hover:  var(--color-parchment-hover);

  --theme-btn-danger-bg:     var(--color-crimson);
  --theme-btn-danger-fg:     var(--color-offwhite);
  --theme-btn-danger-hover:  var(--color-crimson-dark);

  --theme-input-bg:      var(--color-navy);
  --theme-input-fg:      var(--color-cream);
  --theme-input-border:  var(--color-amber);
  --theme-input-focus-border: var(--color-parchment);
  --theme-input-placeholder: var(--color-cream-ghost);

  --theme-popup-bg:      var(--color-navy);
  --theme-popup-fg:      var(--color-cream);
  --theme-popup-border:  var(--color-amber);
  --theme-popup-overlay: #0F1A2E99;

  --theme-badge-jedi-bg:      var(--color-navy-glow);
  --theme-badge-jedi-fg:      var(--color-cobalt);
  --theme-badge-jedi-border:  var(--color-cobalt);

  --theme-badge-sith-bg:      var(--color-crimson-glow);
  --theme-badge-sith-fg:      var(--color-crimson);
  --theme-badge-sith-border:  var(--color-crimson);

  --theme-badge-alive-bg:     var(--color-forest-glow);
  --theme-badge-alive-fg:     var(--color-forest);
  --theme-badge-alive-border: var(--color-forest);

  --theme-badge-fallen-bg:     var(--color-amber-glow);
  --theme-badge-fallen-fg:     var(--color-amber);
  --theme-badge-fallen-border: var(--color-amber);
}