/* ============================================================
   fMMA DESIGN TOKENS
   Single source of truth for all design decisions.
   Import this file first in every HTML page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,900;1,900&family=DM+Sans:wght@400;500;600&display=swap');

:root {

  /* ----------------------------------------------------------
     COLOR PALETTE — raw values, don't use directly in components
     ---------------------------------------------------------- */
  --palette-black:       #111111;
  --palette-white:       #ffffff;
  --palette-cream:       #f2ede3;
  --palette-cream-dark:  #e8e0d0;
  --palette-cream-border:#c8bfaa;
  --palette-red:         #c0392b;
  --palette-red-dark:    #962d22;
  --palette-red-muted:   rgba(192, 57, 43, 0.12);
  --palette-green:       #2d7a3a;
  --palette-navy:        #1a2332;

  /* ----------------------------------------------------------
     SEMANTIC TOKENS — what colors MEAN in the UI
     ---------------------------------------------------------- */

  /* Backgrounds */
  --bg-page:             var(--palette-cream);
  --bg-surface:          var(--palette-white);
  --bg-header:           var(--palette-black);
  --bg-event:            var(--palette-black);
  --bg-input:            var(--palette-white);

  /* Text */
  --text-primary:        var(--palette-black);
  --text-secondary:      #666666;
  --text-muted:          #999999;
  --text-on-dark:        var(--palette-white);
  --text-on-dark-muted:  rgba(255, 255, 255, 0.55);
  --text-on-dark-subtle: rgba(255, 255, 255, 0.3);

  /* Accent */
  --accent:              var(--palette-red);
  --accent-dark:         var(--palette-red-dark);
  --accent-muted:        var(--palette-red-muted);

  /* Status */
  --status-good:         var(--palette-green);
  --status-warn:         var(--palette-red);
  --status-pending:      #b07d1a;

  /* Borders */
  --border-color:        var(--palette-cream-border);
  --border-color-light:  #f0ebe0;
  --border-color-dark:   rgba(255, 255, 255, 0.1);

  /* Card left-border accent colors */
  --card-border-member:       var(--palette-black);
  --card-border-pending:      #b07d1a;

  /* Championship gold */
  --championship:        #f0c040;

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font-display:  'Barlow Condensed', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --font-mono:     'DM Sans', sans-serif;

  /* ----------------------------------------------------------
     SPACING SCALE
     ---------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --max-width:        1200px;
  --header-height:    52px;
  --banner-height:    36px;
  --sidebar-width:    300px;
  --radius-sm:        2px;
  --radius-md:        4px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --shadow-card:  0 1px 4px rgba(0, 0, 0, 0.08);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
}