/*
 * Dallëndyshe brand token layer.
 *
 * The till's design tokens, served statically to the back office and the
 * identity gate. The first :root block below is the body of the `@theme` block
 * in jd-pos-native's packages/pos-ui/resources/css/theme.css, copied verbatim;
 * the second is that file's own :root block, also verbatim. The snapshot this
 * is checked against is resources/brand/theme.css, and its source commit is in
 * resources/brand/theme.source.json.
 *
 * Never edit token names or values here. To update them, re-copy the till's
 * theme.css into the snapshot, record the new commit, then re-copy its blocks
 * here. tests/Feature/BrandTokenLayerTest.php fails until all three agree.
 */

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/fonts/plus-jakarta-sans.ttf') format('truetype');
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

/*
 * Bootstrap 3 sets a 10px root. The till's tokens are in rem, so the root goes
 * back to the browser default for them to render at their intended size.
 */
html {
    font-size: 100%;
}

:root {

    --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;

    /*
     * 11px, not 10: the eyebrow, table heads and status chips carry fiscal state
     * and column names, and 10px functional text sits under the legibility floor
     * on a countertop read at arm's length. The line height is unchanged, so
     * chips and table heads keep the row heights the density tests pin.
     */
    --text-2xs: 0.6875rem;
    --text-2xs--line-height: 0.875rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: 1.125rem;
    --text-xs--letter-spacing: 0em;
    --text-sm: 0.875rem;
    --text-sm--line-height: 1.25rem;
    --text-sm--letter-spacing: 0em;
    --text-base: 1rem;
    --text-base--line-height: 1.5rem;
    --text-base--letter-spacing: 0em;
    --text-lg: 1.125rem;
    --text-lg--line-height: 1.625rem;
    --text-xl: 1.25rem;
    --text-xl--line-height: 1.75rem;
    --text-2xl: 1.75rem;
    --text-2xl--line-height: 2.25rem;
    --text-2xl--letter-spacing: -0.005em;
    --text-3xl: 2.25rem;
    --text-3xl--line-height: 2.75rem;
    --text-3xl--letter-spacing: -0.01em;
    --text-4xl: 3rem;
    --text-4xl--line-height: 3.5rem;
    --text-4xl--letter-spacing: -0.015em;

    /*
     * EFD Flow's brand is three colours: rust #C35D34, navy #102A49 and cream
     * #FDF9F0 (still the ink on navy). Accent is the rust ramp, anchored on the brand rust at 600.
     * The brand rust itself clears only 3.4:1 on navy and 4:1 on cream, so it
     * marks borders, rings and icons; text and the selected fill use 400, which
     * clears 5.5:1 against navy either way round. Navy is not an accent step:
     * it lives at the dark end of the surface ramp and in graphite.
     */
    --color-accent-50: #FBF1EB;
    --color-accent-100: #F7E1D5;
    --color-accent-200: #F0C6B0;
    --color-accent-300: #E8A887;
    --color-accent-400: #E08A62;
    --color-accent-500: #D3714A;
    --color-accent-600: #C35D34;
    --color-accent-700: #A34A27;
    --color-accent-800: #7F3A20;
    --color-accent-900: #5C2B18;
    --color-accent-950: #3A1B0F;

    --color-ink: var(--color-surface-900);
    --color-primary: var(--color-surface-800);
    --color-primary-hover: var(--color-surface-900);
    --color-selected: var(--color-accent-400);
    --color-selected-fg: var(--color-surface-800);

    /*
     * The surface ramp is a value ladder, not a set of near-identical creams.
     * Every step used to land within 2% of #FAF9F4, so a panel, the page it sat
     * on and the input inside it were the same colour and the only thing telling
     * them apart was a hairline — which is why the application read as unedged.
     *
     * 0 is paper: the signed-in work surface, the header, cards, table frames
     * and control fills. 50 is the brand cream, now the modal body and table
     * heads. 100 is chrome sand for small plates. 200-300 are rules and hover
     * fills. 400 is the control border, and the one step that has to hold its
     * own against white.
     *
     * The grounds lean warm, toward the rust (hue ~75, more chroma than before).
     * At #FDF9F0 / #F3EDE0 they sat so close to neutral that, under white cards,
     * the till read as grey; the toasted sand keeps the cream world and stops it
     * going dull. The rule steps follow so a hairline never looks cold beside it.
     */
    --color-surface-0: #FFFFFF;
    --color-surface-50: #FBF6EE;
    --color-surface-100: #F4EADB;
    /*
     * The tray: the light sand under a secondary panel — the sale cart, a
     * receipt's detail pane, a summary beside a list — while the work surface
     * itself is paper. What sits in a tray sits on a paper slip. Muted slate
     * holds 5.7:1 on it, ink 15.1:1. Not a ramp step.
     */
    --color-tray: #F7F1E7;
    /*
     * The hairline: the resting 1px edge of a tile or card on paper, which no
     * longer carries a shadow. Decorative (1.5:1 on paper): a tile's name and
     * price identify it, so the edge only has to separate. Not a ramp step.
     */
    --color-hairline: #E2D3BC;
    --color-surface-200: #E9DCC8;
    --color-surface-250: #DACBB4;
    --color-surface-300: #C2B39B;
    --color-surface-400: #737D8C;
    --color-surface-500: #56606F;
    --color-surface-800: #102A49;
    --color-surface-900: #0B1D33;

    --color-success: oklch(0.5 0.105 168);
    --color-success-soft: oklch(0.962 0.02 168);
    --color-success-ring: oklch(0.862 0.05 168);
    /*
     * Warning is amber, hue 82, not the orange it was at 60. Next to the rust
     * accent at hue ~45 an orange warning read as "selected" and the selected
     * pill read as a warning; the gap in hue is what keeps them apart. 5.4:1
     * against paper.
     */
    --color-warning: oklch(0.53 0.11 82);
    --color-warning-soft: oklch(0.958 0.04 88);
    --color-warning-ring: oklch(0.86 0.08 86);
    --color-danger: oklch(0.515 0.165 28);
    --color-danger-soft: oklch(0.962 0.018 26);
    --color-danger-ring: oklch(0.864 0.05 27);
    --color-info: oklch(0.485 0.155 254);
    --color-info-soft: oklch(0.968 0.01 250);
    --color-info-ring: oklch(0.872 0.045 251);

    --spacing: 0.25rem;

    /* A tick box is 14-24px, so the chip radius rounds it into a radio button. */
    --radius-tick: 0.25rem;
    --radius-chip: 0.5rem;
    --radius-control: 0.5rem;
    --radius-card: 0.75rem;
    /* Corporate clean stops at 12px: a panel, table or modal shares the card's corner. */
    --radius-panel: 0.75rem;

    /*
     * Corporate clean: anything that sits on the ground rests on a small navy
     * contact shadow and finishes with its 1px border. Under a mouse it rises
     * to `lifted` (see the `lift` utility); nothing is heavier than the modal,
     * which is a shadow-lg, not the old 90px throw.
     */
    --shadow-raised: 0 1px 2px 0 oklch(0.27 0.06 255 / 0.08);
    --shadow-lifted: 0 4px 10px -3px oklch(0.27 0.06 255 / 0.18), 0 1px 2px 0 oklch(0.27 0.06 255 / 0.08);
    --shadow-overlay: 0 0 0 1px oklch(0.27 0.06 255 / 0.12);
    --shadow-modal: 0 12px 28px -8px oklch(0.27 0.06 255 / 0.28), 0 4px 10px -6px oklch(0.27 0.06 255 / 0.12);

    --ease-standard: cubic-bezier(0.16, 0, 0.1, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);
}

:root {
    /* Nothing runs longer than 200ms: a till has to feel snappy, not floaty. */
    --duration-fast: 150ms;
    --duration-base: 200ms;

    --focus-width: 2px;
    --focus-offset: 2px;
    --focus-color: #102A49;
    --focus-color-on-dark: #FDF9F0;
    --focus-halo: 0 0 0 4px oklch(0.78 0.11 45 / 0.55);

    --control-height-touch: 3rem;
    --control-height-action: 4rem;
    --control-height-key: 3.75rem;
    --control-height-pin: 4.5rem;
}