/* ===========================================================================
   CyberSee — UI System Layer
   ──────────────────────────
   Reusable, token-driven components for a consistent UI across all modules.

   USAGE
   ─────
   • All classes prefixed with `ui-` to avoid legacy collisions.
   • Works with or without a `.cs-ui` namespace wrapper (CSS only).
   • Automatically supports light/dark via existing brand tokens from tokens.css.
   • No HTML changes required — add classes alongside existing ones.

   COMPONENTS
   ──────────
   1. Badges     — .ui-badge + severity/status variants
   2. Buttons    — .ui-btn + type/size variants + Livewire states
   3. Tables     — .ui-table + filters helpers
   4. Cards      — .ui-card + structured sub-elements

   DEPENDS ON
   ──────────
   tokens.css must load BEFORE this file.

   =========================================================================== */


/* ============================================================================
   UI SYSTEM SPACING TOKENS
   Local scale — does NOT conflict with existing brand tokens.
============================================================================ */

:root {
    --ui-space-0: 0;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-7: 32px;
    --ui-space-8: 40px;

    --ui-radius-sm: 4px;
    --ui-radius-md: 8px;
    --ui-radius-lg: 12px;
    --ui-radius-pill: 999px;

    --ui-font-xs: 0.75rem;
    /* 12px */
    --ui-font-sm: 0.8125rem;
    /* 13px */
    --ui-font-md: 0.875rem;
    /* 14px */
    --ui-font-lg: 1rem;
    /* 16px */

    --ui-transition: 0.15s ease;
}


/* ============================================================================
   1. BADGES — Severity & Status System
   ────────────────────────────────────
   Base class: .ui-badge
   Variants:   .ui-badge--critical  (danger)
               .ui-badge--high      (danger, softer)
               .ui-badge--medium    (neutral/ink — NOT yellow)
               .ui-badge--low       (success-ish severity)
               .ui-badge--success   (positive status — green)
               .ui-badge--info      (info)
               .ui-badge--warning   (warning — when you *do* need yellow)
               .ui-badge--primary   (brand primary)
               .ui-badge--tag       (user-defined labels — muted, dotted, #prefix)
               .ui-badge--entity    (brand names / linked entities — teal, squared)
   Sizes:      .ui-badge--sm  .ui-badge--lg
============================================================================ */

.ui-badge,
.cs-ui .ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.35em 0.65em;
    border-radius: var(--ui-radius-pill);
    font-family: var(--font-base);
    font-size: var(--ui-font-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    vertical-align: baseline;
    user-select: none;
    transition: background var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition);
}


/* ── Severity: Critical ── */
.ui-badge--critical,
.cs-ui .ui-badge--critical {
    color: var(--brand-risk-critical);
    background:
        color-mix(in srgb, var(--brand-risk-critical) 14%, transparent);
    border-color:
        color-mix(in srgb, var(--brand-risk-critical) 40%, transparent);
}

/* ── Severity: High ── */
.ui-badge--high,
.cs-ui .ui-badge--high {
    color: var(--brand-risk-high);
    background: color-mix(in srgb, var(--brand-risk-high) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand-risk-high) 35%, transparent);
}

/* ── Severity: Medium — neutral/ink, NOT yellow ── */
.ui-badge--medium,
.cs-ui .ui-badge--medium {
    color: var(--brand-risk-medium);
    background:
        color-mix(in srgb, var(--brand-risk-medium) 14%, transparent);
    border-color:
        color-mix(in srgb, var(--brand-risk-medium) 40%, transparent);
}


/* ── Severity: Low ── */
.ui-badge--low,
.cs-ui .ui-badge--low {
    color: var(--brand-risk-low);
    background: color-mix(in srgb, var(--brand-risk-low) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand-risk-low) 35%, transparent);
}

/* ── Status: Success ── */
.ui-badge--success,
.cs-ui .ui-badge--success {
    color: var(--brand-success);
    background: color-mix(in srgb, var(--brand-success) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand-success) 35%, transparent);
}

/* ── Status: Info ── */
.ui-badge--info,
.cs-ui .ui-badge--info {
    color: var(--brand-info);
    background: color-mix(in srgb, var(--brand-info) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand-info) 35%, transparent);
}

/* ── Status: Warning (when yellow IS needed) ── */
.ui-badge--warning,
.cs-ui .ui-badge--warning {
    color: var(--brand-warning-600);
    background: color-mix(in srgb, var(--brand-warning) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand-warning) 40%, transparent);
}

/* ── Brand: Primary ── */
.ui-badge--primary,
.cs-ui .ui-badge--primary {
    color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
    border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent);
}

/* Dark-theme override: badge-only fix — does NOT affect --brand-primary system-wide */
html[data-bs-theme="dark"] .ui-badge--primary,
html[data-bs-theme="dark"] .cs-ui .ui-badge--primary {
    color: #9C7DFF;
    /* bright lavender, readable on dark */
    background: color-mix(in srgb, #9C7DFF 15%, transparent);
    border-color: color-mix(in srgb, #9C7DFF 38%, transparent);
}

/* ── Secondary: muted / inactive / draft / neutral reference ── */
.ui-badge--secondary,
.cs-ui .ui-badge--secondary {
    color: #6B7280;
    /* gray-500 */
    background: color-mix(in srgb, #6B7280 10%, transparent);
    border-color: color-mix(in srgb, #6B7280 25%, transparent);
}

html[data-bs-theme="dark"] .ui-badge--secondary,
html[data-bs-theme="dark"] .cs-ui .ui-badge--secondary {
    color: #9CA3AF;
    /* gray-400 */
    background: color-mix(in srgb, #9CA3AF 12%, transparent);
    border-color: color-mix(in srgb, #9CA3AF 25%, transparent);
}

/* ── Danger: destructive actions, errors, false-positive ── */
.ui-badge--danger,
.cs-ui .ui-badge--danger {
    color: #DC2626;
    /* red-600 */
    background: color-mix(in srgb, #DC2626 12%, transparent);
    border-color: color-mix(in srgb, #DC2626 30%, transparent);
}

html[data-bs-theme="dark"] .ui-badge--danger,
html[data-bs-theme="dark"] .cs-ui .ui-badge--danger {
    color: #F87171;
    /* red-400 */
    background: color-mix(in srgb, #F87171 14%, transparent);
    border-color: color-mix(in srgb, #F87171 30%, transparent);
}

/* ── Tags: user-defined labels (#tag style) ──
   Neutral muted tone, dotted border, # prefix — clearly distinct from status/type badges.
*/
.ui-badge--tag,
.cs-ui .ui-badge--tag {
    color: var(--brand-muted);
    background: color-mix(in srgb, var(--brand-muted) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--brand-muted) 35%, transparent);
    border-radius: var(--ui-radius-sm);
    /* squared, not pill */
    font-weight: 500;
    /* lighter than severity badges */
    letter-spacing: 0.01em;
}

.ui-badge--tag::before {
    content: "#";
    opacity: 0.5;
    margin-inline-end: 0.15em;
    font-weight: 600;
}

html[data-bs-theme="dark"] .ui-badge--tag,
html[data-bs-theme="dark"] .cs-ui .ui-badge--tag {
    color: #B0B6C4;
    background: color-mix(in srgb, #B0B6C4 10%, transparent);
    border-color: color-mix(in srgb, #B0B6C4 25%, transparent);
}

/* ── Entity: brand names, domain labels, organization names ──
   Teal/cyan tone, solid but softer, square-radius — reads as "linked entity" not "status".
*/
.ui-badge--entity,
.cs-ui .ui-badge--entity {
    color: #0D9488;
    /* teal-600 */
    background: color-mix(in srgb, #0D9488 10%, transparent);
    border: 1px solid color-mix(in srgb, #0D9488 28%, transparent);
    border-radius: var(--ui-radius-sm);
    /* squared, not pill */
    font-weight: 600;
}

html[data-bs-theme="dark"] .ui-badge--entity,
html[data-bs-theme="dark"] .cs-ui .ui-badge--entity {
    color: #5EEAD4;
    /* teal-300 — bright on dark */
    background: color-mix(in srgb, #5EEAD4 12%, transparent);
    border-color: color-mix(in srgb, #5EEAD4 30%, transparent);
}

/* ── Brand Chip: distinct from badges — dot indicator + entity name ──
   Used for brand names, company names, organization labels.
   NOT a badge — reads as "linked entity / brand" with a colored dot prefix.
*/
.brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--bs-body-color);
    background: color-mix(in srgb, var(--bs-body-color) 5%, transparent);
    border-radius: var(--ui-radius-sm);
    border: none;
    transition: background var(--ui-transition);
}

.brand-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0D9488;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px color-mix(in srgb, #0D9488 20%, transparent);
}

html[data-bs-theme="dark"] .brand-chip {
    color: #d1d5db;
    background: color-mix(in srgb, #fff 6%, transparent);
}

html[data-bs-theme="dark"] .brand-chip::before {
    background: #5EEAD4;
    box-shadow: 0 0 0 2px color-mix(in srgb, #5EEAD4 22%, transparent);
}


/* ── Badge sizes ── */
.ui-badge--sm,
.cs-ui .ui-badge--sm {
    font-size: 0.75rem;
    padding: 0.35em 0.75em;
    line-height: 1;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

/* Keep squared radius for tag & entity even at --sm size */
.ui-badge--tag.ui-badge--sm,
.ui-badge--entity.ui-badge--sm {
    border-radius: var(--ui-radius-sm);
}


.ui-badge--lg,
.cs-ui .ui-badge--lg {
    font-size: var(--ui-font-sm);
    padding: 0.45em 0.85em;
}


/* ============================================================================
   2. BUTTONS — Primary, Secondary, Ghost, Danger
   ───────────────────────────────────────────────
   Base:     .ui-btn
   Variants: .ui-btn--primary  .ui-btn--secondary  .ui-btn--ghost  .ui-btn--danger
   Sizes:    .ui-btn--sm  .ui-btn--md (default)  .ui-btn--lg
   Modifiers:.ui-btn--icon  (square icon-only button)
   States:   .is-loading  [disabled]  :focus-visible
============================================================================ */

.ui-btn,
.cs-ui .ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.5em 1em;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-md);
    font-family: var(--font-base);
    font-size: var(--ui-font-md);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition:
        background var(--ui-transition),
        border-color var(--ui-transition),
        color var(--ui-transition),
        box-shadow var(--ui-transition),
        transform var(--ui-transition),
        opacity var(--ui-transition);
}

/* ── Focus ring (keyboard) ── */
.ui-btn:focus-visible,
.cs-ui .ui-btn:focus-visible {
    outline: none;
    box-shadow: var(--brand-focus-ring);
}

/* ── Disabled state ── */
.ui-btn:disabled,
.ui-btn[disabled],
.cs-ui .ui-btn:disabled,
.cs-ui .ui-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* ── Loading state (Livewire-friendly) ── */
.ui-btn.ui-btn.is-loading,
.cs-ui .ui-btn.is-loading {
    position: relative;
    color: transparent;
    text-shadow: none;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
}

/* Hide child icons/svgs during loading (CSS-only, no HTML changes) */
.ui-btn.ui-btn.is-loading>i,
.ui-btn.ui-btn.is-loading>svg,
.ui-btn.ui-btn.is-loading>img,
.cs-ui .ui-btn.is-loading>i,
.cs-ui .ui-btn.is-loading>svg,
.cs-ui .ui-btn.is-loading>img {
    visibility: hidden;
}

.ui-btn.is-loading::after,
.cs-ui .ui-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-spin 0.6s linear infinite;
    /* Spinner inherits the variant color set by .is-loading::after overrides below */
    color: inherit;
    opacity: 1;
    filter: brightness(1);
}

/* ── Variant: Primary ── */
.ui-btn--primary,
.cs-ui .ui-btn--primary {
    color: #fff;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

.ui-btn--primary:hover,
.cs-ui .ui-btn--primary:hover {
    background: var(--brand-primary-600);
    border-color: var(--brand-primary-600);
}

.ui-btn--primary:active,
.cs-ui .ui-btn--primary:active {
    background: var(--brand-primary-800);
    border-color: var(--brand-primary-800);
}

.ui-btn--primary.is-loading::after {
    color: #fff;
}

/* ── Variant: Secondary ── */
.ui-btn--secondary,
.cs-ui .ui-btn--secondary {
    color: var(--brand-fg);
    background: transparent;
    border-color: var(--brand-border);
}

.ui-btn--secondary:hover,
.cs-ui .ui-btn--secondary:hover {
    background: color-mix(in srgb, var(--brand-fg) 6%, transparent);
    border-color: color-mix(in srgb, var(--brand-fg) 20%, transparent);
}

.ui-btn--secondary:active,
.cs-ui .ui-btn--secondary:active {
    background: color-mix(in srgb, var(--brand-fg) 10%, transparent);
}

.ui-btn--secondary.is-loading::after {
    color: var(--brand-fg);
}

/* ── Variant: Ghost ── */
.ui-btn--ghost,
.cs-ui .ui-btn--ghost {
    color: var(--brand-fg);
    background: transparent;
    border-color: transparent;
}

.ui-btn--ghost:hover,
.cs-ui .ui-btn--ghost:hover {
    background: color-mix(in srgb, var(--brand-fg) 6%, transparent);
}

.ui-btn--ghost:active,
.cs-ui .ui-btn--ghost:active {
    background: color-mix(in srgb, var(--brand-fg) 10%, transparent);
}

.ui-btn--ghost.is-loading::after,
.cs-ui .ui-btn--ghost.is-loading::after {
    color: var(--brand-fg);
}

/* ── Variant: Danger ── */
.ui-btn--danger,
.cs-ui .ui-btn--danger {
    color: #fff;
    background: var(--brand-danger);
    border-color: var(--brand-danger);
}

.ui-btn--danger:hover,
.cs-ui .ui-btn--danger:hover {
    background: var(--brand-danger-600);
    border-color: var(--brand-danger-600);
}

.ui-btn--danger:active,
.cs-ui .ui-btn--danger:active {
    background: color-mix(in srgb, var(--brand-danger-600) 85%, #000);
    border-color: color-mix(in srgb, var(--brand-danger-600) 85%, #000);
}

.ui-btn--danger.is-loading::after {
    color: #fff;
}

/* ── Size: Small ── */
.ui-btn--sm,
.cs-ui .ui-btn--sm {
    font-size: var(--ui-font-xs);
    padding: 0.35em 0.75em;
    border-radius: var(--ui-radius-sm);
}

/* ── Size: Medium (default — explicit if needed) ── */
.ui-btn--md,
.cs-ui .ui-btn--md {
    font-size: var(--ui-font-md);
    padding: 0.5em 1em;
}

/* ── Size: Large ── */
.ui-btn--lg,
.cs-ui .ui-btn--lg {
    font-size: var(--ui-font-lg);
    padding: 0.65em 1.35em;
    border-radius: var(--ui-radius-lg);
}

/* ── Icon-only button ── */
.ui-btn--icon,
.cs-ui .ui-btn--icon {
    width: 2.25em;
    height: 2.25em;
    padding: 0;
    flex-shrink: 0;
}

.ui-btn--icon.ui-btn--sm {
    width: 1.75em;
    height: 1.75em;
}

.ui-btn--icon.ui-btn--lg {
    width: 2.75em;
    height: 2.75em;
}


/* ============================================================================
   3. TABLES — Wrapper, header, rows, cells, hover
   ────────────────────────────────────────────────
   Wrapper:  .ui-table
   Filters:  .ui-filters  .ui-filters__row
============================================================================ */

/* ── Filters bar above table ── */
.ui-filters,
.cs-ui .ui-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-3);
    margin-bottom: var(--ui-space-4);
}

.ui-filters__row,
.cs-ui .ui-filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    width: 100%;
}

/* ── Table wrapper ── */
.ui-table,
.cs-ui .ui-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: var(--font-base);
    font-size: var(--ui-font-md);
    color: var(--brand-fg);
    border: 1px solid var(--brand-border);
}

/* ── Header ── */
.ui-table thead th,
.cs-ui .ui-table thead th {
    background: var(--brand-elev-2);
    border: 1px solid var(--brand-border);
    border-bottom-width: 2px;
    color: var(--brand-fg);
    font-size: var(--ui-font-md);
    font-weight: 600;
    padding: var(--ui-space-3) var(--ui-space-4);
    text-align: start;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
    user-select: none;
}

/* ── Body cells ── */
.ui-table tbody td,
.cs-ui .ui-table tbody td {
    border-bottom: 1px solid var(--brand-border);
    color: var(--brand-fg);
    padding: var(--ui-space-3) var(--ui-space-4);
    font-size: var(--ui-font-md);
    line-height: 1.5;
    vertical-align: middle;
}

/* ── Row hover ── */
.ui-table tbody tr:hover,
.cs-ui .ui-table tbody tr:hover {
    background: color-mix(in srgb, var(--brand-fg) 4%, transparent);
}

/* ── Striped variant (optional) ── */
.ui-table--striped tbody tr:nth-child(even),
.cs-ui .ui-table--striped tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--brand-fg) 2%, transparent);
}

/* ── Compact variant ── */
.ui-table--compact thead th,
.ui-table--compact tbody td,
.cs-ui .ui-table--compact thead th,
.cs-ui .ui-table--compact tbody td {
    padding: var(--ui-space-2) var(--ui-space-3);
    font-size: var(--ui-font-sm);
}

/* ── Empty state row ── */
.ui-table .ui-table__empty,
.cs-ui .ui-table .ui-table__empty {
    text-align: center;
    padding: var(--ui-space-8) var(--ui-space-4);
    color: var(--brand-muted);
    font-size: var(--ui-font-md);
}



/* ============================================================================
   4. CARDS — Elevated content containers
   ──────────────────────────────────────
   Base:      .ui-card
   Elements:  .ui-card__header  .ui-card__title  .ui-card__body  .ui-card__meta
              .ui-card__footer
============================================================================ */

.ui-card,
.cs-ui .ui-card {
    background: var(--brand-elev);
    border: 1px solid var(--brand-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--brand-shadow);
    color: var(--brand-fg);
    overflow: hidden;
    transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}

.ui-card:hover,
.cs-ui .ui-card:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 25%, var(--brand-border));
}

/* ── Header ── */
.ui-card__header,
.cs-ui .ui-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-3);
    padding: var(--ui-space-4) var(--ui-space-5);
    border-bottom: 1px solid var(--brand-border);
    background: var(--brand-elev-2);
}

/* ── Title ── */
.ui-card__title,
.cs-ui .ui-card__title {
    margin: 0;
    font-size: var(--ui-font-lg);
    font-weight: 600;
    color: var(--brand-fg);
    line-height: 1.4;
}

/* ── Body ── */
.ui-card__body,
.cs-ui .ui-card__body {
    padding: var(--ui-space-5);
}

/* ── Meta / secondary text ── */
.ui-card__meta,
.cs-ui .ui-card__meta {
    font-size: var(--ui-font-sm);
    color: var(--brand-muted);
    line-height: 1.5;
}

/* ── Footer ── */
.ui-card__footer,
.cs-ui .ui-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-3);
    padding: var(--ui-space-3) var(--ui-space-5);
    border-top: 1px solid var(--brand-border);
}


/* ============================================================================
   KEYFRAMES (UI System only)
============================================================================ */

@keyframes ui-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Reduced-motion: stop spinner animation ── */
@media (prefers-reduced-motion: reduce) {

    .ui-btn.is-loading::after,
    .cs-ui .ui-btn.is-loading::after {
        animation: none;
    }
}

.ui-badge::after {
    margin-left: 0 !important;
}

/* ── Dynamic: DB-stored / runtime colors ──
   Usage: class="ui-badge ui-badge--dynamic" style="--badge-bg: {{ $color }}"
   Soft-tint style matching other variants (colored text + 14% bg + 35% border).
   For type/level badges whose color comes from the database.
*/
.ui-badge--dynamic,
.cs-ui .ui-badge--dynamic {
    color: var(--badge-bg, var(--brand-muted));
    background: color-mix(in srgb, var(--badge-bg, var(--brand-muted)) 14%, transparent);
    border-color: color-mix(in srgb, var(--badge-bg, var(--brand-muted)) 35%, transparent);
}

/* Dark-theme override for dynamic badges:
   DB colors like #5718af are too dark for text on dark surfaces.
   We lighten the color toward white using color-mix so the badge
   stays "branded" (hue preserved) but becomes eye-friendly.
*/
html[data-bs-theme="dark"] .ui-badge--dynamic,
html[data-bs-theme="dark"] .cs-ui .ui-badge--dynamic {
    /* Mix the DB color 50% toward white → keeps hue, raises lightness safely */
    color: color-mix(in srgb, var(--badge-bg, #9C7DFF) 50%, #ffffff);
    background: color-mix(in srgb, var(--badge-bg, #9C7DFF) 18%, transparent);
    border-color: color-mix(in srgb, var(--badge-bg, #9C7DFF) 42%, transparent);
}

/* ============================================================================
   TOKEN → SEVERITY MAPPING NOTES
   ──────────────────────────────
   Severity Level    │ Token family used              │ Visual intent
   ──────────────────┼────────────────────────────────┼───────────────────
   critical          │ --brand-danger / -600          │ Solid danger bg, white text
   high              │ --brand-danger (14% mix)       │ Soft danger tint, danger text
   medium            │ --brand-fg / --brand-border    │ Neutral ink tone (NOT yellow)
   low               │ --brand-success (14% mix)      │ Soft success tint
   info              │ --brand-info (14% mix)         │ Soft info tint
   warning           │ --brand-warning / -600         │ Soft yellow (opt-in only)
   primary           │ --brand-primary / -600         │ Solid brand bg, white text

   All auto-adapt to light/dark via token resolution in tokens.css.
============================================================================ */