@import 'tailwindcss';
@import './tokens.css';

@source '../js/**/*.vue';

/*
| ⛔ A4 printing (HANDOFF). Three pages call `window.print()` — the
| attendance register, the quote printout and the customer's copy — and there
| was not one `@media print` rule in the repository.
*/
@import './print.css';

/*
| ⛔ Authored documents — legal texts, agreement texts, the quote a customer
| approves — are markdown and were being read with their `#` and `**` intact
| (08.08.2026). `ScrollToAccept` renders them into `.doc`.
*/
@import './document.css';

/*
| The invoice document (design `39`, EGT-222), printed from both panels.
*/
@import './invoice.css';

/*
| The training certificate (design `52`, EGT-225), printed from both panels
| and previewed from the backoffice.
*/
@import './certificate.css';


/*
| Fonts are served from this repository, not from a CDN. The mockups load them
| from fonts.googleapis.com; in production that is a third party reached on
| every page load, for files that never change.
|
| Two subsets each: `latin` and `latin-ext`. The Turkish letters live in
| latin-ext — without it "ğ", "ş" and "İ" fall back to another family and the
| interface changes typeface mid-sentence.
*/

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
        U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
        U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
        U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
| The handoff's micro step is "10.5/14 · 700 · +1.6px · CAPS" — the upper casing
| is part of the token, not a decision each label makes. Tailwind's font-size
| theme keys carry line height, weight and tracking but not text-transform, so
| the step is completed here and asked for by one name.
*/
@utility microcaps {
    font-size: var(--text-micro);
    line-height: var(--text-micro--line-height);
    font-weight: var(--text-micro--font-weight);
    letter-spacing: var(--text-micro--letter-spacing);
    text-transform: uppercase;
}

/*
| Design `32`'s two grids, asked for by name (EGT-216). The card draws its top
| band as `1fr 1fr 1.2fr` (`32:49`) and its body as a column beside a 480px side
| rail (`32:82`). Neither is on Tailwind's scale, and an arbitrary value in the
| markup is the escape hatch the token rule forbids — so the two measures live
| here, once, where the next card that uses them finds them.
|
| ⚠ `minmax(0, …)` so a long word cannot push a column wider than its share.
*/
@utility grid-cols-card-band {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
}

@utility grid-cols-card-body {
    grid-template-columns: minmax(0, 1fr) 30rem;
}

@layer base {
    html {
        /* Every numeric column lines up. The product is full of them. */
        font-variant-numeric: tabular-nums;
        font-family: var(--font-sans);
    }

    /* 2px accent outline, 2px offset — on every interactive element
       (00 Tokenlar, accessibility). Written once here so no component has to
       remember it, and none may override it. */
    :focus-visible {
        outline: 2px solid var(--color-accent-600);
        outline-offset: 2px;
    }
}