/* ============================================================================
   Foundation: Design Tokens
   ----------------------------------------------------------------------------
   Izvor istine za brand sistem portala Pravna.rs. Tokeni su izvedeni iz
   trenutno finalizovanih stranica:
     -  /          (Pages/Home.cshtml)         landing
     -  /prijava   (Pages/Account/Login.cshtml) auth
     -  /pocetna   (Pages/Index.cshtml)         dashboard
     -  /propisi   (Pages/Laws/Index.cshtml)    legal-list

   Naming convention (videti foundation/README.md):
     --p-*  primitive (sirova vrednost: hex, px, ms) — uklj. tipografiju
            (--p-font/--p-fs/--p-fw/--p-tracking/--p-leading), prostor
            (--p-space-*) i radius (--p-radius-*); koriste se direktno.
     --c-*  semantic  (uloga: c-text-primary, c-surface-glass, c-border-subtle)
     --e-*  elevation (box-shadow)
     --g-*  gradient
     --m-*  motion    (duration, easing)
   (Napomena: zasebni --t-/--s-/--r- semantički sloj nije uveden —
    primitive skale se referenciraju direktno.)
   ============================================================================ */

:root {
    /* ===================== PRIMITIVE: BOJE ===================== */

    /* (Uklonjen mrtav --p-blue-* ramp — stara marketing plava #1267ff, 0 referenci.
       Zamenjen --p-brand-* rampom ispod. Obrisano 2026-06-27.) */

    /* ===== ZVANIČNI BREND RAMP (Pravna.rs) — Tailwind-style plava =====
       #2563eb je zvanična brend boja portala (odluka 2026-06-27). Ceo ramp
       je izveden iz boja koje najnovije/najdoteranije stranice već koriste
       (Istraživanje, dashboard, propisi). --c-brand i CTA gradient/senke
       referenciraju ovaj ramp; stara marketing plava (#1267ff) je povučena. */
    --p-brand-50:  #eff6ff;
    --p-brand-100: #dbeafe;
    --p-brand-200: #bfdbfe;
    --p-brand-300: #93c5fd;
    --p-brand-400: #60a5fa;
    --p-brand-500: #3b82f6;
    --p-brand-600: #2563eb; /* PRIMARNA brend boja */
    --p-brand-700: #1d4ed8; /* hover / strong */
    --p-brand-800: #1e40af;
    --p-brand-900: #1e3a8a; /* deep — avatar/pico gradient vrh */

    /* Brand navy — naslovi, .brand, strong text */
    --p-navy-900: #071f4d; /* --navy */

    /* Neutralna paleta (slate) — preuzeto iz dashboard/legal-list */
    --p-slate-50:  #f6f8ff; /* --soft */
    --p-slate-75:  #fbfcff;
    --p-slate-100: #eef2ff;
    --p-slate-150: #e6e8ef;
    --p-slate-200: #cbd5e1;
    --p-slate-300: #94a3b8;
    --p-slate-400: #64748b;
    --p-slate-500: #475569;
    --p-slate-600: #334155;
    --p-slate-700: #1f2330;
    --p-slate-800: #0f172a; /* --text */
    --p-slate-muted: #6b7280; /* --muted */

    /* Bele/transparentne — glassy slojevi */
    --p-white: #ffffff;
    --p-white-72: rgba(255, 255, 255, .72); /* --glass */
    --p-white-55: rgba(255, 255, 255, .55);
    --p-white-92: rgba(255, 255, 255, .92);

    /* Akcentne (warning) — preuzeto iz .work-card-warn */
    --p-amber-50:  #fffaf0;
    --p-amber-100: #fff1d6;
    --p-amber-200: #ffe2a8;
    --p-amber-300: #f3d6a8;
    --p-amber-500: #f59e0b;
    --p-amber-700: #b86b00;
    --p-amber-800: #8a5a00;

    /* Akcentne pastele — koriste se za quick-ico, news-tag.feature, severity */
    --p-violet-50:  #f3ecff;
    --p-violet-100: #e3d5ff;
    --p-violet-300: #c4b5fd;
    --p-violet-700: #7c3aed;
    --p-mint-50:    #e8faf0;
    --p-mint-100:   #c8f1d8;
    --p-mint-700:   #0a6b34;
    --p-mint-800:   #0a7a44;
    --p-indigo-50:  #eef2ff;
    --p-indigo-100: #d8e0ff;
    --p-indigo-200: #d8def8;
    --p-indigo-300: #e5ecff;
    --p-indigo-500: #5b6cff;
    --p-indigo-600: #4c4cf0;
    --p-indigo-700: #2f54d6;

    /* Crvene — koriste se u validation summary (login) */
    --p-red-600: #b22929;
    --p-red-500: #d33b3b;
    --p-red-700: #DC2626;       /* alert */
    --p-red-50:  #FEE2E2;       /* alert-soft */

    /* Semanticki helperi (good/warn/alert) — preuzeto iz legacy app.css/site.css */
    --p-green-600: #16A34A;     /* good */
    --p-green-700: #15803D;     /* good text strong (acct-status, acct-badge.ok) */
    --p-green-50:  #DCFCE7;     /* good-soft */
    --p-orange-600:#D97706;     /* warn */
    --p-orange-700:#B45309;     /* warn text strong (acct-sub.warn) */
    --p-orange-50: #FEF3C7;     /* warn-soft */
    --p-red-800:   #B91C1C;     /* danger button text */
    --p-blue-info-50: #DBEAFE;  /* info-soft */

    /* ===== STATUS RAMP-ovi koje koriste nove stranice (Istraživanje/editor) =====
       Ranije hardkodovano na desetinama mesta; sada kanon u stampu. */
    --p-emerald-600: #059669;   /* success (živi korak/finish/finding) */
    --p-emerald-700: #047857;   /* success strong */
    --p-emerald-800: #166534;   /* success deep */
    --p-emerald-100: #a7f3d0;   /* success line */
    --p-emerald-50:  #ecfdf5;   /* success soft */
    --p-rose-900:    #991b1b;   /* danger deep */
    --p-rose-soft:   #fef2f2;   /* danger soft bg */
    --p-rose-line:   #fecaca;   /* danger line */
    --p-amber-900:   #92400e;   /* warn deep text */
    --p-amber-surface: #fff7ed; /* warn soft surface (peach) */
    --p-sky-500:     #0ea5e9;   /* info/tool accent */
    --p-sky-700:     #0369a1;   /* info accent strong */
    --p-sky-50:      #e0f2fe;   /* info accent soft */
    --p-violet-800:  #6d28d9;   /* violet strong (verify/select) */
    --p-line-faint:  #eef1f6;   /* najsvetliji unutrašnji delitelj */
    --p-cite-hl:     250, 204, 21; /* #facc15 — žuti marker citiranog pasusa (RGB kanali za rgba()) */

    /* Pastel module surfaces — landing/cards/tags */
    --p-pastel-blue:    #EFF6FF;
    --p-pastel-mint:    #ECFDF5;
    --p-pastel-peach:   #FFF7ED;
    --p-pastel-lilac:   #F5F3FF;
    --p-pastel-rose:    #FFF1F2;

    /* Sidebar (dark navy) — brand identitet, ne menja se medju temama */
    --p-side-bg:       #0B1426;
    --p-side-bg-2:     #0E1A33;
    --p-side-border:   rgba(255, 255, 255, .07);
    --p-side-text:     #C7D0E0;
    --p-side-text-dim: #8A95AC;
    --p-side-hover:    rgba(255, 255, 255, .05);
    --p-side-active:   rgba(37, 99, 235, .14);

    /* Workspace canvas (autenticirane stranice) */
    --p-app-bg:        #F5F7FB;     /* legacy app.css --bg */
    --p-app-surface-2: #F9FAFC;     /* legacy --surface-2 */
    --p-app-surface-3: #F1F4F9;     /* legacy --surface-3 */
    --p-app-hair:      #E5E9F0;     /* legacy --hair */
    --p-app-hair-2:    #D6DCE6;     /* legacy --hair-2 */

    /* App ink skala (legacy app.css; razlikuje se od slate skale po nijansama) */
    --p-app-ink:    #0B1220;
    --p-app-ink-2:  #1E293B;
    --p-app-ink-3:  #475569;
    --p-app-ink-4:  #64748B;
    --p-app-ink-5:  #94A3B8;

    /* App brand — alias na zvanični brend ramp (bez dupliranih vrednosti) */
    --p-app-primary:      var(--p-brand-600);
    --p-app-primary-2:    var(--p-brand-700);
    --p-app-primary-3:    var(--p-brand-800);
    --p-app-primary-soft: var(--p-brand-50);

    /* (Uklonjen mrtav --p-site-* ramp — legacy site.css, 0 referenci,
       sadržao povučenu brend plavu #2f6df6. Obrisano 2026-06-27.) */

    /* Body/nav text nijanse */
    --p-slate-card-line: #e6e8ef; /* card border */
    --p-slate-500: #475569;       /* subtitle/pill text na tintu */
    --p-ink-900: #1f2330;         /* dashboard naslov (deep ink) */
    --p-ink-800: #2b3142;         /* hover deeper ink */

    /* Linije / hairlines izvedene iz navy-9% */
    --p-line-10:  rgba(15, 23, 42, .10);
    --p-line-navy-04: rgba(7, 31, 77, .04);
    --p-line-navy-05: rgba(7, 31, 77, .05);
    --p-line-navy-06: rgba(7, 31, 77, .06);
    --p-line-navy-08: rgba(7, 31, 77, .08);
    --p-line-navy-10: rgba(7, 31, 77, .10);
    --p-line-navy-22: rgba(37, 99, 235, .22);

    /* Brand row tints (table hover, action hover) */
    --p-row-hover-brand-04: rgba(37, 99, 235, .04);
    --p-row-hover-brand-05: rgba(37, 99, 235, .05);
    --p-row-hover-brand-08: rgba(37, 99, 235, .08);
    --p-row-hover-brand-14: rgba(37, 99, 235, .14);

    /* ===================== PRIMITIVE: TIPOGRAFIJA ===================== */
    --p-font-display: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
    --p-font-text:    "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;

    /* Skala — izvedena iz aktuelnih razmera (clamp + rem mix iz pages-a) */
    --p-fs-xs:   .72rem;  /* eyebrow / label uppercase */
    --p-fs-sm:   .82rem;
    --p-fs-base: .95rem;
    --p-fs-md:   1.05rem;
    --p-fs-lg:   1.35rem;
    --p-fs-xl:   1.7rem;
    --p-fs-2xl:  clamp(28px, 3vw, 36px);  /* page-title (legal list) */
    --p-fs-3xl:  clamp(28px, 8vw, 34px);  /* intro-title (login) */

    --p-fw-regular: 400;
    --p-fw-medium:  500;
    --p-fw-semibold: 600;
    --p-fw-bold:    650;
    --p-fw-display: 680;
    --p-fw-strong:  700;

    /* Letter-spacing skala iz brand naslova */
    --p-tracking-tight: -0.035em;
    --p-tracking-snug:  -0.03em;
    --p-tracking-base:  -0.02em;
    --p-tracking-loose:  .06em;
    --p-tracking-cap:    .1em;   /* uppercase metric-label */

    --p-leading-tight: 1.05;
    --p-leading-snug:  1.1;
    --p-leading-base:  1.4;

    /* ===================== PRIMITIVE: PROSTOR ===================== */
    --p-space-0:  0;
    --p-space-1:  4px;
    --p-space-2:  8px;
    --p-space-3:  12px;
    --p-space-4:  16px;
    --p-space-5:  20px;
    --p-space-6:  24px;
    --p-space-7:  28px;
    --p-space-8:  32px;
    --p-space-10: 40px;
    --p-space-12: 48px;

    /* ===================== PRIMITIVE: RADIUS ===================== */
    --p-radius-sm:   8px;
    --p-radius-md:   11px;  /* action-ico */
    --p-radius-lg:   14px;  /* cards */
    --p-radius-xl:   16px;  /* quick-card */
    --p-radius-2xl:  18px;  /* metric bar */
    --p-radius-3xl:  22px;  /* console */
    --p-radius-pill: 999px;

    /* ===================== PRIMITIVE: ELEVATION (shadow) ===================== */
    --p-shadow-1: 0 1px 2px rgba(15, 23, 42, .04);
    --p-shadow-2: 0 8px 22px -12px rgba(15, 23, 42, .18);
    --p-shadow-glass:
        0 1px 0 rgba(255,255,255,1) inset,
        0 18px 40px -28px rgba(7,31,77,.16),
        0 6px 16px -14px rgba(37,99,235,.08);
    --p-shadow-console:
        0 1px 0 rgba(255,255,255,1) inset,
        0 22px 50px -28px rgba(7,31,77,.22),
        0 8px 20px -14px rgba(37,99,235,.12);
    --p-shadow-cta:
        0 10px 22px rgba(37,99,235,.30),
        inset 0 1px 0 rgba(255,255,255,.35);
    --p-shadow-cta-hover:
        0 14px 28px rgba(37,99,235,.36),
        inset 0 1px 0 rgba(255,255,255,.35);
    --p-shadow-hero: 0 34px 90px rgba(7, 31, 77, .16);

    /* Brand "pico" senka - plavi rounded-square (avatar/ikonica panela) */
    --p-shadow-brand-square: 0 2px 8px rgba(37, 99, 235, .35);

    /* ===================== PRIMITIVE: GRADIJENTI ===================== */
    --p-gradient-cta: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    --p-gradient-brand-underline:
        linear-gradient(90deg, #2563eb 0%, rgba(37,99,235,.25) 45%, rgba(37,99,235,0) 100%);
    --p-gradient-page:
        radial-gradient(circle at 78% 36%, rgba(37,99,235,.12), transparent 32%),
        radial-gradient(circle at 78% 72%, rgba(96,165,250,.10), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbfcff 56%, #f6f8ff 100%);
    --p-gradient-glass:
        linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.55) 100%);
    --p-gradient-hairline-h:
        linear-gradient(90deg,
            rgba(7,31,77,0) 0%,
            rgba(7,31,77,.08) 30%,
            rgba(7,31,77,.08) 70%,
            rgba(7,31,77,0) 100%);
    --p-gradient-hairline-v:
        linear-gradient(180deg,
            rgba(7,31,77,0) 0%,
            rgba(7,31,77,.10) 50%,
            rgba(7,31,77,0) 100%);
    --p-gradient-pastel-blue:
        linear-gradient(135deg, #eef2ff 0%, #e5ecff 100%);

    /* Brand "pico" gradient - plavi rounded-square (avatar/ikonica panela) */
    --p-gradient-brand-square: linear-gradient(135deg, #1e3a8a, #2563eb);

    /* Soft hairline — laksi separator za toolbare/sub-row */
    --p-gradient-hairline-h-soft:
        linear-gradient(90deg,
            rgba(7,31,77,0) 0%,
            rgba(7,31,77,.05) 30%,
            rgba(7,31,77,.05) 70%,
            rgba(7,31,77,0) 100%);

    /* Glass-soft elevation — slabija varijanta za kompaktne KPI panele */
    --p-shadow-glass-soft:
        0 1px 0 rgba(255,255,255,1) inset,
        0 12px 28px -22px rgba(7,31,77,.14),
        0 4px 12px -10px rgba(37,99,235,.06);

    /* Avatar/usage gradijent — koristi se u .acct-avatar i .acct-usage .bar */
    --p-gradient-avatar:
        linear-gradient(135deg, #3B82F6 0%, #1D4ED8 50%, #7C3AED 130%);
    --p-gradient-usage-bar:
        linear-gradient(90deg, #3B82F6, #7C3AED);

    /* ===================== PRIMITIVE: MOTION ===================== */
    --p-duration-fast:    .12s;
    --p-duration-base:    .15s;
    --p-duration-slow:    .25s;
    --p-easing-standard:  ease;

    /* ===================== SEMANTIC: SVETLA TEMA (default) ===================== */

    /* Tekst */
    --c-text-primary:   var(--p-slate-800); /* #0f172a */
    --c-text-strong:    var(--p-navy-900);  /* #071f4d */
    --c-text-secondary: var(--p-slate-400); /* #64748b — body/meta */
    --c-text-muted:     var(--p-slate-muted); /* #6b7280 */
    --c-text-subtle:    var(--p-slate-300); /* #94a3b8 — labels */
    --c-text-faint:     var(--p-slate-200); /* #cbd5e1 — disabled/icons */
    --c-text-on-brand:  var(--p-white);
    --c-text-link:      var(--c-brand);
    --c-text-deep-ink:  var(--p-ink-900); /* dashboard naslovi/values */
    --c-text-deep-ink-hover: var(--p-ink-800);
    --c-text-on-tint:   var(--p-slate-500); /* pill text na tintu */

    /* Brand — zvanično #2563eb (vidi --p-brand-* ramp) */
    --c-brand:           var(--p-brand-600); /* #2563eb */
    --c-brand-strong:    var(--p-brand-700); /* #1d4ed8 hover */
    --c-brand-deep:      var(--p-brand-900); /* #1e3a8a */
    --c-brand-soft:      var(--p-brand-400); /* #60a5fa */
    --c-brand-100:       var(--p-brand-100); /* #dbeafe — tinta okvira/badge */
    --c-brand-200:       var(--p-brand-200); /* #bfdbfe */
    --c-brand-300:       var(--p-brand-300); /* #93c5fd */
    --c-brand-tint:      rgba(37, 99, 235, .10);
    --c-brand-tint-soft: rgba(37, 99, 235, .06);
    --c-brand-surface:   var(--p-brand-50);  /* #eff6ff — meka brend površina */
    /* Fokus prsten — jedinstven za sva polja (search pill, input, chip…) */
    --c-focus-ring:        rgba(37, 99, 235, .12);
    --c-focus-ring-border: rgba(37, 99, 235, .55);

    /* Povrsine */
    --c-surface-page:        var(--p-white);
    --c-surface-page-soft:   var(--p-slate-50);
    --c-surface-card:        var(--p-white);
    --c-surface-card-tint:   var(--p-slate-75);
    --c-surface-glass:       var(--p-white-72);
    --c-surface-glass-2:     var(--p-white-92);
    --c-surface-warn:        var(--p-amber-50);

    /* Linije */
    --c-border-subtle:   var(--p-slate-150);
    --c-border-hairline: var(--p-line-navy-06);
    --c-border-divider:  var(--p-line-navy-08);
    --c-border-strong:   var(--p-line-navy-10);
    --c-border-brand:    var(--p-line-navy-22);

    /* Stanja */
    --c-state-warn-text: var(--p-amber-800);
    --c-state-warn-icon: var(--p-amber-700);
    --c-state-good-text: var(--p-mint-800);
    --c-state-error-text: var(--p-red-600);

    /* Akcentne uloge — koriste se za pastel ikone i tag pillove */
    --c-accent-violet:        var(--p-violet-700);
    --c-accent-violet-tint-1: var(--p-violet-50);
    --c-accent-violet-tint-2: var(--p-violet-100);
    --c-accent-mint:          var(--p-mint-700);
    --c-accent-mint-tint-1:   var(--p-mint-50);
    --c-accent-mint-tint-2:   var(--p-mint-100);
    --c-accent-mint-strong:   var(--p-mint-800);
    --c-accent-indigo:        var(--p-indigo-500);
    --c-accent-indigo-strong: var(--p-indigo-600);
    --c-accent-indigo-deep:   var(--p-indigo-700);
    --c-accent-indigo-tint-1: var(--p-indigo-50);
    --c-accent-indigo-tint-2: var(--p-indigo-100);
    --c-accent-indigo-tint-3: var(--p-indigo-300);
    --c-accent-indigo-line:   var(--p-indigo-200);

    /* Card linije i meta povrsine */
    --c-border-card:   var(--p-slate-card-line);
    --c-surface-page-tint: var(--p-slate-75);

    /* Kratki aliasi — legacy kratka imena koja stranice/moduli referenciraju
       (često sa fallback-om). Mapirana na kanon da uvek razrešavaju isto. */
    --c-border:        var(--c-border-subtle);
    --c-row-hover:     var(--c-row-hover-soft);
    --c-text:          var(--c-text-primary);
    --c-muted:         var(--c-text-secondary);
    --c-primary:       var(--c-brand-strong);
    --c-brand-700:     var(--c-brand-strong);
    --c-bg:            var(--c-surface-page-soft);
    --c-bg-subtle:     var(--c-surface-page-soft);
    --c-surface:       var(--c-surface-card);
    --c-surface-1:     var(--c-surface-card);
    --c-surface-2:     var(--p-app-surface-2);
    --c-surface-muted: var(--p-app-surface-3);
    --c-border-divider-strong: var(--c-text-faint);
    --c-state-alert-icon:      var(--c-danger-strong);

    /* Row hover tinte (tabele, akcije, lista redovi) */
    --c-row-hover-soft:    var(--p-row-hover-brand-04);
    --c-row-hover-medium:  var(--p-row-hover-brand-05);
    --c-row-hover-strong:  var(--p-row-hover-brand-08);
    --c-row-hover-active:  var(--p-row-hover-brand-14);

    /* Pill povrsine */
    --c-pill-brand-bg:     var(--p-row-hover-brand-08);
    --c-pill-neutral-bg:   var(--p-line-navy-06);
    --c-pill-good-bg:      rgba(16, 150, 90, .10);
    --c-pill-warn-bg:      rgba(245, 158, 11, .12);
    --c-pill-alert-bg:     rgba(220, 38, 38, .10);

    /* Toolbar / sub-row delitelj (slabiji od --c-border-divider) */
    --c-border-divider-soft: var(--p-line-navy-05);
    --c-border-faint:        var(--p-line-faint); /* #eef1f6 — najsvetlije linije */

    /* Success (emerald) — živi koraci, finish/finding, „kopirano" */
    --c-success:         var(--p-emerald-600);
    --c-success-strong:  var(--p-emerald-700);
    --c-success-deep:    var(--p-emerald-800);
    --c-success-line:    var(--p-emerald-100);
    --c-success-soft:    var(--p-emerald-50);

    /* Danger (uz postojeći --c-state-alert*) — stop, greška, banner */
    --c-danger:          var(--c-state-alert);        /* #dc2626 */
    --c-danger-strong:   var(--c-state-alert-strong); /* #b91c1c */
    --c-danger-deep:     var(--p-rose-900);
    --c-danger-soft:     var(--p-rose-soft);
    --c-danger-line:     var(--p-rose-line);

    /* Warn — dopuna postojećem --c-state-warn* */
    --c-warn-deep:       var(--p-amber-900);
    --c-warn-surface:    var(--p-amber-surface);
    --c-warn-box-bg:     var(--p-amber-50);   /* bledo-žuta pozadina warn-boksa */
    --c-warn-box-border: var(--p-amber-200);  /* amber ivica warn-boksa */

    /* Sky/cyan accent — tool/scope/triage koraci */
    --c-accent-sky:        var(--p-sky-500);
    --c-accent-sky-strong: var(--p-sky-700);
    --c-accent-sky-soft:   var(--p-sky-50);

    /* Violet strong — verify/select koraci */
    --c-accent-violet-strong: var(--p-violet-800);

    /* Zlatni pravni akcenat — pečat/zaglavlje pravnog dokumenta */
    --c-accent-gold: #c8a052;

    /* Ink za telo „dokumenta" (Georgia serif body u modalima/legal-doc) */
    --c-doc-ink: #1f2937;

    /* Nivoi rizika (Provera ugovora) — meke pastelne pozadine/okviri po nivou */
    --c-risk-low-border:  #d1e9da;
    --c-risk-med-bg:      #fdf6e1;
    --c-risk-med-border:  #ecdfb5;
    --c-risk-high-bg:     #fdecd8;
    --c-risk-high-border: #f0d2ad;
    --c-risk-high-text:   #8a3a00;

    /* Citat highlight — žuti marker citiranog pasusa (AskPravna/Istraživanje izvor) */
    --c-cite-hl:        #facc15;                      /* puna boja */
    --c-cite-hl-mark:   rgba(var(--p-cite-hl), .45);  /* trajni marker */
    --c-cite-hl-strong: rgba(var(--p-cite-hl), .9);   /* vrh pulsa / inset traka */
    --c-cite-hl-ring:   rgba(var(--p-cite-hl), .35);  /* pulse senka */
    --c-cite-hl-block:  rgba(var(--p-cite-hl), .16);  /* pozadina bloka */
    --c-cite-hl-fade:   rgba(var(--p-cite-hl), 0);    /* kraj pulsa */

    /* ===================== SEMANTIC: SHELL (sidebar / topbar / app canvas) ===================== */
    --c-app-bg:           var(--p-app-bg);
    --c-app-surface-2:    var(--p-app-surface-2);
    --c-app-surface-3:    var(--p-app-surface-3);
    --c-app-hair:         var(--p-app-hair);
    --c-app-hair-strong:  var(--p-app-hair-2);

    --c-side-bg:        var(--p-side-bg);
    --c-side-bg-2:      var(--p-side-bg-2);
    --c-side-border:    var(--p-side-border);
    --c-side-text:      var(--p-side-text);
    --c-side-text-dim:  var(--p-side-text-dim);
    --c-side-hover:     var(--p-side-hover);
    --c-side-active:    var(--p-side-active);

    /* Semanticki status (good/warn/alert/info) */
    --c-state-good:        var(--p-green-600);
    --c-state-good-strong: var(--p-green-700);
    --c-state-good-soft:   var(--p-green-50);
    --c-state-warn:        var(--p-orange-600);
    --c-state-warn-strong: var(--p-orange-700);
    --c-state-warn-soft:   var(--p-orange-50);
    --c-state-alert:       var(--p-red-700);
    --c-state-alert-strong:var(--p-red-800);
    --c-state-alert-soft:  var(--p-red-50);
    --c-state-info-soft:   var(--p-blue-info-50);

    /* Pastel module surfaces */
    --c-pastel-blue:    var(--p-pastel-blue);
    --c-pastel-mint:    var(--p-pastel-mint);
    --c-pastel-peach:   var(--p-pastel-peach);
    --c-pastel-lilac:   var(--p-pastel-lilac);
    --c-pastel-rose:    var(--p-pastel-rose);

    /* Pozadina stranice — koristi se po opciji u page wrapper-ima */
    --c-page-background: var(--p-gradient-page);
    --c-page-text:       var(--c-text-primary);

    /* ===================== SEMANTIC: ELEVATION (shadow) ===================== */
    --e-card:         var(--p-shadow-1);
    --e-card-hover:   var(--p-shadow-2);
    --e-glass:        var(--p-shadow-glass);
    --e-glass-soft:   var(--p-shadow-glass-soft);
    --e-console:      var(--p-shadow-console);
    --e-cta:          var(--p-shadow-cta);
    --e-cta-hover:    var(--p-shadow-cta-hover);
    --e-hero:         var(--p-shadow-hero);
    --e-brand-square: var(--p-shadow-brand-square);

    /* ===================== SEMANTIC: GRADIENT ===================== */
    --g-cta:               var(--p-gradient-cta);
    --g-page:              var(--p-gradient-page);
    --g-glass:             var(--p-gradient-glass);
    --g-hairline-h:        var(--p-gradient-hairline-h);
    --g-hairline-h-soft:   var(--p-gradient-hairline-h-soft);
    --g-hairline-v:        var(--p-gradient-hairline-v);
    --g-brand-underline:   var(--p-gradient-brand-underline);
    --g-pastel-blue:       var(--p-gradient-pastel-blue);
    --g-brand-square:      var(--p-gradient-brand-square);
    --g-avatar:            var(--p-gradient-avatar);
    --g-usage-bar:         var(--p-gradient-usage-bar);
}