/**
 * GRIP — design-tokens (gedeeld). Golf 3, 2026-09-30.
 *
 * Eén bron voor fonts en custom properties (merk, typografie, spacing,
 * radius, surfaces, tekst, status, categorie, kleurfamilies, gradients) in
 * licht én donker ([data-bs-theme="dark"], gezet door theme.js).
 *
 * Gebruikers:
 *   - style.css importeert dit bestand als eerste regel (app, index.html);
 *   - loan-sign.html en privacy.html linken het direct, zodat de publieke
 *     pagina's dezelfde taal spreken zonder de hele app-stylesheet.
 * Alleen tokens + @font-face: géén selectors die elementen stylen. Wie
 * hier iets toevoegt, hoogt de ?v= op in style.css (@import), loan-sign.html
 * en privacy.html.
 */
/* ============================================
   FONTS — self-hosted (CSP font-src 'self'; AVG-safe, geen Google Fonts)
   Inter (tekst) + Plus Jakarta Sans (koppen) — EduNexus-huisstijl.
   Bron: @fontsource, SIL Open Font License (zie assets/fonts/*-OFL.txt).
   url() resolvet t.o.v. dit CSS-bestand (../fonts/), niet t.o.v. <base>.
   ============================================ */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/jakarta-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/jakarta-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/jakarta-800.woff2') format('woff2'); }

/* ============================================
   TOKENS — Craft × Sequel (taak 20260927-001, spec Rik §3)
   Bestaande namen blijven; waarden verschuiven naar warm-neutraal.
   Merk (magenta, gradient, logo) ligt vast. Tenants mogen UITSLUITEND
   --brand-accent overriden (organizations.brand_accent → tenant-theme.php);
   dat accent is ALLEEN decoratief (indicatoren, geen tekst/fill achter tekst).
   ============================================ */
:root {
    /* ---------- Brand (ONGEWIJZIGD, identiteit) ---------- */
    --brand-primary: #E91E8C;
    --brand-primary-rgb: 233, 30, 140;
    --brand-primary-light: #EC4899;
    --brand-primary-dark: #BE185D;
    --brand-primary-text: #BE185D;                 /* 6.04:1 op wit, 5.55:1 op paper */
    --brand-gradient: linear-gradient(135deg, #F97316 0%, #E91E8C 38%, #9C27B0 68%, #00BCD4 100%);
    --brand-gradient-hover: linear-gradient(135deg, #E1660F 0%, #C81879 38%, #7E1F90 68%, #00A5BA 100%);
    --brand-gradient-btn: linear-gradient(135deg, #D6197D 0%, #9C27B0 100%);        /* blijft bestaan; alleen nog .btn-sso */
    --brand-gradient-btn-hover: linear-gradient(135deg, #BE185D 0%, #7E1F90 100%);
    --brand-accent: #F97316;                       /* tenant-override via tenant-theme.php; ALLEEN decoratief */
    --brand-cyan: #00BCD4;
    --brand-name: 'GRIP';

    /* NIEUW: solide merk-fill voor primary controls (vervangt gradient-buttons) */
    --brand-solid: #BE185D;                        /* wit erop 6.04:1 */
    --brand-solid-hover: #9D174D;                  /* wit erop 7.88:1 */
    --on-brand: #FFFFFF;
    --brand-tint: rgba(var(--brand-primary-rgb), 0.10);        /* selectie, actief nav-item */
    --brand-tint-strong: rgba(var(--brand-primary-rgb), 0.16);

    /* ---------- Typografie ---------- */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --fs-display: 36px;   --lh-display: 1.1;     /* alleen dashboard-hero-getal, optioneel */
    --fs-title: 28px;     --lh-title: 1.2;       /* page title (mobiel 24px) */
    --fs-section: 20px;   --lh-section: 1.3;     /* section header */
    --fs-card-title: 16px;--lh-card-title: 1.35;
    --fs-body-lg: 15px;   --lh-body-lg: 1.5;     /* lead, detailwaarden, lopende tekst */
    --fs-body: 14px;      --lh-body: 1.5;        /* UI-basis blijft 14 (werk-tool, dichte tabellen) */
    --fs-meta: 13px;      --lh-meta: 1.4;
    --fs-micro: 12px;     --lh-micro: 1.35;
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
    --tracking-tight: -0.015em;                  /* titels >= 20px */

    /* ---------- Spacing (4-pt schaal) ---------- */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
    --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
    --canvas-pad-x: var(--space-10);             /* 40 desktop; zie responsive */
    --canvas-pad-y: var(--space-8);
    --prose-max: 72ch;

    /* ---------- Radius (hiërarchie: klein control → grote surface) ---------- */
    --radius-xs: 6px;     /* badge-hoek, checkbox, skeleton-tekst */
    --radius-sm: 8px;     /* icon-knop, dropdown-item, segment-thumb, btn-sm */
    --radius-md: 10px;    /* knop, input, nav-item */
    --radius-lg: 12px;    /* dropdown/popover, segmented-container, alert/notice */
    --radius-xl: 16px;    /* content card */
    --radius-2xl: 22px;   /* modal/sheet, hero surface */
    --radius-pill: 999px; /* statuspill, nav-counter */
    --border-radius: var(--radius-xl);           /* legacy alias, zelfde waarde 16 */
    --border-radius-sm: var(--radius-md);        /* legacy alias, zelfde waarde 10 */

    /* ---------- Surfaces: 5 lagen ---------- */
    --paper-bg: #F7F5F2;                         /* 1 canvas (ongewijzigd) */
    --paper-bg-alt: #F7F5F2;                     /* canvas-gradient vervalt: vlak */
    --surface-canvas: var(--paper-bg);
    --surface-nav: #F1EEEA;                      /* 2 sidebar: zachte tint, opaak */
    --surface: #FFFFFF;                          /* 3 content (cards, tabellen) */
    --surface-raised: #FFFFFF;                   /* 4 dropdown, toast, sticky bars (+ --shadow-2) */
    --surface-overlay: #FFFFFF;                  /* 5 modal/popover (+ --shadow-3) */
    --surface-2: #F6F4F1;                        /* stil vlak BINNEN content (notitie, code, kaart-in-kaart) */
    --fill-quiet: rgba(28, 25, 23, 0.05);        /* secondary button, hover nav-item */
    --fill-quiet-hover: rgba(28, 25, 23, 0.09);
    --row-hover: rgba(28, 25, 23, 0.03);
    --scrim: rgba(20, 18, 16, 0.32);

    /* ---------- Tekst-hiërarchie ---------- */
    --text-strong: #1F1D1B;                      /* titels: 15.4:1 op paper */
    --text: #2E2B28;                             /* body */
    --text-2: #4A4641;                           /* labels: 9.4:1 op wit */
    --muted: #6B6660;                            /* metadata: 5.68 wit / 5.22 paper / AA */
    --muted-2: #8A857E;                          /* ALLEEN iconen/decoratief (3.36:1 paper) */

    /* ---------- Lijnen ---------- */
    --hairline: rgba(28, 25, 23, 0.07);          /* card-rand, rij-scheiding */
    --border: rgba(28, 25, 23, 0.12);            /* inputs, thead-lijn */
    --border-strong: rgba(28, 25, 23, 0.20);     /* input-hover */

    /* ---------- Elevation: zacht en diffuus, neutraal (geen magenta-tint meer) ---------- */
    --shadow-1: 0 1px 2px rgba(28, 25, 23, 0.04), 0 1px 1px rgba(28, 25, 23, 0.02);
    --shadow-2: 0 2px 6px rgba(28, 25, 23, 0.04), 0 8px 24px rgba(28, 25, 23, 0.07);
    --shadow-3: 0 4px 12px rgba(28, 25, 23, 0.06), 0 24px 56px rgba(28, 25, 23, 0.12);
    /* Kaart-schaduw: breed, zacht, diffuus en neutraal (designtaal §8) — nooit
       brand-getint. Hover tilt licht naar een iets bredere spreiding. */
    --shadow-card: 0 1px 2px rgba(28, 25, 23, 0.04), 0 8px 24px -6px rgba(28, 25, 23, 0.08), 0 24px 48px -16px rgba(28, 25, 23, 0.10);
    --shadow-card-hover: 0 1px 2px rgba(28, 25, 23, 0.05), 0 12px 32px -6px rgba(28, 25, 23, 0.11), 0 32px 64px -18px rgba(28, 25, 23, 0.14);
    /* Kaartranden: logo-gradient boven, tenant-accent onder (decoratief) */
    --card-edge-top: 4px;
    --card-edge-bottom: 3px;

    /* ---------- Motion ---------- */
    --dur-1: 120ms;   /* press, kleur */
    --dur-2: 180ms;   /* hover, micro */
    --dur-3: 240ms;   /* menu, expand */
    --dur-4: 320ms;   /* modal, drawer */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --transition-fast: var(--dur-2) var(--ease-standard);     /* legacy alias */
    --transition-smooth: var(--dur-3) var(--ease-out);        /* legacy alias */

    /* ---------- Glass: ALLEEN zwevende chrome (topbar, toast, mobiele actiebalk) ---------- */
    --glass-bg: rgba(247, 245, 242, 0.78);
    --glass-bg-strong: rgba(255, 255, 255, 0.86);
    --glass-border: rgba(255, 255, 255, 0.6);                 /* edge highlight */
    --glass-blur: blur(20px) saturate(1.8);
    --glass-shadow: var(--shadow-1);                          /* legacy: .card gebruikt dit nog */

    /* ---------- Legacy aliassen (worden door modules gebruikt) ---------- */
    --card-header-bg: transparent;
    --thead-bg: transparent;
    --overlay-bg: rgba(247, 245, 242, 0.8);
    --focus-ring: #BE185D;                                    /* >=3:1 op wit, paper, nav, tint */
    --scrollbar-thumb: rgba(28, 25, 23, 0.18);

    /* ---------- Status (stoplicht) — tekst AA op eigen bg én op wit ---------- */
    --status-ok-fg: #047857;     --status-ok-bg: #ECFDF5;      /* 5.21:1 */
    --status-warn-fg: #B45309;   --status-warn-bg: #FFFBEB;    /* 4.84:1 */
    --status-risk-fg: #B91C1C;   --status-risk-bg: #FEF2F2;    /* 5.91:1 */
    --status-info-fg: #1D4ED8;   --status-info-bg: #EFF4FB;    /* 6.06:1 (ook "Uitgesteld") */
    --status-neutral-fg: var(--muted); --status-neutral-bg: var(--surface-2);

    /* ---------- Categorie (device-type), bewust GEEN stoplichtkleuren of magenta ---------- */
    --cat-laptop: #4F46E5;   /* indigo */
    --cat-tablet: #0284C7;   /* sky, alleen icoon (4.1:1) */
    --cat-desktop: #7C3AED;  /* violet */
    --cat-phone: #0F766E;    /* teal */
    --cat-other: #475569;    /* slate: beamer, display, printer, netwerk, overig */
    --cat-tint-alpha: 0.10;

    /* ---------- Layout ---------- */
    --sidebar-width: 260px;
    --sidebar-bg: var(--surface-nav);
    --sidebar-text: #4A4641;                                  /* 8.17:1 op nav */
    --header-height: 56px;                                    /* was 70 */

    color-scheme: light;

    /* ---------- Bootstrap-mapping (NIEUW voor light: stopt het blauw-lek, A8) ---------- */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--text);
    --bs-body-bg: var(--paper-bg);
    --bs-emphasis-color: var(--text-strong);
    --bs-secondary-color: var(--muted);
    --bs-border-color: var(--border);
    --bs-heading-color: var(--text-strong);
    --bs-primary: #BE185D;
    --bs-primary-rgb: 190, 24, 93;
    --bs-link-color: #BE185D;
    --bs-link-color-rgb: 190, 24, 93;
    --bs-link-hover-color: #9D174D;
    --bs-link-hover-color-rgb: 157, 23, 77;
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
}

/* ============================================
   DARK MODE — tokens
   Geactiveerd via data-bs-theme="dark" op <html> (theme.js: licht /
   donker / automatisch). Brand-identiteit blijft; neutrale lagen keren om,
   surfaces stijgen via luminance, schaduw wijkt voor edge-highlight.
   ============================================ */
[data-bs-theme="dark"] {
    color-scheme: dark;

    --brand-primary-text: #F472B6;               /* 6.74:1 op content */
    --brand-solid: #D6197D;                      /* wit erop 4.89:1 (#E91E8C haalt maar 4.18) */
    --brand-solid-hover: #BE185D;                /* wit 6.04:1 */
    --brand-tint: rgba(var(--brand-primary-rgb), 0.16);
    --brand-tint-strong: rgba(var(--brand-primary-rgb), 0.24);

    /* 5 lagen: near-black canvas, surfaces stijgen via luminance */
    --paper-bg: #0E0E12;
    --paper-bg-alt: #0E0E12;
    --surface-nav: #131318;
    --surface: #17171C;
    --surface-raised: #1F1F26;
    --surface-overlay: #22222A;
    --surface-2: #1C1C22;
    --fill-quiet: rgba(255, 255, 255, 0.07);
    --fill-quiet-hover: rgba(255, 255, 255, 0.11);
    --row-hover: rgba(255, 255, 255, 0.035);
    --scrim: rgba(0, 0, 0, 0.55);

    --text-strong: #F5F4F2;
    --text: #ECEBE8;                             /* 14.98:1 op content */
    --text-2: #C9C6C0;
    --muted: #A3A09A;                            /* 6.85:1 op content */
    --muted-2: #7D7A75;                          /* alleen iconen */

    --hairline: rgba(255, 255, 255, 0.07);
    --border: rgba(255, 255, 255, 0.11);
    --border-strong: rgba(255, 255, 255, 0.18);

    /* schaduw wijkt voor luminance + edge-highlight */
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 64px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 32px -8px rgba(0, 0, 0, 0.45);
    --shadow-card-hover: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 16px 40px -8px rgba(0, 0, 0, 0.55);

    --glass-bg: rgba(14, 14, 18, 0.72);
    --glass-bg-strong: rgba(23, 23, 28, 0.86);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: var(--shadow-1);
    --overlay-bg: rgba(14, 14, 18, 0.8);
    --focus-ring: #F9A8D4;                       /* 10.6:1 op canvas */
    --scrollbar-thumb: rgba(255, 255, 255, 0.16);

    --status-ok-fg: #6EE7B7;   --status-ok-bg: rgba(16, 185, 129, 0.14);
    --status-warn-fg: #FCD34D; --status-warn-bg: rgba(245, 158, 11, 0.14);
    --status-risk-fg: #FCA5A5; --status-risk-bg: rgba(239, 68, 68, 0.14);
    --status-info-fg: #93C5FD; --status-info-bg: rgba(96, 165, 250, 0.12);

    --cat-laptop: #A5B4FC; --cat-tablet: #7DD3FC; --cat-desktop: #C4B5FD;
    --cat-phone: #5EEAD4;  --cat-other: #CBD5E1;  --cat-tint-alpha: 0.16;

    --sidebar-bg: var(--surface-nav);
    --sidebar-text: #C9C6C0;

    --bs-body-bg: #0E0E12;
    --bs-body-color: #ECEBE8;
    --bs-emphasis-color: #F5F4F2;
    --bs-secondary-color: #A3A09A;
    --bs-tertiary-color: rgba(236, 235, 232, 0.5);
    --bs-secondary-bg: #17171C;
    --bs-tertiary-bg: #1C1C22;
    --bs-border-color: rgba(255, 255, 255, 0.11);
    --bs-heading-color: #F5F4F2;
    --bs-primary: #F472B6;
    --bs-primary-rgb: 244, 114, 182;
    --bs-link-color: #F472B6;
    --bs-link-hover-color: #F9A8D4;
    --bs-link-color-rgb: 244, 114, 182;
    --bs-link-hover-color-rgb: 249, 168, 212;
    --bs-code-color: #F9A8D4;
}

/* Responsive canvas-padding (spec §6) */
@media (max-width: 1199.98px) { :root { --canvas-pad-x: var(--space-8); } }
@media (max-width: 991.98px)  { :root { --canvas-pad-x: var(--space-6); --canvas-pad-y: var(--space-6); } }
@media (max-width: 767.98px)  { :root { --canvas-pad-x: var(--space-4); --canvas-pad-y: var(--space-4); --fs-title: 24px; } }

/* ============================================
   BOOTSTRAP-MAPPING — componenten die hun kleur niet uit --bs-primary
   halen maar uit gecompileerde waarden (A8: hard #0d6efd in bootstrap.min.css)
   ============================================ */
/* Aanvulling op §3: de *-subtle/-emphasis-varianten zijn in Bootstrap
   gecompileerd blauw (#cfe2ff/#052c65) en lekten via .bg-primary-subtle,
   .text-primary-emphasis en .border-primary-subtle (o.a. devices-chip). */
:root {
    --bs-primary-bg-subtle: #FCE7F3;
    --bs-primary-text-emphasis: #9D174D;             /* 8.1:1 op #FCE7F3 */
    --bs-primary-border-subtle: #F9A8D4;
    --bs-focus-ring-color: color-mix(in srgb, var(--focus-ring) 25%, transparent);
}
[data-bs-theme="dark"] {
    --bs-primary-bg-subtle: rgba(233, 30, 140, 0.16);
    --bs-primary-text-emphasis: #F9A8D4;
    --bs-primary-border-subtle: rgba(244, 114, 182, 0.35);
}

/* ============================================
   KLEURFAMILIES — semantisch kleurmodel (designtaal "neutral canvas + soft
   chromatic surfaces + strong chromatic foregrounds + selective gradients")
   Per familie drie niveaus:
     -strong → iconen, waarden, kernlabels (AA >= 4.5:1 op -soft én op surface)
     -medium → progressbalken, topstrepen, stippen (decoratief/ondersteunend)
     -soft   → icon-containers, metric-tegels, pills (achtergrondvlak)
   Betekenis (owner-besluit B1, 2026-09-30 — houd dit consequent):
     DOMEIN (categorie):  indigo = devices · teal = telefonie · cyan = software ·
                          slate = netwerk én neutraal/overig · violet = planning & geld ·
                          brand = merk/identiteit (bruikleen, eyebrow)
     STATUS (alleen status, nooit categorie): green = ok/geleverd ·
                          amber = aandacht/binnenkort · rose = risico/mislukt ·
                          blue = info/in behandeling
   Contrast light (strong op soft): brand 5.14 · indigo 6.93 · violet 6.15 ·
   blue 5.85 · cyan 4.78 · teal 4.83 · green 4.88 · amber 5.40 · rose 5.39 ·
   slate 6.69.
   Dark is opnieuw ontworpen (300-tint op diep getinte surface), geen kopie:
   strong op soft 8.7–11.0.
   ============================================ */
:root {
    --c-brand-strong: #BE185D;  --c-brand-medium: #EC4899;  --c-brand-soft: #FCE7F3;
    --c-indigo-strong: #4338CA; --c-indigo-medium: #818CF8; --c-indigo-soft: #EEEFFE;
    --c-violet-strong: #6D28D9; --c-violet-medium: #A78BFA; --c-violet-soft: #F1ECFE;
    --c-teal-strong: #0F766E;   --c-teal-medium: #2DD4BF;   --c-teal-soft: #E1F5F1;
    --c-blue-strong: #1D4ED8;   --c-blue-medium: #60A5FA;   --c-blue-soft: #E8F0FE;
    --c-cyan-strong: #0E7490;   --c-cyan-medium: #22C3DA;   --c-cyan-soft: #E0F6F9;
    --c-green-strong: #047857;  --c-green-medium: #34D399;  --c-green-soft: #E3F6EE;
    --c-amber-strong: #A3480A;  --c-amber-medium: #F5A524;  --c-amber-soft: #FEF1DC;
    --c-rose-strong: #BE123C;   --c-rose-medium: #FB7185;   --c-rose-soft: #FFE8EC;
    --c-slate-strong: #475569;  --c-slate-medium: #94A3B8;  --c-slate-soft: #EEF1F5;

    /* Action gradient: primaire knop. Wit erop: 4.89:1 (#D6197D) → 5.66 (midden)
       → 6.30:1 (#9C27B0). Hover donkerder: 6.04 → 8.45. */
    --gradient-action: linear-gradient(135deg, #D6197D 0%, #9C27B0 100%);
    --gradient-action-hover: linear-gradient(135deg, #BE185D 0%, #7E1F90 100%);
    /* Atmospheric gradient: logo-palet op lage opacity, voor hero-surfaces.
       Tekst erop blijft AA (muted >= 4.55:1 op de sterkste tint). */
    --gradient-atmospheric: linear-gradient(120deg,
        rgba(249, 115, 22, 0.13) 0%,
        rgba(233, 30, 140, 0.08) 38%,
        rgba(156, 39, 176, 0.07) 64%,
        rgba(0, 188, 212, 0.12) 100%);
    /* Gradient-tekst (hero-KPI): verdiepte logo-stops, elk >= 4.49:1 op de
       getinte hero (grote tekst vraagt 3:1). */
    --gradient-text: linear-gradient(100deg, #C2410C 0%, #BE185D 38%, #7E22CE 70%, #0E7490 100%);
    /* Gradient-balk (hero-voortgang): het echte logo-palet, puur decoratief. */
    --gradient-bar: var(--brand-gradient);
}
[data-bs-theme="dark"] {
    --c-brand-strong: #F9A8D4;  --c-brand-medium: #EC4899;  --c-brand-soft: #2A1523;
    --c-indigo-strong: #A5B4FC; --c-indigo-medium: #6366F1; --c-indigo-soft: #1C1E3A;
    --c-violet-strong: #C4B5FD; --c-violet-medium: #8B5CF6; --c-violet-soft: #221C38;
    --c-teal-strong: #5EEAD4;   --c-teal-medium: #14B8A6;   --c-teal-soft: #0F2926;
    --c-blue-strong: #93C5FD;   --c-blue-medium: #3B82F6;   --c-blue-soft: #16223A;
    --c-cyan-strong: #67E8F9;   --c-cyan-medium: #06B6D4;   --c-cyan-soft: #0E2A31;
    --c-green-strong: #6EE7B7;  --c-green-medium: #10B981;  --c-green-soft: #112A21;
    --c-amber-strong: #FCD34D;  --c-amber-medium: #F59E0B;  --c-amber-soft: #2B2112;
    --c-rose-strong: #FDA4AF;   --c-rose-medium: #F43F5E;   --c-rose-soft: #2F1820;
    --c-slate-strong: #CBD5E1;  --c-slate-medium: #64748B;  --c-slate-soft: #1F232B;

    --gradient-action: linear-gradient(135deg, #D6197D 0%, #9C27B0 100%);
    --gradient-action-hover: linear-gradient(135deg, #E0268A 0%, #A93BBD 100%);
    --gradient-atmospheric: linear-gradient(120deg,
        rgba(249, 115, 22, 0.14) 0%,
        rgba(233, 30, 140, 0.10) 38%,
        rgba(156, 39, 176, 0.10) 64%,
        rgba(0, 188, 212, 0.12) 100%);
    --gradient-text: linear-gradient(100deg, #FDBA74 0%, #F9A8D4 38%, #D8B4FE 70%, #67E8F9 100%);
}