/* ═════════════════════════════════════════════════════════════════════
   GDP — Growth & Development Profile · design tokens
   Aligned with docs/ui/brand.css (repo proposal): measured contrast
   values, two-layer token model. Layer 1 = brand, Layer 2 = semantic.
   Gold is NEVER a text colour on the light ground (2.3:1). On the dark
   ground --ui-accent-text carries gold text (8.4:1).
   ═════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Layer 1 · brand ── */
  --brand-primary:        #003153;   /* Prussian Blue — 13.4:1 on white */
  --brand-primary-hover:  #00253F;
  --brand-on-primary:     #FFFFFF;

  --brand-accent:         #C9A84C;   /* gold — fills, rules, edges only (light) */
  --brand-on-accent:      #00141F;
  --brand-accent-tint:    #F5EEDC;
  --brand-accent-edge:    #DEC581;

  --brand-paper:          #F7F5F0;   /* warm paper */
  --brand-surface:        #FFFFFF;
  --brand-surface-sunk:   #EFECE3;

  --brand-ink:            #003153;
  --brand-ink-2:          #45606E;   /* 6.2:1 on paper */
  --brand-ink-3:          #56707F;   /* 4.8:1 on paper */

  --brand-rule:           #E3DFD3;   /* dividers only, decorative */
  --brand-edge:           #6E8494;   /* control boundaries — 3.6:1 on paper */

  --brand-alert:          #8C2317;
  --brand-alert-tint:     #F9EDEA;
  --brand-ok:             #1E6B4F;
  --brand-ok-tint:        #E7F2EC;

  /* dark ground — admin */
  --brand-dark-bg:        #051C28;
  --brand-dark-surface:   #0A2634;
  --brand-dark-sunk:      #06202C;
  --brand-dark-ink:       #E9F0F4;
  --brand-dark-ink-2:     #9DB6C3;
  --brand-dark-rule:      #17394A;
  --brand-dark-edge:      #5C7E90;
  --brand-dark-accent:    #D8BC66;   /* gold AS TEXT — dark only, 8.4:1 */
  --brand-dark-accent-tint:#142831;
  --brand-dark-accent-edge:#6B5B2C;
  --brand-dark-alert:     #EFB3A4;
  --brand-dark-ok:        #7FD3AC;

  --font-ui:      "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui-ar:   "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── type scale ── */
  --text-micro:   11.5px;  --lh-micro:   1.45;
  --text-xs:        13px;  --lh-xs:      1.50;
  --text-sm:      14.5px;  --lh-sm:      1.55;
  --text-body:      16px;  --lh-body:    1.60;
  --text-lead:    17.5px;  --lh-lead:    1.62;
  --text-title:     21px;  --lh-title:   1.35;
  --text-section:   26px;  --lh-section: 1.30;
  --text-cover:     34px;  --lh-cover:   1.20;

  --weight-normal: 400; --weight-medium: 500;
  --weight-semi:   600; --weight-bold:   700;
  --track-caps:    .08em;

  /* ── space, radius, motion ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 56px;

  --radius:      12px;
  --radius-sm:    8px;
  --radius-pill: 99px;

  --tap-min: 44px;
  --shell-narrow: 480px;   /* staff column */
  --shell-wide:   72rem;   /* admin column */

  --ease: cubic-bezier(.2,.6,.2,1);
  --dur:  .18s;

  --shadow-rgb:  0 49 83;
  --shadow-lift: 0 18px 40px -24px rgb(var(--shadow-rgb) / .45);
}

/* ── Layer 2 · semantic ── */
:root,
[data-theme="light"] {
  --ui-bg:            var(--brand-paper);
  --ui-surface:       var(--brand-surface);
  --ui-surface-sunk:  var(--brand-surface-sunk);
  --ui-text:          var(--brand-ink);
  --ui-text-2:        var(--brand-ink-2);
  --ui-text-3:        var(--brand-ink-3);
  --ui-rule:          var(--brand-rule);
  --ui-edge:          var(--brand-edge);
  --ui-action:        var(--brand-primary);
  --ui-action-hover:  var(--brand-primary-hover);
  --ui-on-action:     var(--brand-on-primary);
  --ui-accent:        var(--brand-accent);
  --ui-accent-tint:   var(--brand-accent-tint);
  --ui-accent-edge:   var(--brand-accent-edge);
  --ui-on-accent:     var(--brand-on-accent);
  --ui-alert:         var(--brand-alert);
  --ui-alert-tint:    var(--brand-alert-tint);
  --ui-ok:            var(--brand-ok);
  --ui-ok-tint:       var(--brand-ok-tint);
  --ui-focus:         var(--brand-primary);
  /* --ui-accent-text deliberately undefined on light: gold text fails loudly */
  color-scheme: light;
}

[data-theme="dark"] {
  --ui-bg:           var(--brand-dark-bg);
  --ui-surface:      var(--brand-dark-surface);
  --ui-surface-sunk: var(--brand-dark-sunk);
  --ui-text:         var(--brand-dark-ink);
  --ui-text-2:       var(--brand-dark-ink-2);
  --ui-text-3:       var(--brand-dark-ink-2);
  --ui-rule:         var(--brand-dark-rule);
  --ui-edge:         var(--brand-dark-edge);
  --ui-action:       var(--brand-accent);
  --ui-action-hover: var(--brand-dark-accent);
  --ui-on-action:    var(--brand-on-accent);
  --ui-accent:       var(--brand-accent);
  --ui-accent-text:  var(--brand-dark-accent);
  --ui-accent-tint:  var(--brand-dark-accent-tint);
  --ui-accent-edge:  var(--brand-dark-accent-edge);
  --ui-alert:        var(--brand-dark-alert);
  --ui-alert-tint:   #2E1B16;
  --ui-ok:           var(--brand-dark-ok);
  --ui-ok-tint:      #10342A;
  --ui-focus:        var(--brand-dark-accent);
  color-scheme: dark;
}

/* ── Arabic ── restated scale: Plex Arabic sets smaller, needs more leading */
:lang(ar) {
  --font-ui-active: var(--font-ui-ar);
  --text-xs:      13.5px;  --lh-xs:      1.70;
  --text-sm:      15.5px;  --lh-sm:      1.75;
  --text-body:      17px;  --lh-body:    1.80;
  --text-lead:    18.5px;  --lh-lead:    1.85;
  --text-title:     22px;  --lh-title:   1.55;
  --text-micro:     12px;  --lh-micro:   1.60;
  --track-caps:      0;
}
:lang(ar) .u-caps { text-transform: none; letter-spacing: 0; font-weight: var(--weight-semi); }

/* ── primitives ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--font-ui-active, var(--font-ui));
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
}
:lang(ar) body, body:lang(ar) { font-family: var(--font-ui-ar); }

a { color: var(--ui-action); }
a:hover { text-decoration-thickness: 2px; }
[data-theme="dark"] a { color: var(--ui-accent-text); }

.u-caps {
  font-size: var(--text-micro);
  line-height: var(--lh-micro);
  font-weight: var(--weight-semi);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.mono { font-family: var(--font-mono); }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:where(button, [role="button"], a.action, summary) { min-height: var(--tap-min); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}