/* ============================================================
   DESIGN TOKENS — v2 (claude-design handoff palette)
   ============================================================
   Single source of truth for the UI rework. Loaded on EVERY page
   (decorated and undecorated) via custom/Custom.css @import.

   Palette source: design_handoff_tracker_admin/README.md
   ("Design Tokens" section) — sky primary #3EB5E0, indigo nav
   #5B5EA6, ink #16202b, pastel status chips, Poppins / Public
   Sans / IBM Plex Mono type stack.

   Rules:
   - New UI styles must reference these variables, never raw hex.
   - Changing brand appearance = changing this file only.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
    /* ── Brand ─────────────────────────────────────────────── */
    --cmw-primary:        #3EB5E0;   /* buttons, active accents  */
    --cmw-primary-dark:   #1e94c4;   /* primary text/links       */
    --cmw-primary-light:  #a9dff2;
    --cmw-primary-tint:   #e7f6fc;   /* active pill / selection  */
    --cmw-primary-ring:   rgba(62, 181, 224, 0.18);
    --cmw-secondary:      #5B5EA6;   /* nav indigo               */

    /* ── Text ──────────────────────────────────────────────── */
    --cmw-ink:            #16202b;   /* headings                 */
    --cmw-text:           #3d4c5c;   /* body text                */
    --cmw-text-muted:     #67788a;   /* secondary text           */
    --cmw-text-faint:     #8fa2b3;   /* hints, placeholders      */

    /* ── Status (pastel chip + ink pairs) ──────────────────── */
    --cmw-success:        #2e7d44;
    /* lighter green for small status text that sits ON a white surface
       and is redundant with a control next to it (the map pill's
       LOCKED DATE tag). 3.4:1 on white, so it is deliberately below the
       4.5:1 AA floor — do NOT reach for this where the colour is the
       only thing carrying the meaning; use --cmw-success (5.1:1). */
    --cmw-success-light:  #2f9e56;
    --cmw-success-bg:     #e6f5ea;
    --cmw-success-border: #bfe6d0;
    --cmw-warning:        #98690f;
    --cmw-warning-ink:    #98690f;
    --cmw-warning-bg:     #fdf3e0;
    --cmw-danger:         #b02a30;
    --cmw-danger-hover:   #96232a;   /* filled danger, pressed   */
    --cmw-danger-bg:      #fdeaea;
    --cmw-neutral-chip-bg:#eef1f4;
    --cmw-neutral-chip:   #5b6b7c;

    /* ── Surfaces & borders ────────────────────────────────── */
    --cmw-surface:        #ffffff;
    --cmw-surface-alt:    #e7f6fc;   /* tinted section / hover   */
    --cmw-surface-soft:   #f5f9fb;   /* page background          */
    --cmw-surface-row:    #fafcfd;   /* subtle row / thead bg    */
    /* zebra rows. Deliberately stronger than surface-soft: a 2-3%
       tint reads as plain white on an ordinary office panel, which is
       how the stripes existed and still "were not there" (user,
       2026-08-19). Sits between soft and the hover alt so a striped
       row still visibly changes under the pointer. */
    --cmw-stripe:         #eef4f8;
    --cmw-border:         #e3ecf2;   /* cards                    */
    --cmw-border-input:   #dce8f0;   /* inputs                   */
    --cmw-border-strong:  #cfe3ee;   /* outlined pills           */
    --cmw-divider:        #f2f7fa;   /* row dividers             */

    /* ── Typography ────────────────────────────────────────── */
    --cmw-font: "Public Sans", -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --cmw-font-display: "Poppins", var(--cmw-font);
    --cmw-font-mono: "IBM Plex Mono", ui-monospace, Consolas,
                     "Courier New", monospace;

    /* ── Shape & elevation ─────────────────────────────────── */
    --cmw-radius-sm:    6px;
    --cmw-radius-field: 8px;    /* inputs                   */
    --cmw-radius:       12px;   /* cards                    */
    --cmw-radius-lg:    12px;
    --cmw-radius-pill:  20px;   /* pills, buttons           */
    --cmw-shadow-sm: 0 1px 3px rgba(22, 32, 43, 0.08);
    --cmw-shadow:    0 4px 16px rgba(22, 32, 43, 0.08);
    --cmw-shadow-primary: 0 2px 8px rgba(62, 181, 224, 0.35);
    --cmw-shadow-drawer:  -12px 0 32px rgba(22, 32, 43, 0.12);
    --cmw-focus-ring: 0 0 0 3px rgba(62, 181, 224, 0.15);

    /* ── Buttons ───────────────────────────────────────────── */
    --cmw-btn-bg:       #3EB5E0;
    --cmw-btn-bg-hover: #2ea6d2;
    --cmw-btn-bg-active:#1e94c4;

    /* ── Controls ──────────────────────────────────────────── */
    --cmw-control-h:    46px;
    --cmw-control-h-sm: 34px;

    /* ── Brand panel (login) — flat ink (claude-design 10a) ─── */
    --cmw-panel-bg: #16202b;
}