/*
 * Zeemarq brand tokens — public mirror of resources/css/brand-tokens.css.
 *
 * Served as a static asset for layouts that do NOT load Vite:
 *   - resources/views/layouts/header.blade.php       (merchant chrome)
 *   - resources/views/auth/auth_layout.blade.php     (auth shell)
 *   - resources/views/frontend/layouts/header.blade.php (marketing chrome)
 *   - resources/views/admin/layouts/layout.blade.php (admin chrome)
 *
 * Keep BYTE-IDENTICAL with resources/css/brand-tokens.css.
 * Update both files in the same commit. A future generator script can ship later.
 *
 * Hard rules (brand contract §17 + §18):
 *   - Copper is the seam. ONE element per composition. Never body text.
 *   - Surface ratio (product chrome): Navy 55 · Bone 35 · Copper 10.
 *   - Numbers, codes, IDs, durations, currencies → JetBrains Mono.
 *   - Body copy clears WCAG 2.2 AA. Copper is display-only.
 */

@import url('https://fonts.bunny.net/css?family=inter-tight:400,500,600,700|instrument-serif:400,400i|jetbrains-mono:400,500&display=swap');

:root {
    /* — Brand colour primaries — */
    --zmq-navy:       #1E3A5F;
    --zmq-navy-700:   #15273F;
    --zmq-navy-300:   #5A7BA0;
    --zmq-copper:     #B86A3D;
    --zmq-bone:       #F2EFE8;
    --zmq-bone-tinted:#ECE7DD;
    --zmq-ink:        #0E1014;
    --zmq-white:      #FFFFFF;

    /* — Support / system states — */
    --zmq-slate-500:  #6B6258;
    --zmq-slate-200:  #D9D3C6;
    --zmq-verdigris:  #3F6B5C;
    --zmq-madder:     #8E3A2E;

    /* — Derived state shades (hover / pressed / animation pulse) — */
    --zmq-copper-pressed: #A55E36;
    --zmq-copper-700:     #9A5430;
    --zmq-madder-bright:  #C44A38;

    /* — Typography stacks — */
    --zmq-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --zmq-font-body:    'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --zmq-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* — Type size ladder (per brand contract §17 + §18) — */
    --zmq-size-display:  88px;
    --zmq-size-standard: 40px;
    --zmq-size-compact:  22px;
    --zmq-size-minimum:  16px;

    /* — Geometry — */
    --zmq-radius:       6px;
    --zmq-hairline:     1px solid var(--zmq-slate-200);
    --zmq-focus-width:  2px;
    --zmq-focus-offset: 2px;
}

:focus-visible {
    outline: var(--zmq-focus-width) solid var(--zmq-copper);
    outline-offset: var(--zmq-focus-offset);
}

.zmq-focus {
    outline: var(--zmq-focus-width) solid var(--zmq-copper);
    outline-offset: var(--zmq-focus-offset);
}

.zmq-num {
    font-family: var(--zmq-font-mono);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/*
 * `.zmq-sr-only` — visually-hidden but present for assistive tech. Mirrors the
 * utility defined in the source brand-tokens.css so non-Vite layouts get the
 * same hidden-text contract. WCAG 1.3.1/1.4.1.
 */
.zmq-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}