/* DarkDev UI kit: tokens.
 *
 * Every color, size, radius and timing a resource screen uses lives here. Screens
 * read these through var(--name) only; the lint rejects raw hex colors anywhere
 * else. Icons live in icons.css, generated from icons/*.svg by tools/sync_kit.py.
 * Edit this file in ui-kit/ and run tools/sync_kit.py, never the copies
 * inside a resource's web/kit/.
 *
 * Dark is the default (screens sit over the game world). Set data-theme="light"
 * on <html> for the light set. prefers-color-scheme is ignored on purpose: the
 * game browser reports light on most machines.
 */

@font-face {
    font-family: 'Archivo';
    src: url('fonts/archivo-variable.woff2') format('woff2-variations'), url('fonts/archivo-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
}

:root {

    /* Brand: the Dark Dev shop. Gold is the house mark, smalt the ground, show-card stock what you read. */
    --brand-gold: #D4A23A;
    --brand-smalt: #1B2A6B;
    --brand-card: #F4F2EC;
    --brand-red: #D2262E;

    /* Surfaces, darkest to lightest */
    --bg: #0B0E1A;
    --surface-1: #11162E;
    --surface-2: #172044;
    --surface-3: #1E2957;
    --line: #29346A;
    --line-strong: #6E79AA;   /* input borders: 3:1 against panels */
    --backdrop: rgb(4 6 13 / .62);
    --preview-backdrop: #2A3466;

    /* Ink */
    --ink: #F4F2EC;
    --ink-2: #C8CBDC;
    --muted: #9BA1C0;

    /* The one accent: actions, focus, the active tab */
    --accent: #3F63E0;
    --accent-hover: #5577EE;
    --accent-press: #3354C4;
    --accent-ink: #8FA8FF;           /* accent text on dark surfaces */
    --on-accent: #FFFFFF;
    --accent-soft: rgb(63 99 224 / .2);

    /* The script's own name in the title bar: the house gold */
    --title: #E9C774;

    /* Status: always shown with an icon and a word, never color alone */
    --success: #6CC17A;
    --warning: #E2B03C;
    --danger: #FF8C86;
    --info: #8FA8FF;
    --neutral: #9BA1C0;
    --on-status: #0B0E1A;

    /* Data: money in vs money out (checked for color blindness on --surface-1) */
    --data-in: #19A497;
    --data-out: #D46C2E;
    --data-line: #F4F2EC;
    --data-fill: rgb(244 242 236 / .08);
    --data-track: #1E2957;

    /* Type. Root size follows the screen: 14px at 1080p, 28px at 4K. */
    --font: 'Archivo', 'Segoe UI', sans-serif;
    --stretch-body: 100%;
    --stretch-display: 118%;   /* block gothic, as lettered on the shop sign */
    --fs-sm: .8571rem;    /* 12px at 1080p, the smallest text anywhere */
    --fs-base: 1rem;      /* 14px */
    --fs-md: 1.1429rem;   /* 16px */
    --fs-lg: 1.4286rem;   /* 20px */
    --fs-xl: 1.8571rem;   /* 26px */
    --fs-2xl: 2.5714rem;  /* 36px */
    --lh-tight: 1.05;
    --lh-body: 1.45;

    /* Space: tight inside a group, generous between groups */
    --sp-1: .2857rem;  /* 4px */
    --sp-2: .5714rem;  /* 8px */
    --sp-3: .8571rem;  /* 12px */
    --sp-4: 1.1429rem; /* 16px */
    --sp-5: 1.7143rem; /* 24px */
    --sp-6: 2.2857rem; /* 32px */

    /* Shape: cut card stock and machined frames */
    --radius: .1429rem; /* 2px */
    --border: 1px;
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent-hover);
    --shadow-panel: 0 1.5rem 3.5rem -1rem rgb(3 5 14 / .7), 0 .25rem .75rem rgb(3 5 14 / .4);
    --shadow-pop: 0 .75rem 2rem -.5rem rgb(3 5 14 / .65);

    /* Motion */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-fast: 120ms;
    --dur: 220ms;
    --dur-slow: 420ms;

}

:root[data-theme="light"] {

    --bg: #ECE9E1;
    --surface-1: #F8F6F0;
    --surface-2: #EEEBE3;
    --surface-3: #E1DDD2;
    --line: #D6D1C4;
    --line-strong: #7C7768;
    --backdrop: rgb(11 14 26 / .35);
    --preview-backdrop: #B7BFDF;

    --ink: #15130F;
    --ink-2: #3A372F;
    --muted: #5E5A50;

    --accent: #2F52C8;
    --accent-hover: #3F63E0;
    --accent-press: #2544A8;
    --accent-ink: #2846B0;
    --on-accent: #FFFFFF;
    --accent-soft: rgb(47 82 200 / .12);

    --title: #8A6418;

    --success: #276B32;
    --warning: #7A5200;
    --danger: #B3261E;
    --info: #2F5E96;
    --neutral: #5E5A50;
    --on-status: #F8F6F0;

    --data-in: #008A7B;
    --data-out: #B4521A;
    --data-line: #15130F;
    --data-fill: rgb(21 19 15 / .06);
    --data-track: #E1DDD2;

    --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--accent);
    --shadow-panel: 0 1.5rem 3.5rem -1rem rgb(11 14 26 / .28), 0 .25rem .75rem rgb(11 14 26 / .12);
    --shadow-pop: 0 .75rem 2rem -.5rem rgb(11 14 26 / .3);
}

html { font-size: clamp(12px, .7292vw, 32px); }

/* color-scheme goes on the panels, never on :root. FiveM NUI pages are iframes, and
 * Chromium paints an opaque backdrop behind an iframe whose root color-scheme differs
 * from the page around it: the whole game world goes black while the HUD still shows.
 * (Same cause as the AdminKit 4.0.0 black screen.) The lint rejects it on :root. */
.shell, .dialog, .toasts { color-scheme: dark; }
:root[data-theme="light"] .shell,
:root[data-theme="light"] .dialog,
:root[data-theme="light"] .toasts { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}