/*
 * Set Point — Design Tokens
 * Single source of truth for all colors, typography, spacing, and shadows.
 * Every app page imports this file. Never hardcode hex values — use these variables.
 *
 * Updated: April 2026
 */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

:root {

  /* ── Brand Colors ── */
  --primary:          #FF6B35;   /* Orange — CTAs, active states, accents */
  --primary-dark:     #E55A24;   /* Orange hover */
  --primary-light:    #FFF0EB;   /* Orange tint bg */
  --primary-mid:      rgba(255, 107, 53, 0.12); /* Orange ghost bg */

  --navy:             #1B2B48;   /* Sidebar, hero sections */
  --navy-dark:        #141f35;   /* Sidebar hover */
  --navy-mid:         #243454;   /* Sidebar active bg */
  --navy-light:       rgba(27, 43, 72, 0.07); /* Navy tint for tags */

  --blue:             #4A90E2;   /* Info, links, match indicators */
  --blue-light:       #EBF3FC;   /* Blue tint bg */

  /* ── Semantic / UI Colors ── */
  --success:          #22C55E;
  --success-bg:       #F0FDF4;
  --warning:          #F59E0B;
  --warning-bg:       #FFFBEB;
  --error:            #EF4444;
  --error-bg:         #FEF2F2;

  /* ── Surface & Background ── */
  --surface:          #F8F9FA;   /* Page background */
  --surface-alt:      #FAFBFF;   /* Alternating card tint */
  --surface-card:     #FFFFFF;   /* Card background */
  --border:           #E8EAED;   /* Default border */
  --border-mid:       #DDE2EE;   /* Slightly stronger border */

  /* ── Text ── */
  --text-primary:     #191C1D;
  --text-secondary:   #5A6480;
  --text-tertiary:    #9AA3BC;
  --text-inverted:    #FFFFFF;

  /* ── Typography ── */
  --font-head:        'Lexend', sans-serif;     /* Replaces Oswald everywhere */
  --font-body:        'Inter', sans-serif;

  /* ── Border Radius ── */
  --radius-xs:        4px;
  --radius-sm:        6px;
  --radius-md:        12px;
  --radius-lg:        16px;
  --radius-xl:        20px;
  --radius-pill:      999px;

  /* ── Shadows ── */
  --shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl:        0 16px 40px rgba(0, 0, 0, 0.12);

  /* ── Sidebar dimensions ── */
  --sidebar-width:    240px;

  /* ── Transitions ── */
  --transition-fast:  all 0.15s ease;
  --transition-base:  all 0.2s ease;
}