/* ============================================================================
   United Learn — Unitile Brand Theme
   ----------------------------------------------------------------------------
   Applies the official "Unitile Brand Guidelines" colour palette on top of the
   design system (tokens.css). Loaded AFTER tokens.css + styles.css so these
   values win. This is the single place to tune brand colour — to revert the
   rebrand, just remove the <link rel="stylesheet" href="brand.css"> in
   index.html.

   PALETTE (from Unitile Brand Guidelines):
     Primary   Blue   #0B64A0   Grey #AAAAAF   Black #1E1E1E   White #FFFFFF
     Bright    Amber  #F5A82B   Teal #379A94   Brick #913B2F   Sky   #4DBEEE
     Neutral   #908A89  #7A695F  #5E97BA  #877E52
     Dark      Navy   #293A6A   #252A2D   Deep navy #0E243D   Charcoal #363537
   ========================================================================== */

:root {
  /* — Brand (Unitile) — */
  --ds-brand:        #0B64A0;   /* primary blue  (brand-600) */
  --ds-brand-strong: #08527F;   /* brand-700 (hover/pressed) */
  --ds-brand-soft:   #1C7ABB;   /* brand-500 (lighter) */
  --ds-orange:       #F5A82B;   /* bright amber */
  --ds-green:        #379A94;   /* bright teal */
  --ds-violet:       #293A6A;   /* brand navy (third accent) */

  /* — Ink / neutrals (brand black) — */
  --ds-ink:          #1E1E1E;   /* primary buttons + active nav pill */
  --ds-ink-soft:     #363537;   /* charcoal */

  /* — Surfaces — */
  --ds-bg:           #F4F6F9;
  --ds-surface:      #FFFFFF;
  --ds-surface-2:    #F6F8FB;
  --ds-border:       #E5EAF0;
  --ds-border-soft:  #EEF1F6;

  /* — Text — */
  --ds-text:         #1E1E1E;   /* brand black */
  --ds-text-muted:   #5E6873;
  --ds-text-subtle:  #9AA0A8;   /* ≈ brand grey #AAAAAF */
  --ds-on-accent:    #FFFFFF;

  /* — Accent gradients — */
  --ds-grad-blue:   linear-gradient(135deg, #1C7ABB 0%, #0B64A0 100%);
  --ds-grad-orange: linear-gradient(135deg, #F8BE5C 0%, #F5A82B 100%);
  --ds-grad-violet: linear-gradient(135deg, #3C4F86 0%, #293A6A 100%);
  --ds-grad-green:  linear-gradient(135deg, #4FB6AF 0%, #379A94 100%);
  --ds-grad-pink:   linear-gradient(135deg, #B5564A 0%, #913B2F 100%); /* brick */
  --ds-grad-ink:    linear-gradient(135deg, #363537 0%, #1E1E1E 100%);

  /* — Brand-tinted accent shadow — */
  --ds-shadow-accent: 0 14px 30px -12px rgba(11, 100, 160, .45);
}

/* Dark mode — brand-tinted (anchored on the deep-navy / charcoal brand darks). */
[data-theme="dark"] {
  --ds-bg:          #0B141C;
  --ds-surface:     #121E29;
  --ds-surface-2:   #18242F;
  --ds-border:      #233240;
  --ds-border-soft: #1B2733;
  --ds-text:        #E7ECF3;
  --ds-text-muted:  #9AA6B2;
  --ds-text-subtle: #6B7785;
  --ds-ink:         #E7ECF3;   /* light pill on dark */
  --ds-on-accent:   #FFFFFF;
}

/* ── Re-skin design-system utilities that hardcoded the old brand rgba ─────── */
.ds-input:focus {
  border-color: var(--ds-brand);
  box-shadow: 0 0 0 3px rgba(11, 100, 160, .18);
}

.ds-badge-success { background: rgba(55, 154, 148, .14);  color: #2B7D78; } /* teal */
.ds-badge-warn    { background: rgba(245, 168, 43, .16);  color: #B9791A; } /* amber */
.ds-badge-info    { background: rgba(11, 100, 160, .12);  color: #0B64A0; } /* blue */
.ds-badge-violet  { background: rgba(41, 58, 106, .12);   color: #293A6A; } /* navy */