/* ==========================================================================
   Taech — design tokens (locked, v1.1)
   Xaen Group · Schools platform · signature hue: Grow #17E39A
   The group rule: ONE dark base + ONE type system; each vertical owns ONE hue.
   Put .taech-console (staff/product) or .taech-daylight (parent/marketing)
   on the shell. Every value below is approved — do not invent colors/radii.
   ========================================================================== */

:root {
  /* — Signature: Grow (brand + primary action ONLY, never status) — */
  --taech-grow:        #17E39A; /* the ae + dot on dark, primary CTA on dark */
  --taech-grow-tint:   #5CF0C0; /* signature TEXT on dark */
  --taech-grow-deep:   #0E9E6C; /* signature on light — CTA, ae, large text */

  /* — Console (dark) base — shared group scale — */
  --taech-void:         #0C1320;
  --taech-void-deep:    #0E1828;
  --taech-panel:        #101826;
  --taech-panel-steel:  #16223A;
  --taech-panel-raised: #1B2A47;
  --taech-hairline:     #26344F;
  --taech-hairline-soft:#2A3A5C;
  --taech-text:         #E6EDF6;
  --taech-text-2:       #8B9CB3;
  --taech-text-3:       #5C6F87;
  --taech-text-4:       #3E4F66;

  /* — Daylight (light) — Taech's own; ink-primary IS the void, inverted — */
  --taech-paper:        #FBFCFE;
  --taech-paper-raised: #F1F5FA;
  --taech-paper-line:   #DDE5EF;
  --taech-ink:          #0E1828;
  --taech-ink-2:        #465A73;
  --taech-ink-3:        #7A8CA3;

  /* — Semantic (education domain) — color carries meaning, never decoration — */
  --taech-present:    #38B26B; /* present / on-track / pass */
  --taech-absence:    #E5484D; /* absence / risk / safeguarding */
  --taech-late:       #E5A23B; /* late / overdue / action needed */
  --taech-assessment: #3B82F6; /* grades / marks / reports (Qalam, Basira) */
  --taech-wellbeing:  #C084FC; /* pastoral / behaviour / SEND (Himma) */
  --taech-fees:       #2DD4BF; /* invoicing / balances (Rusum) */
  --taech-meta:       #8B9CB3; /* tags / generic chips */

  /* — Type — */
  --taech-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --taech-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --taech-arabic: "Tajawal", "Noto Sans Arabic", "IBM Plex Sans Arabic", sans-serif;

  /* — Motion (disciplined; nothing bouncy) — */
  --taech-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --taech-dur:  200ms;

  /* — Radius — */
  --taech-radius-card: 12px;
  --taech-radius-btn:  8px;
}

/* — Surface scopes — */
.taech-console {
  --surface:       var(--taech-void);
  --surface-grad:  linear-gradient(180deg, var(--taech-void), var(--taech-void-deep));
  --on-surface:    var(--taech-text);
  --on-surface-2:  var(--taech-text-2);
  --on-surface-3:  var(--taech-text-3);
  --signature:     var(--taech-grow);
  --signature-text:var(--taech-grow-tint);
  --card:          var(--taech-panel-steel);
  --line:          var(--taech-hairline);
  color: var(--on-surface);
  background: var(--surface-grad);
  font-family: var(--taech-sans);
}
.taech-daylight {
  --surface:       var(--taech-paper);
  --surface-grad:  var(--taech-paper);
  --on-surface:    var(--taech-ink);
  --on-surface-2:  var(--taech-ink-2);
  --on-surface-3:  var(--taech-ink-3);
  --signature:     var(--taech-grow-deep);
  --signature-text:var(--taech-grow-deep);
  --card:          var(--taech-paper-raised);
  --line:          var(--taech-paper-line);
  color: var(--on-surface);
  background: var(--surface);
  font-family: var(--taech-sans);
}

/* — RTL: swap the Latin sans for the Arabic face on Arabic surfaces — */
[dir="rtl"], [lang="ar"] { font-family: var(--taech-arabic); }
[dir="rtl"] .taech-mono, [lang="ar"] .taech-mono { font-family: var(--taech-mono); }

/* — The locked wordmark, as CSS (logo is type, never an image where DOM exists) — */
.taech-wordmark {
  font-family: var(--taech-sans);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--on-surface);
}
.taech-wordmark .ae,
.taech-wordmark .dot { color: var(--signature); }

/* — Mono identifiers (the family tell) — */
.taech-mono { font-family: var(--taech-mono); font-feature-settings: "tnum"; }

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