/* design-1 — WalletPlatform design tokens (docs/design-system.md §2/§3).
   ISOLATION: every variable lives on [data-ui="wp"], so tokens exist ONLY inside the new shell. Nothing
   global, no element selectors, no Bootstrap class touched. Two chrome contexts via [data-context]. */

/* design-assets — the marketing wordmark font, self-hosted (ported from walloho-website, which self-hosts the
   same @fontsource-variable font — no Google/CDN). Variable (weight axis 200–800), latin subset. Used ONLY by
   .wp-logo (the wordmark); the app body keeps the system stack. url() is relative to this stylesheet. */
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../../lib/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

[data-ui="wp"] {
    /* Brand */
    --wp-blue: #2E8AE0;                 /* action, links, active */
    --wp-blue-hover: #1F76C7;
    --wp-logo-green: #63A85E;           /* wordmark green on white (lowered) */
    --wp-logo-green-bright: #7FC47C;    /* logo mark only — too light for text */
    --wp-link: #14568C;                 /* linked table cells */

    /* design-assets — the marketing wordmark gradient (blue→green, 95deg), ported 1:1 from walloho-website
       (tokens.css --grad). The ONLY allowed gradient: it is the brand wordmark asset, not UI. */
    --wp-logo-grad: linear-gradient(95deg, #3E97E6 0%, #5AAE86 55%, #79C17C 100%);

    /* Accent tints (brand blue) */
    --wp-blue-tint-8: rgba(46,138,224,.08);   /* current-plan card, active nav base */
    --wp-blue-tint-12: rgba(46,138,224,.12);  /* badges */

    /* Status — the only semantic colours (§2) */
    --wp-success-bg: rgba(99,168,94,.12);  --wp-success-text: #2E6B2B;  --wp-success-line: #63A85E;
    --wp-warning-bg: rgba(186,117,23,.10); --wp-warning-text: #854F0B;  --wp-warning-line: #BA7517;
    --wp-error-bg:   rgba(226,75,74,.09);  --wp-error-text:   #A32D2D;  --wp-error-line:   #E24B4A;
    --wp-neutral-bg: rgba(107,114,128,.12);--wp-neutral-text: #444441;  --wp-neutral-line: #6B7280;

    /* Neutral palette */
    --wp-text: #1F2328;
    --wp-text-2: #5B6570;
    --wp-text-muted: #8A929B;
    --wp-icon: #6B7280;                 /* navigation icons — grey monochrome */
    --wp-line: #E3E6E9;                 /* hairline */
    --wp-line-strong: #C9CFD5;          /* input hairline */
    --wp-bg: #F6F7F8;                   /* page background */
    --wp-card: #FFFFFF;                 /* card surface */
    --wp-tile: #F1F3F5;                 /* tinted tile */

    /* Radii */
    --wp-radius-control: 4px;
    --wp-radius-card: 8px;
    --wp-radius-pill: 10px;

    /* Spacing scale — 4 / 8 / 12 / 16 / 20 / 24 */
    --wp-s1: 4px; --wp-s2: 8px; --wp-s3: 12px; --wp-s4: 16px; --wp-s5: 20px; --wp-s6: 24px;

    /* Type scale (§3) */
    --wp-fs-title: 22px;        /* page title, 500 */
    --wp-fs-section: 15px;      /* section title, 500 */
    --wp-fs-formsection: 13px;  /* form section, 500 */
    --wp-fs-body: 12.5px;       /* body / table, 400 */
    --wp-fs-label: 11.5px;      /* label, 400 */
    --wp-fs-caption: 11px;      /* help / caption, 400 */

    /* Two weights only (§3) */
    --wp-fw-regular: 400;
    --wp-fw-medium: 500;

    /* Borders + the only elevation (§3) */
    --wp-hairline: 0.5px;
    --wp-focus-ring: 0 0 0 3px rgba(46,138,224,.14);

    /* Font stack — Segoe UI first, generic system-UI stack as fallback. No external font, no download.
       Annahme: "Segoe UI" bevorzugt (Windows-Zielumgebung), System-UI als Fallback; kein Font-Asset geladen. */
    --wp-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Chrome — default context = tenant (blue). Overridden below per [data-context]. */
    --wp-chrome: #14568C;
    --wp-chrome-text: #FFFFFF;
    --wp-chrome-muted: #B9D4EC;
    --wp-nav-active-tint: rgba(20,86,140,.09);   /* active nav fill = chrome colour ~9% (§4) */
    --wp-nav-active: #14568C;                     /* active nav bar/text/icon = chrome colour (§4) */
}

/* Anwender-Kontext (blue) — explicit, same as the default. */
[data-ui="wp"][data-context="tenant"] {
    --wp-chrome: #14568C;
    --wp-chrome-text: #FFFFFF;
    --wp-chrome-muted: #B9D4EC;
    --wp-nav-active-tint: rgba(20,86,140,.09);
    --wp-nav-active: #14568C;
}

/* Master-Admin-Kontext (bordeaux). Dunkel = Ort; entsättigt, damit die Kopfzeile nicht wie ein Fehler wirkt. */
[data-ui="wp"][data-context="admin"] {
    --wp-chrome: #7B303A;
    --wp-chrome-text: #FFFFFF;
    --wp-chrome-muted: #E3C4C9;
    --wp-nav-active-tint: rgba(123,48,58,.09);
    --wp-nav-active: #7B303A;
}