/* 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;

    /* ---- Public names for these same values ---------------------------
     * Everything above is named for where it is used - `--surface-0` is "the
     * deepest ground". These are the same values named for what they are,
     * which is what a new page reaches for first and what most people call
     * them.
     *
     * Every one is a `var()` reference rather than a copied hex, so two names
     * for one value cannot drift apart. That is not fussiness: this file and
     * erp-shell.css have already disagreed about one name twice, and the
     * failure mode is a colour that changes depending on which stylesheet the
     * page happened to load. `tools/check_css_tokens.py` exists because of it.
     *
     * The fallbacks are load-bearing. tokens.css is pulled in by five
     * different shells and only three of them also load erp-shell.css: the
     * public site, the partner login page and the analytics dashboard do not.
     * `--primary-accent` and the `--fs-*` scale live elsewhere, so without a
     * fallback those names would simply be undefined on three of the five.
     */
    --color-primary:        var(--primary-accent, #3b82f6);  /* blue-500 */
    --color-primary-strong: #1d4ed8;     /* blue-700 - the dark end of the
                                            gradient the ERP's own buttons
                                            already paint inline */
    --color-primary-soft:   var(--surface-3);

    --color-bg:             var(--surface-0);   /* the shell's ground      */
    --color-surface:        var(--surface-1);   /* a panel on that ground  */

    /* Named for their ROLE rather than their shade.
     *
     * `--text-strong` and `--text-body` are documented above as light-surface
     * values, and on the ERP's dark shell the running text is `--text-muted`.
     * Both are real and both are in use, so `--color-text-primary` points at
     * the one that means "the main text of whatever surface this is on" -
     * which is the light value, because that is what a page written with
     * these names is being written for. On the dark shell, keep reading
     * `--text-muted` from erp-shell.css, as the ERP pages already do. */
    --color-text-primary:   var(--text-strong);
    --color-text-secondary: var(--text-secondary);
    --color-border:         var(--border-subtle);

    /* Status. These already carry meaning and are already used that way
     * across all three products, so these are aliases and nothing more:
     * repainting them for decoration would break what they say. */
    --color-success:        var(--ok);
    --color-warning:        var(--warn);
    --color-error:          var(--danger);
    --color-info:           var(--info);

    /* Focus. a11y.css owns the focus ring itself and loads last, so this only
     * names the colour rather than restating the ring. Deliberately the same
     * blue as the primary: a focus ring in an unrelated colour reads as a
     * different kind of state rather than as position. */
    --color-focus:          var(--color-primary);

    /* Type and spacing under the names a new page is most likely to guess.
     * These POINT AT the existing values rather than shadowing them -
     * re-declaring a name another stylesheet already owns is exactly what
     * broke --tap-min once, and the failure was silent. */
    --font-family:          var(--font-body);
    --font-size-sm:         var(--fs-sm, 0.82rem);
    --font-size-base:       var(--fs-base, 0.92rem);
    --font-size-lg:         var(--fs-lg, 1.05rem);
    --spacing-unit:         var(--sp-1, 4px);

    /* ---- 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.
     */
}