/* Single source for the site's color palette. app.css @imports this; every
   other stylesheet/page gets the tokens either transitively (via app.css) or
   by linking this file directly (mirrors font-tokens.css/spacing-tokens.css's
   wiring). Do not redeclare these values anywhere else — change them here
   only.

   These are the values that were already duplicated (app.css's own :root
   declared one set, ductusmed-theme.css's :root silently overrode it with a
   different set that was the one actually rendering, and the three
   standalone admin/flashcard layouts each kept a third, partially-drifted
   copy). The values below are the ones that were actually taking effect
   before this change, so consolidating them changes nothing on screen.

   --color-primary-soft and --color-primary-light were two names for the same
   color; -light is kept only as an alias so existing references don't need
   to change. One-off colors used for a single badge/gradient/illustration are
   intentionally left as literals — they were never duplicated, so there is
   nothing to consolidate. */
:root {
  --color-primary: #6366f1;
  --color-primary-d: #4f46e5;
  /* Was #6366F1 -- identical to --color-primary after the red->indigo rebrand
     shifted --color-primary onto the old --color-primary-l value, which
     silently flattened the gradients that use both stops together
     (.progress-bar, .gradient-card, and .stat-card until issue #211 removed
     it) into a solid fill. #818CF8 is
     the lighter indigo already established elsewhere in the app (used as a
     gradient endpoint/accent in 9 other files), so this restores an actual
     gradient without inventing a new color. */
  --color-primary-l: #818CF8;
  --color-primary-soft: #EEF2FF;
  --color-primary-light: var(--color-primary-soft);
  --color-primary-ink: #4F46E5; /* readable ink for text sitting directly on --color-primary-soft (.alert-info) */
  /* Readable ink for text sitting on .brand-mark's own background -- which
     is --color-text, not --color-bg (the chip is a deliberate full
     inversion of the page's own text/bg pair, see app.css's .brand-mark
     comment). That makes this the *opposite* mapping from --color-primary-ink:
     --color-text is dark in light mode (needs a light ink) and light in dark
     mode (needs a dark ink), where --color-bg runs the other way. Using
     --color-primary-ink here measured 2.46:1 (axe/Lighthouse) -- the
     dark-mode ink shade landing on dark mode's now-light chip background. */
  --color-primary-chip-ink: var(--color-primary-l);
  /* app.css's global `a { color: ... }` rule and any other primary-hued
     text sitting on an ordinary surface (not a filled/soft background of
     its own). --color-primary itself is theme-stable and was never
     redefined for dark mode; on a dark surface that measured 3.83:1 for
     catalog.html's course-title links and 2.72:1 for its .course-price
     (axe/Lighthouse against /courses), both well under the 4.5:1 AA
     minimum. --color-primary-l already exists as the established lighter
     indigo (gradients, --color-primary-chip-ink above) and clears AA on
     every dark surface tested (5.7-6.3:1). Left equal to --color-primary
     in light mode -- that pairing's own borderline contrast on white
     (~4.47:1 in a few places) is a separate, already-flagged brand-color
     question, not something this token changes. */
  --color-link: var(--color-primary);

  --color-bg: #ffffff;
  --color-surface: #f5f5ff;
  /* Elevated component surface (cards, nav bar, buttons, form fields) —
     decoupled from --white below on purpose: --white also means "text/icon
     that must stay white on a colored background" (button labels, badges),
     which cannot invert for dark mode the way a card background must. In
     light mode the two happen to be identical (#fff), so this introduces no
     visible change; dark mode is where they diverge. */
  --color-surface-card: #ffffff;
  --color-border: #e6e6f5;
  --color-text: #1e1b2e;
  --color-text-muted: #6b7280;
  --white: #fff;

  --color-success: #16A34A;
  --color-success-soft: #F0FDF4;
  --color-success-border: #BBF7D0;
  --color-success-ink: #166534; /* readable ink for text sitting directly on --color-success-soft */

  --color-warning: #B45309;
  --color-warning-soft: #FFFBEB;
  --color-warning-border: #FDE68A;
  --color-warning-ink: #92400E; /* readable ink for text sitting directly on --color-warning-soft */

  --color-danger: #BE4B3A;
  --color-danger-d: #A24031; /* darker hover shade for solid danger buttons, mirrors --color-primary-d */
  --color-danger-soft: #FFF5F3;
  --color-danger-border: #FECACA;
  /* Dedicated solid-fill tokens for .btn-danger/.refund-btn (white label
     text on a solid background) — decoupled from --color-danger/-d above,
     which dark mode lightens for legibility as *ink* on a soft translucent
     background (.alert-error, badges). Reusing that lightened value as a
     button *fill* dropped white-on-red contrast to 2.77:1 in dark mode,
     under WCAG AA's 4.5:1. In light mode these match --color-danger/-d
     exactly (that pairing was already AA-safe there, ~4.9:1). */
  --color-danger-solid: #BE4B3A;
  --color-danger-solid-d: #A24031;

  /* Solid WhatsApp-brand-adjacent green for the site-wide contact
     button/FAB (white label/icon on a solid fill, same "solid" need as
     --color-danger-solid above, kept as its own token rather than reusing
     --color-success since that one is tuned as *ink* on soft backgrounds,
     not as a button fill -- reusing it here would repeat the exact
     contrast mistake --color-danger-solid was split out to avoid). One
     value, not a light/dark pair like --color-danger-solid: #15803D
     already clears white-text AA (~5:1 by WCAG's relative-luminance
     formula) against either theme's page background, since the contrast
     that matters is white-on-green, not green-on-page -- unlike danger,
     which needs a hue shift to stay legible against a darker surface
     itself, green at this depth needs no per-theme adjustment. */
  --color-whatsapp-solid: #15803D;
  --color-whatsapp-solid-d: #166534;

  /* A second, muted status palette used only for compact badges/rate labels
     (quiz-home.html, quiz-result.html, admin-mcq-queue.html,
     student-growth.html) — visually distinct from --color-success/-warning
     /-danger/-primary above by design, not a drifted copy of them. Only the
     four values that already recurred identically across those files are
     tokenized here; each file's own one-off badge background/border stays a
     literal (never duplicated elsewhere, so nothing to consolidate). */
  --color-status-amber: #854F0B;
  --color-status-amber-soft: #FAEEDA;
  --color-status-green: #0F6E56;
  --color-status-red: #A32D2D;
  --color-status-indigo: #3C3489;

  /* A third gray scale (Tailwind's "slate"), used as literal hex throughout
     the admin/instructor/flashcard pages instead of --color-border/-text
     /-text-muted above, which are a visually distinct indigo-tinted gray
     used on the customer-facing pages. Not a drifted copy of those — two
     genuinely different gray families coexist by design. Every shade that
     recurred across 2+ files is now tokenized. */
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* A bright accent green (Tailwind green-500/-400), used across 8 files as
     a dot/bar/gradient accent — distinct from --color-success (#16A34A,
     darker) even though several of these same rules already pair it with
     --color-success-soft. Not a drifted copy of --color-success; kept
     separate since retargeting it there would visibly darken every one of
     these accents. --color-accent-green-light's only job is the
     linear-gradient(90deg,...) pair used identically in 4 places. */
  --color-accent-green: #22C55E;
  --color-accent-green-light: #4ADE80;

  /* Amber counterpart to --color-accent-green above, same rationale:
     distinct from --color-warning (#B45309, darker/more muted) by design.
     linear-gradient(90deg,#F59E0B,#FCD34D) recurred byte-identical in 3
     places (tus-map.html x2, admin-dashboard.html, dashboard.html).
     flashcards-home.html's own gradient uses #FBBF24 instead of #FCD34D as
     its light stop — a near miss, not a duplicate, so it stays a literal. */
  --color-accent-amber: #F59E0B;
  --color-accent-amber-light: #FCD34D;

  /* Purple/teal counterparts to the pale "soft" icon-box backgrounds
     admin-dashboard.html's other three KPI tiles already get from
     --color-success-soft/--color-warning-soft (blue reuses
     --color-primary-soft): a near-white tint in light mode, safe here
     because these two were previously only ever written as the literal
     #F5F3FF/#F0FDFA hex admin-dashboard.html already used — this doesn't
     change light mode's appearance, it only gives dark mode a value to
     invert to below (undefined before, the tile rendered as a stark
     unthemed white square on the dark surface). Unlike --color-accent-*
     above, these are single-use "soft" tints, not a literal-value scale
     used elsewhere, so adding them doesn't carry that same remapping risk. */
  --color-accent-purple-soft: #F5F3FF;
  --color-accent-teal-soft: #F0FDFA;

  color-scheme: light;
}

/* ============================================================
   Dark theme — the navy/indigo identity already used on the
   instructor/account sidebar (see components/app-sidebar.html), extended
   to every page that shares this token file via app.css. Only the
   roles that actually need to invert for a dark surface are
   redeclared here (page/card backgrounds, borders, text, and the
   pale "soft" status tints, which are near-white in light mode and
   would be invisible on a dark page). --color-primary and the
   --slate-* / --color-status-* / --color-accent-* scales are left alone:
   the brand indigo already reads fine on both surfaces, and the
   slate/status/accent scales are used as literal-value scales in
   several admin pages outside this pass's scope rather than as
   role tokens, so remapping them here would have unpredictable
   effects on pages that were never audited for it.

   Applied when the page explicitly opts in (data-theme="dark", set
   by the theme toggle in base.html/instructor-base.html) or, absent
   an explicit choice, when the OS prefers dark. An explicit
   data-theme always wins over the OS preference, in both directions.
   ============================================================ */
:root[data-theme="dark"] {
  --color-bg: #0B1220;
  --color-surface: #10192B;
  --color-surface-card: #141B2E;
  --color-border: #262F45;
  --color-text: #E7E9F5;
  --color-text-muted: #8D95B0;

  --color-primary-soft: rgba(99, 102, 241, .18);
  --color-primary-light: var(--color-primary-soft);
  --color-primary-ink: #818CF8;
  --color-primary-chip-ink: var(--color-primary-d);
  /* Neither --color-primary (3.83:1 on a dark card) nor --color-primary-l
     (2.47:1 against this theme's own --color-text, axe's
     link-in-text-block flagged inline links against body copy -- default
     links have no underline, only :hover, so color alone must both read
     as "link" against surrounding prose text (>=3:1) and stay legible on
     whatever surface a link sits on (>=4.5:1 as normal-size text) --
     satisfy both at once: --color-primary-l alone clears the first but
     drops the second under 3:1; --color-primary clears the second but
     only just clears the first (3.7:1, no margin). This literal splits
     the difference (~4.6:1 on surfaces, ~3.1:1 against --color-text). */
  --color-link: #7177f4;

  --color-success: #34D399;
  --color-success-soft: rgba(52, 211, 153, .14);
  --color-success-border: rgba(52, 211, 153, .32);
  --color-success-ink: #6EE7B7;

  --color-warning: #FBBF24;
  --color-warning-soft: rgba(251, 191, 36, .14);
  --color-warning-border: rgba(251, 191, 36, .32);
  --color-warning-ink: #FCD34D;

  --color-danger: #F87171;
  --color-danger-d: #EF4444;
  --color-danger-soft: rgba(248, 113, 113, .14);
  --color-danger-border: rgba(248, 113, 113, .32);
  --color-danger-solid: #DC2626;
  --color-danger-solid-d: #B91C1C;

  --color-accent-purple-soft: rgba(139, 92, 246, .16);
  --color-accent-teal-soft: rgba(20, 184, 166, .16);

  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-bg: #0B1220;
    --color-surface: #10192B;
    --color-surface-card: #141B2E;
    --color-border: #262F45;
    --color-text: #E7E9F5;
    --color-text-muted: #8D95B0;

    --color-primary-soft: rgba(99, 102, 241, .18);
    --color-primary-light: var(--color-primary-soft);
    --color-primary-ink: #818CF8;
    --color-primary-chip-ink: var(--color-primary-d);
    --color-link: #7177f4; /* see :root[data-theme="dark"]'s own copy above for the contrast-tradeoff reasoning */

    --color-success: #34D399;
    --color-success-soft: rgba(52, 211, 153, .14);
    --color-success-border: rgba(52, 211, 153, .32);
    --color-success-ink: #6EE7B7;

    --color-warning: #FBBF24;
    --color-warning-soft: rgba(251, 191, 36, .14);
    --color-warning-border: rgba(251, 191, 36, .32);
    --color-warning-ink: #FCD34D;

    --color-danger: #F87171;
    --color-danger-d: #EF4444;
    --color-danger-soft: rgba(248, 113, 113, .14);
    --color-danger-border: rgba(248, 113, 113, .32);
    --color-danger-solid: #DC2626;
    --color-danger-solid-d: #B91C1C;

    --color-accent-purple-soft: rgba(139, 92, 246, .16);
    --color-accent-teal-soft: rgba(20, 184, 166, .16);

    color-scheme: dark;
  }
}