/*
 * Manhali Modern: academy brand presets (white-label).
 *
 * The student area is branded per academy. <html data-brand="teal"> swaps the brand family only
 * (--brand, --primary*, --ring; --chart-1 follows --brand). Surfaces, status colours and tags stay put.
 * "default" is the Manhali tangerine in tokens.css. core.js sets data-brand from ?brand= or the
 * remembered choice, and [data-action="brand"][data-value] buttons switch it.
 *
 * Generated with AA checks (white on --primary, soft pair, dark pair all >= 4.5:1). See README "Contrast".
 * In production an academy's colour is mapped to the nearest preset or run through the same checks.
 */

/* Teal (فيروزي) */
[data-brand="teal"] {
  --brand: oklch(0.68 0.12 192);
  --primary: oklch(0.535 0.12 192);
  --primary-hover: oklch(0.5 0.115 192);
  --primary-active: oklch(0.455 0.106 192);
  --primary-foreground: oklch(1 0 0);
  --primary-soft: oklch(0.962 0.03 192);
  --primary-soft-hover: oklch(0.935 0.048 192);
  --primary-soft-foreground: oklch(0.52 0.102 192);
  --ring: oklch(0.68 0.12 192 / 0.55);
}
[data-brand="teal"].dark, [data-brand="teal"] .dark {
  --brand: oklch(0.76 0.108 192);
  --primary: oklch(0.7 0.108 192);
  --primary-hover: oklch(0.75 0.096 192);
  --primary-active: oklch(0.66 0.102 192);
  --primary-foreground: oklch(0.2 0.03 192);
  --primary-soft: oklch(0.32 0.06 192 / 0.6);
  --primary-soft-hover: oklch(0.36 0.07 192 / 0.7);
  --primary-soft-foreground: oklch(0.83 0.084 192);
  --ring: oklch(0.76 0.108 192 / 0.6);
}

/* Indigo (نيلي) */
[data-brand="indigo"] {
  --brand: oklch(0.68 0.17 272);
  --primary: oklch(0.57 0.17 272);
  --primary-hover: oklch(0.535 0.163 272);
  --primary-active: oklch(0.49 0.15 272);
  --primary-foreground: oklch(1 0 0);
  --primary-soft: oklch(0.962 0.03 272);
  --primary-soft-hover: oklch(0.935 0.048 272);
  --primary-soft-foreground: oklch(0.52 0.145 272);
  --ring: oklch(0.68 0.17 272 / 0.55);
}
[data-brand="indigo"].dark, [data-brand="indigo"] .dark {
  --brand: oklch(0.76 0.153 272);
  --primary: oklch(0.7 0.153 272);
  --primary-hover: oklch(0.75 0.136 272);
  --primary-active: oklch(0.66 0.145 272);
  --primary-foreground: oklch(0.2 0.03 272);
  --primary-soft: oklch(0.32 0.06 272 / 0.6);
  --primary-soft-hover: oklch(0.36 0.07 272 / 0.7);
  --primary-soft-foreground: oklch(0.83 0.119 272);
  --ring: oklch(0.76 0.153 272 / 0.6);
}

/* Emerald (زمردي) */
[data-brand="emerald"] {
  --brand: oklch(0.68 0.14 158);
  --primary: oklch(0.54 0.14 158);
  --primary-hover: oklch(0.505 0.134 158);
  --primary-active: oklch(0.46 0.123 158);
  --primary-foreground: oklch(1 0 0);
  --primary-soft: oklch(0.962 0.03 158);
  --primary-soft-hover: oklch(0.935 0.048 158);
  --primary-soft-foreground: oklch(0.52 0.119 158);
  --ring: oklch(0.68 0.14 158 / 0.55);
}
[data-brand="emerald"].dark, [data-brand="emerald"] .dark {
  --brand: oklch(0.76 0.126 158);
  --primary: oklch(0.7 0.126 158);
  --primary-hover: oklch(0.75 0.112 158);
  --primary-active: oklch(0.66 0.119 158);
  --primary-foreground: oklch(0.2 0.03 158);
  --primary-soft: oklch(0.32 0.06 158 / 0.6);
  --primary-soft-hover: oklch(0.36 0.07 158 / 0.7);
  --primary-soft-foreground: oklch(0.83 0.098 158);
  --ring: oklch(0.76 0.126 158 / 0.6);
}

/* Rose (وردي) */
[data-brand="rose"] {
  --brand: oklch(0.68 0.18 8);
  --primary: oklch(0.585 0.18 8);
  --primary-hover: oklch(0.55 0.173 8);
  --primary-active: oklch(0.505 0.158 8);
  --primary-foreground: oklch(1 0 0);
  --primary-soft: oklch(0.962 0.03 8);
  --primary-soft-hover: oklch(0.935 0.048 8);
  --primary-soft-foreground: oklch(0.52 0.153 8);
  --ring: oklch(0.68 0.18 8 / 0.55);
}
[data-brand="rose"].dark, [data-brand="rose"] .dark {
  --brand: oklch(0.76 0.162 8);
  --primary: oklch(0.7 0.162 8);
  --primary-hover: oklch(0.75 0.144 8);
  --primary-active: oklch(0.66 0.153 8);
  --primary-foreground: oklch(0.2 0.03 8);
  --primary-soft: oklch(0.32 0.06 8 / 0.6);
  --primary-soft-hover: oklch(0.36 0.07 8 / 0.7);
  --primary-soft-foreground: oklch(0.83 0.126 8);
  --ring: oklch(0.76 0.162 8 / 0.6);
}

/* Plum (بنفسجي) */
[data-brand="plum"] {
  --brand: oklch(0.68 0.16 318);
  --primary: oklch(0.58 0.16 318);
  --primary-hover: oklch(0.545 0.154 318);
  --primary-active: oklch(0.5 0.141 318);
  --primary-foreground: oklch(1 0 0);
  --primary-soft: oklch(0.962 0.03 318);
  --primary-soft-hover: oklch(0.935 0.048 318);
  --primary-soft-foreground: oklch(0.52 0.136 318);
  --ring: oklch(0.68 0.16 318 / 0.55);
}
[data-brand="plum"].dark, [data-brand="plum"] .dark {
  --brand: oklch(0.76 0.144 318);
  --primary: oklch(0.7 0.144 318);
  --primary-hover: oklch(0.75 0.128 318);
  --primary-active: oklch(0.66 0.136 318);
  --primary-foreground: oklch(0.2 0.03 318);
  --primary-soft: oklch(0.32 0.06 318 / 0.6);
  --primary-soft-hover: oklch(0.36 0.07 318 / 0.7);
  --primary-soft-foreground: oklch(0.83 0.112 318);
  --ring: oklch(0.76 0.144 318 / 0.6);
}

/* ── Brand-aware surfaces ───────────────────────────────
   The default tangerine keeps its hand-tuned gradients (components.css, auth.css, fluid.js).
   Any other preset derives them from --brand / --primary, so one variable re-skins the academy. */
[data-brand] .logo-tile {
  background: linear-gradient(145deg, color-mix(in oklch, var(--brand), white 25%), var(--brand) 55%, var(--primary));
  box-shadow: 0 1px 2px color-mix(in oklch, var(--primary), transparent 65%), inset 0 1px 0 oklch(1 0 0 / 0.35);
}
[data-brand] .auth-visual {
  background: linear-gradient(160deg, color-mix(in oklch, var(--brand), white 45%), var(--brand) 55%, color-mix(in oklch, var(--brand), white 60%));
}
[data-brand].dark .auth-visual {
  background: linear-gradient(160deg, color-mix(in oklch, var(--brand), black 72%), color-mix(in oklch, var(--brand), black 55%) 55%, color-mix(in oklch, var(--brand), black 78%));
}
[data-brand] mm-fluid {
  --fluid-base: linear-gradient(160deg, color-mix(in oklch, var(--brand), white 40%), color-mix(in oklch, var(--brand), white 12%) 55%, color-mix(in oklch, var(--brand), white 50%));
  --fluid-1: color-mix(in oklch, var(--brand), white 80%);
  --fluid-2: var(--primary);
  --fluid-3: color-mix(in oklch, var(--brand), white 30%);
  --fluid-4: color-mix(in oklch, var(--brand), white 60%);
}
[data-brand].dark mm-fluid {
  --fluid-base: linear-gradient(160deg, color-mix(in oklch, var(--brand), black 75%), color-mix(in oklch, var(--brand), black 65%) 55%, color-mix(in oklch, var(--brand), black 80%));
  --fluid-1: color-mix(in oklch, var(--brand), black 45%);
  --fluid-2: color-mix(in oklch, var(--brand), black 35%);
  --fluid-3: color-mix(in oklch, var(--brand), black 55%);
  --fluid-4: color-mix(in oklch, var(--brand), black 62%);
}