/* Design tokens — Academic Destination Nepal
 *
 * These name the palette this codebase already uses. They are not a redesign:
 * every value below was measured out of the existing stylesheets, and adopting
 * a token changes nothing on screen. Repainting the brand is a decision for
 * the people whose brand it is, and it should be a visible one, not a side
 * effect of tidying.
 *
 * What the audit found, across ~3,900 lines of extracted CSS:
 *
 *   The colour palette is already coherent. It is Tailwind's slate ramp for
 *   structure plus five semantic accents, applied consistently across all
 *   three products. It simply had no names - roughly 200 literal hex values
 *   spread over eight stylesheets, so changing one meant finding all of them.
 *
 *   Typography is where the three products diverge, and two of those
 *   divergences were bugs rather than choices. See the type section below.
 *
 * Usage: var(--surface-2), var(--text-muted), var(--ok) and so on. Add new
 * values here rather than inventing another near-miss of slate-600.
 */

:root {
    /* ---- Structure: Tailwind slate, most-used first ------------------- */
    --surface-0: #0f172a;   /* slate-900 - deepest ground, ERP shell        */
    --surface-1: #1e293b;   /* slate-800 - raised panel on dark             */
    --surface-2: #f8fafc;   /* slate-50  - page ground on light            */
    --surface-3: #f1f5f9;   /* slate-100 - subtle fill                     */

    --border-strong: #cbd5e1;   /* slate-300 */
    --border-subtle: #e2e8f0;   /* slate-200 */

    --text-strong:    #0f172a;  /* slate-900 - headings on light           */
    --text-body:      #475569;  /* slate-600 - running text                */
    --text-secondary: #64748b;  /* slate-500 - captions, meta              */
    /* --text-muted matches erp-shell.css deliberately. That file declares it
     * at :root as #94a3b8 and its rules depend on that value, so a token file
     * disagreeing would make one name mean two colours depending on which
     * product the reader is in - the exact fragmentation this file exists to
     * end. The slate-500 value has its own name above instead. */
    --text-muted:     #94a3b8;  /* slate-400 - de-emphasised, on dark      */

    /* ---- Semantic accents --------------------------------------------
     * Deliberately separate from any brand accent: these carry meaning, so
     * they should not be repainted for decoration.
     */
    --ok:      #34d399;   /* emerald-400 - verified, granted, paid         */
    --warn:    #fbbf24;   /* amber-400   - unverified, review due, pending */
    --danger:  #ef4444;   /* red-500     - refused, failed, overdue        */
    --info:    #60a5fa;   /* blue-400    - informational                   */
    --accent:  #c084fc;   /* purple-400  - AI-generated content            */

    /* ---- Type ---------------------------------------------------------
     * Two families, both already loaded by the shells that use them:
     *
     *   Plus Jakarta Sans - public marketplace headings
     *   Inter             - everything else, and all body text
     *
     * Two bugs this replaces:
     *
     *   cv-studio.css asked for 'Segoe UI', which exists only on Windows.
     *   Everywhere else it fell through to Tahoma or Verdana, so CV Studio
     *   rendered in a different typeface for every student on a phone or a
     *   Mac - invisible to a developer working on Windows.
     *
     *   Four elements in the mock interview room asked for 'JetBrains Mono',
     *   which no page ever loads. They fell back to the generic monospace
     *   default, usually Courier. --font-mono is a system stack instead: it
     *   resolves to a real, well-set monospace on every platform without
     *   another webfont request, which for four running timers is the right
     *   trade.
     */
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Inter', system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
                 'Liberation Mono', monospace;

    /* ---- Spacing and radius ------------------------------------------
     * The values already in use, named. ERP cards sit at 14px radius, the
     * public site at 20px; both are kept rather than averaged.
     */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --gap-sm: 8px;
    --gap-md: 16px;
    --gap-lg: 32px;

    /* ---- Touch: deliberately NOT defined here --------------------------
     * erp-mobile.css already owns --tap-min, sets it to 44px, and reads it in
     * eight rules that enforce the mobile tap-target floor.
     *
     * The first version of this file declared --tap-min: 24px, meaning to
     * record the WCAG 2.2 AA minimum. It resolved to 44px anyway, but only
     * because tokens.css happens to load before erp-mobile.css in base_erp -
     * reverse that order and every ERP tap target on a phone would have
     * quietly shrunk from 44px to 24px, undoing a core piece of the mobile
     * work with no error anywhere.
     *
     * A token file that redefines a name already in use with a different
     * value is worse than no token file. If you need the touch sizes, read
     * them from erp-mobile.css, which is where they are enforced.
     */
}