/* ── ASHAMS brand tokens ──────────────────────────────────────────────────
   Palette and type per the ASHAMS Design Guide. The generator's own output
   colours are NOT defined here — those live in generate.py and must not be
   restyled by UI work. */
:root {
  /* Core palette */
  --navy:        #063E66;
  --navy-deep:   #022C49;
  --navy-darker: #042036;
  --gold:        #F9B52B;
  --gold-hover:  #FBC23B;
  --cream:       #F6EFE2;
  --paper:       #EBE3D4;
  --terracotta:  #EC6A3C;
  /* Same hue, darkened to clear WCAG AA (4.55:1) for small text on paper.
     #EC6A3C itself is 2.46:1 there — fine for button fills, not for labels. */
  --terracotta-ink: #B53C12;
  --teal:        #1F8FA8;
  --ink:         #1A2A38;
  --ink-soft:    #42525F;
  --near-white:  #FBF8F2;

  /* Muted text, per the guide's rgba rule */
  --on-navy-muted:  rgba(246,239,226,.70);
  --on-navy-faint:  rgba(246,239,226,.45);
  --on-light-muted: rgba(6,62,102,.55);
  --hairline-navy:  rgba(246,239,226,.14);

  /* Mapped onto the app's existing token names, so every existing rule
     picks up the brand without being rewritten. */
  --brand-red:       var(--terracotta);
  --brand-red-light: #F07E54;
  --brand-gold:      var(--gold);
  --brand-gold-light:var(--gold-hover);
  --bg:              var(--paper);
  --bg-white:        var(--near-white);
  --bg-card:         #FFFFFF;
  --card:            #FFFFFF;
  --border:          rgba(6,62,102,.16);
  --border-light:    rgba(6,62,102,.09);
  --text:            var(--ink);
  --text-primary:    var(--ink);
  --text-secondary:  var(--ink-soft);
  --text-muted:      var(--on-light-muted);
  --sidebar-bg:      var(--navy);
  --sidebar-text:    var(--on-navy-muted);

  --font-ar:   'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius:    14px;
}

body {
  font-family: var(--font-ar);
  background: var(--paper);
  color: var(--ink);
}

/* Mono eyebrow — 11–13px, tracked, gold, always LTR */
.eyebrow {
  display: inline-block;      /* sits at the RTL start instead of the left edge */
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  direction: ltr;
  unicode-bidi: isolate;
}

/* Headlines: Cairo 800–900, generous leading for Arabic */
h1, h2, h3, .panel-title { font-family: var(--font-ar); font-weight: 800; line-height: 1.25; color: var(--navy); }

/* Gold underline highlight device */
.hl-gold {
  background-image: linear-gradient(transparent 58%, var(--gold) 58%);
  padding: 0 2px;
}

/* Hairline divider on navy */
.rule-navy { height: 1px; background: var(--hairline-navy); border: 0; }

/* Gold chip, per the guide's badge pattern */
.chip-gold {
  background: var(--gold); color: var(--navy);
  font-weight: 800; border-radius: 100px; padding: 3px 12px;
  font-size: 13px; display: inline-block;
}

/* Sun-ray motif — subtle, opacity <= .2, slow spin */
.sunrays {
  position: absolute; top: 50%; left: 50%; width: 200vmax; height: 200vmax;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  background: repeating-conic-gradient(
    from 0deg, rgba(249,181,43,.13) 0deg 2.2deg, transparent 2.2deg 15deg);
  pointer-events: none; opacity: .55;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 62%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 62%);
  animation: sunspin 240s linear infinite;
}
@keyframes sunspin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sunrays { animation: none; } }

/* Oversized gold glow bleeding off a corner */
.glow-gold {
  position: absolute; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(249,181,43,.20), transparent 68%);
  pointer-events: none;
}