/* ============================================================================
   GMH design tokens — ground rule 5 (see C:\GMH\CLAUDE.md, "UI Standardization
   Ground Rules"). The single source of truth for the GMH look. Loaded globally
   on every admin page via the GmhNav plugin (config/adminlte.php).

   Use these variables in new work instead of hard-coding colours. Behaviour
   components (drawer/dropdown/datepicker) use Flowbite JS only — never load
   Flowbite's stylesheet (its base reset strips Bootstrap chrome).
   ========================================================================== */
:root {
    /* Brand */
    --gmh-purple:       #9B3BAD;   /* primary — buttons, active states, accents */
    --gmh-purple-deep:  #7E22CE;   /* headings/labels on light purple */
    --gmh-purple-soft:  #F5E9F7;   /* selected/hover fills, chips */
    --gmh-purple-hover: #FAF5FF;   /* row hover */
    --gmh-purple-line:  #EAD6EE;   /* border on soft-purple fills (chips, badges) */
    /* Text ON a purple fill. White here, but INK in dark mode — the dark purple
       lifts to #C084FC and white on it is 2.64:1, which fails WCAG AA. Ink on it
       is 6.71:1. Never hard-code #fff on a purple fill; use this. */
    --gmh-on-purple:    #FFFFFF;

    /* Ink & greys */
    --gmh-ink:          #111827;   /* primary text */
    --gmh-grey:         #6B7280;   /* secondary text */
    --gmh-grey-faint:   #9CA3AF;   /* placeholders, meta */
    --gmh-line:         #E5E7EB;   /* borders */
    --gmh-line-soft:    #F3F4F6;   /* row dividers */
    --gmh-bg:           #F8FAFC;   /* page field (gray-50) */
    --gmh-card:         #FFFFFF;   /* cards */

    /* Status */
    --gmh-green:        #16A34A;
    --gmh-green-soft:   #DCFCE7;
    --gmh-red:          #DC2626;
    --gmh-red-soft:     #FEE2E2;
    --gmh-amber:        #F59E0B;
    --gmh-amber-soft:   #FEF3C7;

    /* Shape & type */
    --gmh-radius:       12px;      /* rounded-xl on cards */
    --gmh-radius-sm:    8px;       /* buttons, inputs */
    --gmh-radius-pill:  9999px;    /* pills, badges */
    --gmh-font:         'Inter', system-ui, sans-serif;

    /* Spacing — ground rule 3: step-3 of the page's framework.
       Bootstrap pages: p-3/m-3 = 1rem. Tailwind pages: p-3/m-3 = 12px. */
    --gmh-gap-bootstrap: 1rem;
    --gmh-gap-tailwind:  12px;
}


/* Semantic classes for HTML emitted from PHP (DataTables action menus, model
   badge maps), where Tailwind arbitrary hexes used to hardcode the brand
   colours outside the token table (Quotations restructure spec 8a). */
.gmh-menu-hover:hover {
    background: var(--gmh-purple-hover);
    color: var(--gmh-purple-deep);
}
.gmh-chip-purple {
    color: var(--gmh-purple-deep);
    background: var(--gmh-purple-soft);
    border-color: var(--gmh-purple-line);
}

/* Primary quick-action tile (quotations dashboard): brand fill from tokens. */
.gmh-tile-primary { background: var(--gmh-purple); color: var(--gmh-on-purple, #fff); }
.gmh-tile-primary .text-xs { color: var(--gmh-purple-soft); }