/* BAP Homepage */
:root {
  /* Brand */
  --bap:        #0F7BDE;
  --bap-dark:   #0A387F;
  --bap-navy:   #062350;
  --bap-soft:   #E8F1FB;
  --bap-paper:  #F5F8FB;
  --bap-line:   #D8E2EF;
  --bap-muted:  #43597A;

  /* Accent */
  --lucky:        #84BF2B;
  --lucky-dark:   #5FA938;
  --lucky-bright: #9AD331;
  --lucky-soft:   #EFF7E3;
  --lucky-text:   #4F7A1F;

  /* Dark sections */
  --night:       #062350;
  --night-black: #041B33;
  --night-line:  #1E4E8F;
  --night-muted: #A9C3E4;
  --night-text:  #C9DAF2;

  /* Semantic */
  --color-bg:      var(--bap-paper);
  --color-text:    var(--bap-navy);
  --color-muted:   var(--bap-muted);
  --color-border:  var(--bap-line);
  --color-primary: var(--bap);
  --color-accent:  var(--lucky);

  /* Font */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Layout */
  --container: 1200px;
  --gutter:    1.5rem;
  --header-h:  66px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-card:  0 16px 34px -20px rgba(6, 35, 80, .28);
  --shadow-board: 0 24px 60px -24px rgba(6, 35, 80, .45);
}