/* ============================================================
   DESIGN TOKENS & THEMING SYSTEM
   ============================================================ */
:root {
  /* Brand Colors */
  --brand-dark:      #122056;
  --brand-royal:     #F2572B;
  --brand-ice:       #FFECE8;
  --brand-accent:    #3D9BE9;   /* Augmented: sky-blue accent for CTAs */
  --brand-teal:      #0DBFAD;   /* Augmented: teal for success/health data */

  /* Light Theme */
  --bg-primary:      #FFFFFF;
  --bg-secondary:    #F7F8FD;
  --bg-tertiary:     #EFF0FB;
  --bg-card:         #FFFFFF;
  --bg-card-hover:   #F3F4FD;
  --bg-nav:          rgba(255,255,255,0.92);
  --bg-hero:         #122056;

  --text-primary:    #0D1530;
  --text-secondary:  #4A5578;
  --text-muted:      #8892AD;
  --text-inverse:    #FFFFFF;
  --text-accent:     #5B65DD;

  --border-color:    #DDE0F0;
  --border-focus:    #5B65DD;

  --btn-primary-bg:  #F2572B;
  --btn-primary-fg:  #FFFFFF;
  --btn-primary-hover: #1a2f78;
  --btn-secondary-bg: transparent;
  --btn-secondary-fg: #122056;
  --btn-secondary-border: #122056;
  --btn-accent-bg:   #F2572B;
  --btn-accent-fg:   #FFFFFF;
  --btn-accent-hover: #4854c9;

  --shadow-sm:  0 1px 3px rgba(18,32,86,.06), 0 1px 2px rgba(18,32,86,.04);
  --shadow-md:  0 4px 16px rgba(18,32,86,.10), 0 2px 6px rgba(18,32,86,.06);
  --shadow-lg:  0 12px 40px rgba(18,32,86,.14), 0 4px 12px rgba(18,32,86,.08);
  --shadow-xl:  0 24px 60px rgba(18,32,86,.18);

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-pill: 100px;
}

[data-theme="dark"] {
  --bg-primary:    #080E22;
  --bg-secondary:  #0E1830;
  --bg-tertiary:   #141F3E;
  --bg-card:       #111828;
  --bg-card-hover: #192040;
  --bg-nav:        rgba(8,14,34,0.94);
  --bg-hero:       #060C1C;

  --text-primary:   #E8EBF8;
  --text-secondary: #9BA5C7;
  --text-muted:     #5C6A8E;
  --text-inverse:   #0D1530;
  --text-accent:    #818AEF;

  --border-color:   #1E2B4A;
  --border-focus:   #818AEF;

  --btn-primary-bg:  #5B65DD;
  --btn-primary-fg:  #FFFFFF;
  --btn-primary-hover: #4854c9;
  --btn-secondary-bg: transparent;
  --btn-secondary-fg: #E8EBF8;
  --btn-secondary-border: #3A4567;
  --btn-accent-bg:   #3D9BE9;
  --btn-accent-fg:   #FFFFFF;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.5);
  --shadow-xl:  0 24px 60px rgba(0,0,0,.6);
}