/* 01-variables.css — Root custom properties */

:root {
  --cobalt:       #1C3A56;
  --cobalt-dark:  #14293D;
  --cobalt-mid:   #2A5278;
  --cobalt-light: #4A7FA8;
  --cobalt-pale:  #E8F0F7;
  --terracotta:   #B85C38;
  --terra-dark:   #a04030;
  --terra-light:  #D4795A;
  --terra-pale:   #F5E6DF;
  --gold:         #B8924A;
  --gold-light:   #D4B06A;
  --gold-pale:    #F0E4C8;
  --cream:        #F9F4ED;
  --parchment:    #EDE5D5;
  --warm-white:   #FDFAF6;
  --forest:       #2D4A3E;
  --forest-light: #3D6455;
  --text:         #2A1F14;
  --text-mid:     #5C4A38;
  --text-light:   #8C7A68;
  --rule:         rgba(44,31,20,0.1);
  --sidebar-w:    280px;

  /* Pathway accent colors */
  --erv-color:    #B85C38;
  --nomad-color:  #2A5278;
  --js-color:     #2D4A3E;
  --student-color:#7A5C2A;
  --family-color: #6A3A6A;

  /* Spacing scale */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  36px;
  --space-2xl: 48px;

  /* Border-radius tokens — sharp-edged aesthetic */
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-full: 50%;

  /* Accessible text-light: bumped from #8C7A68 (3.2:1) to pass WCAG AA 4.5:1 on cream */
  --text-light-aa: #6B5D4F;

  /* Derived variables used by calculator & timeline */
  --border:     rgba(44,31,20,0.12);
  --surface:    #F5F0E8;
  --text-dark:  #2A1F14;
  --serif:      'Playfair Display', Georgia, serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { height:100%; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--text);
  height: 100%;
  overflow: hidden;
}

/* ── Global focus-visible ring ── */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* On dark backgrounds (sidebar, login, modals), use a lighter ring */
.sidebar :focus-visible,
#loginScreen :focus-visible,
.onboarding :focus-visible,
.modal-overlay :focus-visible,
.workbook-overlay .wb-topbar :focus-visible,
#compassOverlay :focus-visible {
  outline-color: var(--gold-light);
}

/* Inputs: keep custom border focus but don't remove outline for keyboard users */
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}