/* Copied verbatim from gabig-web-app/src/components/ui/tokens.css — the shared
   gäbig design tokens (app + website). Update it there first, then copy it here. */

/* =============================================================
   Design tokens for the new (plain-CSS) component system.

   Defined at :root so every scoped component stylesheet can consume
   them with var(), instead of re-declaring the palette per scope or
   hardcoding hex literals. Dark mode flips the semantic layer only —
   the raw palette stays fixed, exactly as the tables did it first in
   order-shared/orderShared.css.

   See STYLING.md. Never hardcode a colour that exists here.
   ============================================================= */

:root {
    /* ---- Raw palette (theme-independent) ---- */
    --brand-900: #1b0e58;
    --brand-700: #36258e;
    --brand-500: #6952dd;
    --brand-400: #907eea;
    --brand-300: #ad9ff4;
    --brand-200: #cec6f1;
    --brand-100: #ddd8f8;
    --n-900: #1a1816;
    --n-800: #262421;
    --n-700: #383530;
    --n-600: #4f4c47;
    --n-500: #6b6860;
    --n-400: #c7bfaf;
    --n-300: #e3ded3;
    --n-200: #f2eee6;
    --n-100: #fffcf7;
    --n-000: #ffffff;
    --egg-100: #fffef7;
    --egg-200: #fffef0;
    --sem-warning: #ff7435;
    --sem-success: #60bf30;
    --sem-error: #db3030;
    --sem-info: #21b5ff;
    --p-a-500: #92f48c;
    --p-c-500: #ffca6e;
    --p-d-500: #ff8f6a;
    --p-e-500: #ff7cb5;
    --p-f-500: #9de4f2;
    --p-b-500: #fdf169;
    --p-a-100: #d1fece;
    --p-c-100: #ffedce;
    --p-d-100: #ffd1c2;
    --p-e-100: #ffc5de;
    --p-f-100: #ebfcff;

    /* ---- Semantic layer (flipped by [data-theme='dark']) ---- */
    --surface: var(--n-100);
    --surface-2: var(--egg-100);
    --surface-sunken: var(--n-200);
    --ink: var(--n-900);
    --ink-2: var(--n-600);
    --ink-3: var(--n-500);
    --line: rgba(54, 37, 142, 0.1);
    --line-strong: rgba(54, 37, 142, 0.18);
    --line-soft: rgba(54, 37, 142, 0.06);
    /* Hover/active border intensification — one tier above --line-strong. */
    --line-hover: rgba(54, 37, 142, 0.3);
    --accent: var(--brand-500);
    --accent-ink: var(--brand-700);
    --accent-strong: var(--brand-900);
    --accent-soft: var(--brand-100);

    /* ---- Shape ---- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 20px;
    --shadow-md:
        0 1px 0 rgba(54, 37, 142, 0.06),
        0 20px 40px -24px rgba(27, 14, 88, 0.22);

    --ui-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --mono-font: ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-theme='dark'] {
    --surface: #211f1c;
    --surface-2: #1b1916;
    --surface-sunken: #262421;
    --ink: #f7f3ea;
    --ink-2: #bdb6a8;
    --ink-3: #8f897d;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --line-soft: rgba(255, 255, 255, 0.05);
    --line-hover: rgba(255, 255, 255, 0.28);
    --accent: var(--brand-400);
    --accent-ink: var(--brand-300);
    --accent-strong: var(--brand-200);
    --accent-soft: rgba(144, 126, 234, 0.18);
}