/*
 * OLIS accent colour system
 * -------------------------------------------------------------------------
 * A shareable, "soft chip" accent palette for status dots, pills and chips.
 * Designed to sit quietly alongside a saturated primary theme (e.g. Radzen
 * Material) rather than competing with it. Inspired by Attio's clean,
 * low-saturation tag styling.
 *
 * Three tiers:
 *   1. Primitives  -- raw Tailwind v4 OKLCH ramps, namespaced --olis-<hue>-<step>.
 *   2. Accent recipes -- per-accent soft trio (bg / fg / dot / border).
 *   3. Utility + component styles -- .olis-accent-<name> sets the "current"
 *      accent vars; .olis-chip-soft / .olis-status-dot consume them.
 *
 * Domain meaning (e.g. "risk open") is NOT encoded here. Map your domain
 * enum -> an accent name in the component layer so this file stays generic
 * and portable across teams/apps.
 * -------------------------------------------------------------------------
 */

:root {
    /* --- Tier 1: primitives (Tailwind v4 OKLCH) ------------------------- */

    --olis-slate-50: oklch(0.984 0.003 247.858);
    --olis-slate-100: oklch(0.968 0.007 247.896);
    --olis-slate-200: oklch(0.929 0.013 255.508);
    --olis-slate-500: oklch(0.554 0.046 257.417);
    --olis-slate-700: oklch(0.372 0.044 257.287);
    --olis-slate-800: oklch(0.279 0.041 260.031);

    --olis-red-50: oklch(0.971 0.013 17.38);
    --olis-red-100: oklch(0.936 0.032 17.717);
    --olis-red-200: oklch(0.885 0.062 18.334);
    --olis-red-500: oklch(0.637 0.237 25.331);
    --olis-red-700: oklch(0.505 0.213 27.518);
    --olis-red-800: oklch(0.444 0.177 26.899);

    --olis-orange-50: oklch(0.98 0.016 73.684);
    --olis-orange-100: oklch(0.954 0.038 75.164);
    --olis-orange-200: oklch(0.901 0.076 70.697);
    --olis-orange-500: oklch(0.705 0.213 47.604);
    --olis-orange-700: oklch(0.553 0.195 38.402);
    --olis-orange-800: oklch(0.47 0.157 37.304);

    --olis-amber-50: oklch(0.987 0.022 95.277);
    --olis-amber-100: oklch(0.962 0.059 95.617);
    --olis-amber-200: oklch(0.924 0.12 95.746);
    --olis-amber-400: oklch(0.828 0.189 84.429);
    --olis-amber-500: oklch(0.769 0.188 70.08);
    --olis-amber-700: oklch(0.555 0.163 48.998);
    --olis-amber-800: oklch(0.473 0.137 46.201);
    --olis-amber-950: oklch(0.279 0.077 45.635);

    --olis-green-50: oklch(0.982 0.018 155.826);
    --olis-green-100: oklch(0.962 0.044 156.743);
    --olis-green-200: oklch(0.925 0.084 155.995);
    --olis-green-500: oklch(0.723 0.219 149.579);
    --olis-green-700: oklch(0.527 0.154 150.069);
    --olis-green-800: oklch(0.448 0.119 151.328);

    --olis-emerald-50: oklch(0.979 0.021 166.113);
    --olis-emerald-100: oklch(0.95 0.052 163.051);
    --olis-emerald-200: oklch(0.905 0.093 164.15);
    --olis-emerald-500: oklch(0.696 0.17 162.48);
    --olis-emerald-700: oklch(0.508 0.118 165.612);
    --olis-emerald-800: oklch(0.432 0.095 166.913);

    --olis-teal-50: oklch(0.984 0.014 180.72);
    --olis-teal-100: oklch(0.953 0.051 180.801);
    --olis-teal-200: oklch(0.91 0.096 180.426);
    --olis-teal-500: oklch(0.704 0.14 182.503);
    --olis-teal-700: oklch(0.511 0.096 186.391);
    --olis-teal-800: oklch(0.437 0.078 188.216);

    --olis-sky-50: oklch(0.977 0.013 236.62);
    --olis-sky-100: oklch(0.951 0.026 236.824);
    --olis-sky-200: oklch(0.901 0.058 230.902);
    --olis-sky-500: oklch(0.685 0.169 237.323);
    --olis-sky-700: oklch(0.5 0.134 242.749);
    --olis-sky-800: oklch(0.443 0.11 240.79);

    --olis-blue-50: oklch(0.97 0.014 254.604);
    --olis-blue-100: oklch(0.932 0.032 255.585);
    --olis-blue-200: oklch(0.882 0.059 254.128);
    --olis-blue-500: oklch(0.623 0.214 259.815);
    --olis-blue-700: oklch(0.488 0.243 264.376);
    --olis-blue-800: oklch(0.424 0.199 265.638);

    --olis-violet-50: oklch(0.969 0.016 293.756);
    --olis-violet-100: oklch(0.943 0.029 294.588);
    --olis-violet-200: oklch(0.894 0.057 293.283);
    --olis-violet-500: oklch(0.606 0.25 292.717);
    --olis-violet-700: oklch(0.491 0.27 292.581);
    --olis-violet-800: oklch(0.432 0.232 292.759);

    --olis-pink-50: oklch(0.971 0.014 343.198);
    --olis-pink-100: oklch(0.948 0.028 342.258);
    --olis-pink-200: oklch(0.899 0.061 343.231);
    --olis-pink-500: oklch(0.656 0.241 354.308);
    --olis-pink-700: oklch(0.525 0.223 3.958);
    --olis-pink-800: oklch(0.459 0.187 3.815);

    /* --- Tier 2: accent recipes (soft trio per accent) ----------------- */
    /* bg = -100 tint, fg = -700 text, dot = -500, border = -200. Retune a
       whole accent here in one place without touching components. */

    --olis-accent-slate-bg: var(--olis-slate-200);
    --olis-accent-slate-fg: var(--olis-slate-700);
    --olis-accent-slate-dot: var(--olis-slate-500);
    --olis-accent-slate-border: var(--olis-slate-200);
    /* Solid (bold) variant. AA-safe: -700 bg + white text, except slate
       (kept lighter at -500, neutral shouldn't read near-black) and amber
       (-400 bg needs dark text). */
    --olis-accent-slate-solid-bg: var(--olis-slate-500);
    --olis-accent-slate-solid-fg: white;

    --olis-accent-red-bg: var(--olis-red-100);
    --olis-accent-red-fg: var(--olis-red-700);
    --olis-accent-red-dot: var(--olis-red-500);
    --olis-accent-red-border: var(--olis-red-200);
    --olis-accent-red-solid-bg: var(--olis-red-700);
    --olis-accent-red-solid-fg: white;

    --olis-accent-orange-bg: var(--olis-orange-100);
    --olis-accent-orange-fg: var(--olis-orange-700);
    --olis-accent-orange-dot: var(--olis-orange-500);
    --olis-accent-orange-border: var(--olis-orange-200);
    --olis-accent-orange-solid-bg: var(--olis-orange-700);
    --olis-accent-orange-solid-fg: white;

    --olis-accent-amber-bg: var(--olis-amber-100);
    --olis-accent-amber-fg: var(--olis-amber-700);
    --olis-accent-amber-dot: var(--olis-amber-500);
    --olis-accent-amber-border: var(--olis-amber-200);
    --olis-accent-amber-solid-bg: var(--olis-amber-400);
    --olis-accent-amber-solid-fg: var(--olis-amber-950);

    --olis-accent-green-bg: var(--olis-green-100);
    --olis-accent-green-fg: var(--olis-green-700);
    --olis-accent-green-dot: var(--olis-green-500);
    --olis-accent-green-border: var(--olis-green-200);
    --olis-accent-green-solid-bg: var(--olis-green-700);
    --olis-accent-green-solid-fg: white;

    --olis-accent-emerald-bg: var(--olis-emerald-100);
    --olis-accent-emerald-fg: var(--olis-emerald-700);
    --olis-accent-emerald-dot: var(--olis-emerald-500);
    --olis-accent-emerald-border: var(--olis-emerald-200);
    --olis-accent-emerald-solid-bg: var(--olis-emerald-700);
    --olis-accent-emerald-solid-fg: white;

    --olis-accent-teal-bg: var(--olis-teal-100);
    --olis-accent-teal-fg: var(--olis-teal-700);
    --olis-accent-teal-dot: var(--olis-teal-500);
    --olis-accent-teal-border: var(--olis-teal-200);
    --olis-accent-teal-solid-bg: var(--olis-teal-700);
    --olis-accent-teal-solid-fg: white;

    --olis-accent-sky-bg: var(--olis-sky-100);
    --olis-accent-sky-fg: var(--olis-sky-700);
    --olis-accent-sky-dot: var(--olis-sky-500);
    --olis-accent-sky-border: var(--olis-sky-200);
    --olis-accent-sky-solid-bg: var(--olis-sky-700);
    --olis-accent-sky-solid-fg: white;

    --olis-accent-blue-bg: var(--olis-blue-100);
    --olis-accent-blue-fg: var(--olis-blue-700);
    --olis-accent-blue-dot: var(--olis-blue-500);
    --olis-accent-blue-border: var(--olis-blue-200);
    --olis-accent-blue-solid-bg: var(--olis-blue-700);
    --olis-accent-blue-solid-fg: white;

    --olis-accent-violet-bg: var(--olis-violet-100);
    --olis-accent-violet-fg: var(--olis-violet-700);
    --olis-accent-violet-dot: var(--olis-violet-500);
    --olis-accent-violet-border: var(--olis-violet-200);
    --olis-accent-violet-solid-bg: var(--olis-violet-700);
    --olis-accent-violet-solid-fg: white;

    --olis-accent-pink-bg: var(--olis-pink-100);
    --olis-accent-pink-fg: var(--olis-pink-700);
    --olis-accent-pink-dot: var(--olis-pink-500);
    --olis-accent-pink-border: var(--olis-pink-200);
    --olis-accent-pink-solid-bg: var(--olis-pink-700);
    --olis-accent-pink-solid-fg: white;
}

/* --- Tier 3: utility classes + component styles ------------------------ */
/* .olis-accent-<name> binds the chosen accent to contextual vars that the
   chip and dot read. Put this class on the chip/dot (or an ancestor). */

.olis-accent-slate {
    --olis-accent-bg: var(--olis-accent-slate-bg);
    --olis-accent-fg: var(--olis-accent-slate-fg);
    --olis-accent-dot: var(--olis-accent-slate-dot);
    --olis-accent-border: var(--olis-accent-slate-border);
    --olis-accent-solid-bg: var(--olis-accent-slate-solid-bg);
    --olis-accent-solid-fg: var(--olis-accent-slate-solid-fg);
}

.olis-accent-red {
    --olis-accent-bg: var(--olis-accent-red-bg);
    --olis-accent-fg: var(--olis-accent-red-fg);
    --olis-accent-dot: var(--olis-accent-red-dot);
    --olis-accent-border: var(--olis-accent-red-border);
    --olis-accent-solid-bg: var(--olis-accent-red-solid-bg);
    --olis-accent-solid-fg: var(--olis-accent-red-solid-fg);
}

.olis-accent-orange {
    --olis-accent-bg: var(--olis-accent-orange-bg);
    --olis-accent-fg: var(--olis-accent-orange-fg);
    --olis-accent-dot: var(--olis-accent-orange-dot);
    --olis-accent-border: var(--olis-accent-orange-border);
    --olis-accent-solid-bg: var(--olis-accent-orange-solid-bg);
    --olis-accent-solid-fg: var(--olis-accent-orange-solid-fg);
}

.olis-accent-amber {
    --olis-accent-bg: var(--olis-accent-amber-bg);
    --olis-accent-fg: var(--olis-accent-amber-fg);
    --olis-accent-dot: var(--olis-accent-amber-dot);
    --olis-accent-border: var(--olis-accent-amber-border);
    --olis-accent-solid-bg: var(--olis-accent-amber-solid-bg);
    --olis-accent-solid-fg: var(--olis-accent-amber-solid-fg);
}

.olis-accent-green {
    --olis-accent-bg: var(--olis-accent-green-bg);
    --olis-accent-fg: var(--olis-accent-green-fg);
    --olis-accent-dot: var(--olis-accent-green-dot);
    --olis-accent-border: var(--olis-accent-green-border);
    --olis-accent-solid-bg: var(--olis-accent-green-solid-bg);
    --olis-accent-solid-fg: var(--olis-accent-green-solid-fg);
}

.olis-accent-emerald {
    --olis-accent-bg: var(--olis-accent-emerald-bg);
    --olis-accent-fg: var(--olis-accent-emerald-fg);
    --olis-accent-dot: var(--olis-accent-emerald-dot);
    --olis-accent-border: var(--olis-accent-emerald-border);
    --olis-accent-solid-bg: var(--olis-accent-emerald-solid-bg);
    --olis-accent-solid-fg: var(--olis-accent-emerald-solid-fg);
}

.olis-accent-teal {
    --olis-accent-bg: var(--olis-accent-teal-bg);
    --olis-accent-fg: var(--olis-accent-teal-fg);
    --olis-accent-dot: var(--olis-accent-teal-dot);
    --olis-accent-border: var(--olis-accent-teal-border);
    --olis-accent-solid-bg: var(--olis-accent-teal-solid-bg);
    --olis-accent-solid-fg: var(--olis-accent-teal-solid-fg);
}

.olis-accent-sky {
    --olis-accent-bg: var(--olis-accent-sky-bg);
    --olis-accent-fg: var(--olis-accent-sky-fg);
    --olis-accent-dot: var(--olis-accent-sky-dot);
    --olis-accent-border: var(--olis-accent-sky-border);
    --olis-accent-solid-bg: var(--olis-accent-sky-solid-bg);
    --olis-accent-solid-fg: var(--olis-accent-sky-solid-fg);
}

.olis-accent-blue {
    --olis-accent-bg: var(--olis-accent-blue-bg);
    --olis-accent-fg: var(--olis-accent-blue-fg);
    --olis-accent-dot: var(--olis-accent-blue-dot);
    --olis-accent-border: var(--olis-accent-blue-border);
    --olis-accent-solid-bg: var(--olis-accent-blue-solid-bg);
    --olis-accent-solid-fg: var(--olis-accent-blue-solid-fg);
}

.olis-accent-violet {
    --olis-accent-bg: var(--olis-accent-violet-bg);
    --olis-accent-fg: var(--olis-accent-violet-fg);
    --olis-accent-dot: var(--olis-accent-violet-dot);
    --olis-accent-border: var(--olis-accent-violet-border);
    --olis-accent-solid-bg: var(--olis-accent-violet-solid-bg);
    --olis-accent-solid-fg: var(--olis-accent-violet-solid-fg);
}

.olis-accent-pink {
    --olis-accent-bg: var(--olis-accent-pink-bg);
    --olis-accent-fg: var(--olis-accent-pink-fg);
    --olis-accent-dot: var(--olis-accent-pink-dot);
    --olis-accent-border: var(--olis-accent-pink-border);
    --olis-accent-solid-bg: var(--olis-accent-pink-solid-bg);
    --olis-accent-solid-fg: var(--olis-accent-pink-solid-fg);
}

/* Soft chip / pill */
.olis-chip-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding-block: 0.15rem;
    padding-inline: 0.5rem;
    border-radius: var(--rz-chip-border-radius, 6px);
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    font-weight: var(--rz-chip-font-weight, 400);
    line-height: 1.25;
    white-space: nowrap;
    background: var(--olis-accent-bg, var(--olis-accent-slate-bg));
    color: var(--olis-accent-fg, var(--olis-accent-slate-fg));
}

/* Solid (bold) chip — same shape as soft, higher-weight fill. */
.olis-chip-solid {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding-block: 0.15rem;
    padding-inline: 0.5rem;
    border-radius: var(--rz-chip-border-radius, 6px);
    font-size: var(--rz-text-body2-font-size, 0.875rem);
    font-weight: var(--rz-chip-font-weight, 400);
    line-height: 1.25;
    white-space: nowrap;
    background: var(--olis-accent-solid-bg, var(--olis-accent-slate-solid-bg));
    color: var(--olis-accent-solid-fg, var(--olis-accent-slate-solid-fg));
}

.olis-chip-soft .rzi,
.olis-chip-solid .rzi {
    font-size: 1rem;
    line-height: 1;
}

.olis-chip-text {
    position: relative;
    top: -1px;
}

/* Status dot (+ optional label), for dense tables */
.olis-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.25;
}

.olis-status-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    flex: none;
    background: var(--olis-accent-dot, var(--olis-accent-slate-dot));
}

.olis-status-text {
    color: var(--rz-text-color, inherit);
}