/* ============================================================
   Bodhvik — shared design tokens
   Loaded first by index.html, admin.html, and about.html.
   Canonical names plus aliases for every existing :root name
   used as a shared brand value.
   Subject tints are applied on the landing subject cards.
   --cyan MUST stay #06B6D4 (not aliased to purple).
   ============================================================ */

:root {
  /* ── Canonical colour ────────────────────────────────────── */
  --color-purple:        #7C3AED;
  --color-purple-dark:   #6D28D9;
  --color-cyan:          #06B6D4;
  --color-green:         #10B981;
  --color-green-status:  #16A34A;
  --color-text:          #1E293B;
  --color-text-muted:    #64748B;
  --color-text-subtle:   #64748B;
  --color-navy:          #0F172A;
  --color-bg:            #F8FAFC;
  --color-border:        #E2E8F0;
  --color-gold:          #D97706;
  --color-danger:        #DC2626;
  --color-pink:          #EC4899;
  --color-white:         #FFFFFF;

  /* Subject card tints — applied on landing subject cards */
  --tint-reading:  #EDE9FE;
  --tint-writing:  #FFEDD5;
  --tint-maths:    #D1FAE5;
  --tint-life:     #FFE4E6;

  /* ── Spacing scale (defined; not force-applied this phase) ─ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;

  /* ── Type scale (defined; not force-applied this phase) ──── */
  --text-display:  3rem;
  --text-heading:  1.5rem;
  --text-body:     1rem;
  --text-caption:  0.85rem;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-card:    18px;
  --radius-control: 10px;
  --radius-pill:    999px;

  /* ── Focus (keyboard only; :focus-visible is mouse-invisible) */
  --color-focus:       var(--color-purple);
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  /* Lexend is display/headings on the landing page only.
     --font-heading stays Nunito so in-app themes can still swap Orbitron. */
  --font-display:        'Lexend', sans-serif;
  --font-heading:        'Nunito', sans-serif;
  --font-body:           'Nunito', sans-serif;
  --font-weight-heading: 700;

  /* ── Aliases — styles.css names ──────────────────────────── */
  --purple:           var(--color-purple);
  --cyan:             var(--color-cyan);
  --pink:             var(--color-pink);
  --green:            var(--color-green);
  --gold:             var(--color-gold);
  --accent-primary:   var(--color-purple);
  --accent-secondary: var(--color-purple-dark);
  --accent:           var(--color-purple);
  --text-primary:     var(--color-text);
  --text-muted:       var(--color-text-muted);
  --heading-color:    var(--color-text);
  --subtitle-color:   var(--color-purple);
  --bg-deep:          var(--color-bg);
  --bg-body:          var(--color-bg);
  --bg:               var(--color-bg);
  --grey-bg:          var(--color-bg);
  --btn-primary-bg:   var(--color-purple);
  --btn-primary-color:#ffffff;
  --card-radius:      var(--radius-card);
  --navy:             var(--color-navy);
  --white:            var(--color-white);
  --border:           var(--color-border);
  --text-1:           var(--color-text);
  --text-2:           #475569;
  --text-3:           var(--color-text-subtle);
  --red:              var(--color-danger);
}

/* Keyboard focus ring. button:focus-visible (0,1,1) beats class-level
   outline: none (0,1,0) in styles.css / admin.css. Mouse clicks stay
   ring-free because this is :focus-visible, not :focus. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Dark surfaces: purple ring would sit on navy/glass, so use white. */
body.theme-app:not(.theme-light-app) button:focus-visible,
body.theme-app:not(.theme-light-app) a:focus-visible,
body.theme-app:not(.theme-light-app) input:focus-visible,
body.theme-app:not(.theme-light-app) textarea:focus-visible,
body.theme-app:not(.theme-light-app) select:focus-visible,
body.theme-app:not(.theme-light-app) [tabindex]:focus-visible,
.nav-item:focus-visible {
  outline-color: var(--color-white);
}

/* Visually hidden, still exposed to assistive tech */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}