/*
 * Inventory design tokens: the one place for colours, fonts, shadows and motion, loaded first on every page.
 * The other style files read these names; sizes and spacing are written where they are used.
 * The colours are the website's (www.mpinv.ae): a calm ivory ground, paper cards, gold as the accent and black
 * only for text. The brochure PDF cannot read tokens (dompdf), so brochure-pdf.css writes the same colours out.
 * Every token has a user: when the last one goes, the token goes too.
 */

/* Garbata, the website's typeface, for page titles, card titles and single figures. It has no even-width
   figures, so numbers that must line up in columns use the text face. Same Bold Latin file as mpinv.ae. */
@font-face {
    font-family: 'Garbata';
    src: url('/fonts/Garbata-Bold-Latin.woff2') format('woff2');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Colour steps (pages use the roles below, not these) ───────────── */
    --ink-950: #0b0909; /* text */
    --espresso: #1d1813; /* the one dark ground: full-screen photos, and the dark layers below */
    --ink-800: #2c2925; /* body text */
    --stone-600: #5f5a51; /* helper text, 6.9:1 on white */
    --stone-500: #6b655c; /* muted text, 5.8:1 on white */
    --stone-400: #8a8377; /* placeholders and disabled; never text a reader needs */
    --line-400: #cfc8bc; /* outline buttons, chips */
    --line-300: #e6e1d8; /* card borders */
    --line-200: #efebe4; /* row rules */
    --sand-100: #f3f0ea; /* quiet fills */
    --paper-100: #f6f2ea; /* the page ground */
    --paper-50: #fbfaf7; /* the sign-in page */
    --white: #ffffff;

    --gold-700: #806225; /* gold as text and icons on light, 5.7:1 */
    --gold-600: #a8843e; /* gold as a mark on light, 3.3:1 */
    --gold-500: #c5a55a; /* brand gold, fills that carry ink text */
    --gold-300: #e6c88b; /* light gold borders */
    --gold-100: #f6ead0; /* gold tint */

    --green-700: #116b3f;
    --green-100: #e5f1ea;
    --red-700: #b3261e;
    --red-100: #fbe8e6;
    --amber-700: #8a5a00;
    --amber-100: #f8eeda;
    --navy-600: #2e4a62;
    --navy-100: #e6ecf1;

    /* ── Roles ─────────────────────────────────────────────────────────── */
    --bg-canvas: var(--paper-100);
    --bg-surface: var(--white);
    --bg-subtle: var(--sand-100);
    --bg-hover: #faf7f1;
    --text-strong: var(--ink-950);
    --text: var(--ink-800);
    --text-muted: var(--stone-600);
    --text-subtle: var(--stone-500);
    --text-disabled: var(--stone-400);
    --text-inverse: var(--white);
    --text-accent: var(--gold-700);
    --border: var(--line-300);
    --border-strong: var(--line-400);
    --border-soft: var(--line-200);
    --focus-ring: var(--ink-950); /* 19:1; gold rings measured 2.2:1 and fail */
    --accent: var(--gold-500);
    --accent-mark: var(--gold-600);
    --accent-soft: var(--gold-100);

    --positive: var(--green-700);
    --positive-bg: var(--green-100);
    --negative: var(--red-700);
    --negative-bg: var(--red-100);
    --success: var(--positive);
    --success-bg: var(--positive-bg);
    --danger: var(--negative);
    --danger-bg: var(--negative-bg);
    --warning: var(--amber-700);
    --warning-bg: var(--amber-100);
    --info: var(--navy-600);
    --info-bg: var(--navy-100);
    --neutral-bg: var(--sand-100);

    /* Side menu: paper like the website header, gold only for "you are here". */
    --nav-bg: var(--white);
    --nav-text: var(--stone-600);
    --nav-text-muted: var(--stone-500);
    --nav-hover: var(--sand-100);
    --nav-active-bg: var(--gold-100);
    --nav-indicator: var(--gold-500);
    --nav-line: var(--line-300);

    /* Layers over the page: the espresso ground, see-through, and white over photos. */
    --scrim: rgba(29, 24, 19, 0.4); /* behind the side menu and the filter panel */
    --scrim-dialog: rgba(29, 24, 19, 0.45); /* behind the share and download windows */
    --photo-veil: rgba(29, 24, 19, 0.55); /* "+18" on the last photo thumbnail */
    --photo-label-bg: rgba(29, 24, 19, 0.72); /* the photo counter */
    --photo-button-bg: rgba(255, 255, 255, 0.92); /* round buttons on a photo */
    --shine: rgba(255, 255, 255, 0.55); /* the light passing along the download bar */
    --top-bar-bg: rgba(246, 242, 234, 0.92); /* the top bar, the page ground seen through */
    --brochure-bar-bg: rgba(246, 242, 234, 0.94); /* the client brochure's top bar */

    /* Unit stages: their bars and dots, and the label of the two pending stages (the other labels use the
       status colours). Other: the fallback for a stage the app does not list. */
    --stage-available: #257a4c;
    --stage-published: #3567b0;
    --stage-highlighted: #c79a35;
    --stage-pending: #c25e86;
    --stage-pending-bg: #f9e8ef;
    --stage-pending-ink: #8e3a5e;
    --stage-other: var(--stone-400);
    /* Report bars that stand for no stage: price ranges, types, bedrooms, places, agents and months. */
    --report-bar: #a97f24;

    /* Each messaging app in its own colour in the share window, dark enough for the white mark. */
    --app-whatsapp: #128c4a;
    --app-telegram: #1c7fb8;
    --app-viber: #6a4fd8;
    --app-messenger: #0068d6;

    /* ── Type ──────────────────────────────────────────────────────────── */
    --font-brand: 'Garbata', 'Source Sans 3', system-ui, sans-serif;
    --font-text: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --fs-body: 14px;
    --lh-body: 20px;
    --fs-label: 12px;
    --fw-regular: 400;

    /* ── Depth and motion ──────────────────────────────────────────────── */
    /* Cards carry structure with a hairline, not a shadow (the website almost never shadows). */
    --shadow-1: 0 1px 2px rgba(20, 16, 11, 0.05); /* sticky bars */
    --shadow-2: 0 8px 24px rgba(11, 9, 9, 0.1); /* menus */
    --shadow-3: 0 28px 70px rgba(11, 9, 9, 0.32); /* windows */
    --shadow-hover: 0 10px 28px rgba(11, 9, 9, 0.08); /* a unit card under the pointer */
    --shadow-sheet: 0 -8px 24px rgba(29, 24, 19, 0.08); /* the sign-in sheet on a phone */
    --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ── Base ─────────────────────────────────────────────────────────── */
body {
    font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-text);
    color: var(--text);
    background: var(--bg-canvas);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums; /* figures in the text face line up */
}
/* One focus ring for the whole app: visible, keyboard only. */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}
/* Anything marked hidden stays hidden, whatever its display. */
[hidden] {
    display: none !important;
}
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}