/* =============================================================================
   Atlas V1 — design tokens
   White theme. Every grouped thing is a card on a very light lavender page. Cards are
   told apart by a soft pastel fill (violet, mint, lilac, lavender, rose, peach, sky,
   butter) plus one thin, crisp, dark hairline and a soft two-layer shadow.

   Load order: tokens → base → layout → components → pages
   ========================================================================== */

:root {
    color-scheme: light;

    /* The whole interface is drawn at 90% of its nominal size: the design reads best at the
       "90% zoom" look, and this gives it at the browser's normal 100%. Change this one number
       to scale everything. Browsers do not scale vh units under zoom, so full-height areas use
       --vh-full instead of 100vh. */
    --ui-zoom: 0.9;
    zoom: var(--ui-zoom);
    --vh-full: calc(100vh / var(--ui-zoom));

    /* ---- type --------------------------------------------------------------- */
    --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
    --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Dense on purpose: clarity comes from structure, not from size. */
    --fs-2xs: 10.5px;
    --fs-xs: 11.5px;
    --fs-sm: 12.5px;
    --fs-base: 13.5px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 21px;
    --fs-2xl: 26px;
    --fs-3xl: 32px;

    /* ---- surfaces and ink ----------------------------------------------------- */
    --page: #f7f6fc;
    --surface: #ffffff;
    --surface-2: #fafaff;
    --sunken: #f2f1f8;

    --ink: #1b1834;
    --ink-2: #4b4766;
    --ink-3: #7c7896;
    --ink-4: #a9a6bf;

    /* Thin dark hairlines. --line is the edge of every card. */
    --line: rgba(27, 24, 52, 0.15);
    --line-strong: rgba(27, 24, 52, 0.28);
    --line-soft: rgba(27, 24, 52, 0.08);

    /* ---- brand ---------------------------------------------------------------- */
    --accent: #6d4aff;
    --accent-hover: #5b38f2;
    --accent-soft: #efeaff;
    --accent-ink: #4b2fd0;
    --brand-gradient: linear-gradient(135deg, #7c5cff 0%, #a77bff 45%, #f093c0 100%);

    /* ---- pastels: fill / deeper edge / ink ------------------------------------- */
    --violet-bg: #f2eeff;   --violet-edge: #ddd3ff;   --violet-ink: #5536d6;
    --mint-bg: #e9f8f0;     --mint-edge: #c9eedb;     --mint-ink: #157a52;
    --lilac-bg: #f8effe;    --lilac-edge: #ead5fb;    --lilac-ink: #8a37c8;
    --lavender-bg: #eff0fc; --lavender-edge: #d9dcf6; --lavender-ink: #4a52a8;
    --rose-bg: #fdeff3;     --rose-edge: #f8d2de;     --rose-ink: #bf3360;
    --peach-bg: #fff3ea;    --peach-edge: #fbdcc6;    --peach-ink: #b35a1f;
    --sky-bg: #ebf5fe;      --sky-edge: #cfe5fb;      --sky-ink: #2367ad;
    --butter-bg: #fff9e3;   --butter-edge: #f6e8b0;   --butter-ink: #8d6a00;

    /* Second colour of a duotone icon: the soft fill layer behind the line art. */
    --violet-2: #a78bfa; --mint-2: #34d399; --lilac-2: #e879f9; --lavender-2: #818cf8;
    --rose-2: #fb7185;   --peach-2: #fb923c; --sky-2: #38bdf8;   --butter-2: #facc15;

    /* Semantic aliases. Status always carries a text label too, never colour alone. */
    --ok-bg: var(--mint-bg);     --ok-ink: var(--mint-ink);
    --warn-bg: var(--peach-bg);  --warn-ink: var(--peach-ink);
    --bad-bg: var(--rose-bg);    --bad-ink: var(--rose-ink);
    --info-bg: var(--sky-bg);    --info-ink: var(--sky-ink);

    /* ---- space, shape, depth -------------------------------------------------- */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-full: 999px;

    --shadow-xs: 0 1px 1px rgba(27, 24, 52, 0.04);
    --shadow-sm: 0 1px 2px rgba(27, 24, 52, 0.05), 0 2px 6px rgba(27, 24, 52, 0.04);
    --shadow-md: 0 1px 2px rgba(27, 24, 52, 0.05), 0 8px 24px rgba(27, 24, 52, 0.07);
    --shadow-lg: 0 2px 4px rgba(27, 24, 52, 0.06), 0 20px 48px rgba(27, 24, 52, 0.12);
    --shadow-focus: 0 0 0 3px rgba(109, 74, 255, 0.22);

    --sidebar-w: 240px;
    --topbar-h: 60px;
    --content-max: 1240px;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Printing uses the true size. */
@media print { :root { --ui-zoom: 1; } }