/* =============================================================================
   metta-tokens.css — design tokens for the 2026 redesign
   Source of truth: "Metta Design System.dc.html" (Claude Design project
   1887c093-d235-4ee4-bc48-3efdfe4fe900), shared verbatim by both the Web App
   and Mobile prototypes.

   This file only DECLARES custom properties. It changes nothing on its own —
   rules that consume these live in metta-ui.css. Loaded after tokens.css and
   app.css so the new values win, before metta-ui.css so they are available.

   Naming: the prototypes use --bg2 / --text2 / --text4 / --ai-fg where the
   legacy metta tokens use --bg-2 / --text-2 / --text-4 / --ai-text. Both
   spellings are defined here so prototype markup can be pasted unedited.
   ========================================================================== */

:root,
:root[data-theme="light"] {
    /* ---- prototype spellings of existing tokens ------------------------- */
    --bg2:          var(--bg-2);
    --text2:        var(--text-2);
    --text4:        var(--text-4);

    /* ---- new surfaces: Liquid Glass ------------------------------------- */
    /* Glass = translucent surface + blur(24px) + 1px border. NEVER a shadow. */
    --glass:        rgba(255, 255, 255, .72);
    --glass2:       rgba(245, 247, 249, .84);
    --glass-blur:   24px;

    /* ---- new fills ------------------------------------------------------ */
    --border2:      #e7eaee;                 /* subtle divider, softer than --border */
    --chip:         rgba(0, 0, 0, .05);      /* neutral chip / tag background */
    --track:        rgba(0, 0, 0, .09);      /* progress + slider track */
    --field:        rgba(0, 0, 0, .04);      /* form field background */
    --row:          rgba(0, 0, 0, .015);     /* zebra row on data tables */
    --accent-ink:   #ffffff;                 /* text ON an accent-filled button */
    --ai-fg:        #4548d9;                 /* AI foreground text */

    /* Light-mode warning text. --warn (#ffb700) is legible as a fill but not
       as text on white; use --warn-ink for warn-coloured TEXT in light mode.
       --warn itself is deliberately left untouched: it colours desktop badges,
       the preview-role banner and the "working" board status. */
    --warn-ink:     #e0a000;

    /* ---- QA / QC document types ----------------------------------------- */
    /* Brand values, matching App\Models\QcForm::types(). Views must read these
       CSS variables rather than the PHP hex so dark mode can override them. */
    --qa-ncr:       #e11d48;
    --qa-def:       #f59e0b;
    --qa-wir:       #0ea5e9;
    --qa-maf:       #7c3aed;
    --qa-mos:       #059669;
    --qa-fwa:       #0891b2;
    --qa-ncr-soft:  rgba(225,  29,  72, .10);
    --qa-def-soft:  rgba(245, 158,  11, .12);
    --qa-wir-soft:  rgba( 14, 165, 233, .12);
    --qa-maf-soft:  rgba(124,  58, 237, .12);
    --qa-mos-soft:  rgba(  5, 150, 105, .12);
    --qa-fwa-soft:  rgba(  8, 145, 178, .12);

    /* ---- board status vocabulary ---------------------------------------- */
    /* Mirrors App\Models\Task::BOARD_STATUSES. */
    --st-not-started: var(--text-4);
    --st-working:     var(--warn);
    --st-stuck:       var(--danger);
    --st-done:        var(--accent);

    /* ---- component metrics --------------------------------------------- */
    --btn-h:        52px;
    --btn-r:        14px;
    --input-h:      52px;
    --input-r:      12px;
    --card-r:       16px;
    --tap:          48px;   /* minimum touch target — gloved hands */
    --tabbar-h:     58px;

    /* ---- safe areas ----------------------------------------------------- */
    --safe-t:       env(safe-area-inset-top, 0px);
    --safe-b:       env(safe-area-inset-bottom, 0px);
    --safe-l:       env(safe-area-inset-left, 0px);
    --safe-r:       env(safe-area-inset-right, 0px);
    --tabbar-total: calc(var(--tabbar-h) + var(--safe-b));
}

:root[data-theme="dark"] {
    --glass:        rgba(38, 39, 44, .62);
    --glass2:       rgba(20, 22, 26, .74);

    --border2:      #35373e;
    --chip:         rgba(255, 255, 255, .06);
    --track:        rgba(255, 255, 255, .09);
    --field:        rgba(20, 22, 26, .60);
    --row:          rgba(255, 255, 255, .02);
    --accent-ink:   #062b1e;
    --ai-fg:        #a5a8ff;

    --warn-ink:     var(--warn);   /* #ffb700 reads fine on dark */

    /* Brand QA hues are too dark on #14161a — brightened per the design system
       while keeping the same hue family, so the two stay recognisably paired. */
    --qa-ncr:       #fb7185;
    --qa-def:       #f59e0b;
    --qa-wir:       #38bdf8;
    --qa-maf:       #a78bfa;
    --qa-mos:       #34d399;
    --qa-fwa:       #22d3ee;
    --qa-ncr-soft:  rgba(225,  29,  72, .18);
    --qa-def-soft:  rgba(245, 158,  11, .16);
    --qa-wir-soft:  rgba( 14, 165, 233, .16);
    --qa-maf-soft:  rgba(124,  58, 237, .18);
    --qa-mos-soft:  rgba(  5, 150, 105, .18);
    --qa-fwa-soft:  rgba(  8, 145, 178, .18);
}