/* ============================================================
   NiCE brand foundations — self-contained.
   Transcribed from the NiCE Brand Design System (NiCE New Brand
   2026). Fonts, colour, type, spacing, radius, elevation, motion.
   No React, no design-tool runtime — plain CSS custom properties.
   ============================================================ */

/* ---- Webfonts: Be Vietnam Pro, four brand weights ---------- */
@font-face{font-family:"Be Vietnam Pro";font-weight:300;font-style:normal;font-display:swap;
  src:url("fonts/BeVietnamPro-Light.ttf") format("truetype")}
@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-style:normal;font-display:swap;
  src:url("fonts/BeVietnamPro-Regular.ttf") format("truetype")}
@font-face{font-family:"Be Vietnam Pro";font-weight:500;font-style:normal;font-display:swap;
  src:url("fonts/BeVietnamPro-Medium.ttf") format("truetype")}
@font-face{font-family:"Be Vietnam Pro";font-weight:600;font-style:normal;font-display:swap;
  src:url("fonts/BeVietnamPro-SemiBold.ttf") format("truetype")}

:root{
  /* ---- Primary palette ------------------------------------- */
  --nice-blue:#3694fc;          /* the load-bearing brand colour — a pillar, not an accent */
  --nice-charcoal:#21212b;      /* near-black text and dark surfaces */
  --nice-white:#ffffff;
  --nice-mushroom:#f2f0eb;      /* warm white — panels and bubbles ONLY, never a full-bleed bg */

  /* ---- Secondary spectrum (emerald → teal → blue → indigo → coral) --- */
  --nice-emerald:#00e3a1;       --nice-emerald-tint:#9cedd1;
  --nice-teal:#36ebd1;          --nice-teal-tint:#abf7f2;
  --nice-electric-blue:#025afb; --nice-electric-blue-tint:#8fb6fd;
  --nice-electric-indigo:#6100ff;--nice-electric-indigo-tint:#b98eff;
  --nice-coral:#ff6aa7;         --nice-coral-tint:#ffb5d3;
  --nice-blue-tint:#a6d0fe;

  /* ---- Semantic ------------------------------------------- */
  --color-bg:var(--nice-white);
  --color-surface:var(--nice-white);
  --color-surface-warm:var(--nice-mushroom);
  --color-surface-dark:var(--nice-charcoal);
  --color-text:var(--nice-charcoal);
  --color-text-muted:#6d6d72;
  --color-text-inverse:var(--nice-white);
  --color-link:#1900ff;
  --color-link-hover:var(--nice-electric-indigo);
  --color-border:rgba(33,33,43,0.14);
  --color-border-soft:rgba(33,33,43,0.1);
  --color-grid:rgba(33,33,43,0.08);

  /* ---- Status tones (chips, deltas) ------------------------ */
  --tone-good-bg:#ddf7ee;  --tone-good-fg:#056b52;
  --tone-warn-bg:#f2f0eb;  --tone-warn-fg:#21212b;
  --tone-bad-bg:#ffe3ee;   --tone-bad-fg:#a31256;
  --tone-info-bg:#e4effe;  --tone-info-fg:#0a4fa8;

  /* ---- Signature gradients --------------------------------- */
  /* Background gradients must read as >=50% NiCE blue.
     Freeform gradients use 2–3 ADJACENT-column hues only —
     emerald/teal never meets coral. */
  --gradient-bg:linear-gradient(120deg,#3694fc 0%,#3694fc 55%,#025afb 100%);
  --gradient-teal-blue:linear-gradient(135deg,#36ebd1 0%,#3694fc 100%);
  --gradient-blue-eblue:linear-gradient(135deg,#3694fc 0%,#025afb 100%);
  --gradient-eblue-indigo:linear-gradient(135deg,#025afb 0%,#6100ff 100%);
  --gradient-indigo-coral:linear-gradient(135deg,#6100ff 0%,#ff6aa7 100%);

  /* ---- Type ------------------------------------------------ */
  --font-sans:"Be Vietnam Pro",Arial,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --weight-light:300;    /* body */
  --weight-regular:400;  /* feature / intro */
  --weight-medium:500;   /* labels, buttons, nav */
  --weight-semibold:600; /* headlines */
  --leading-headline:1.2;
  --leading-body:1.35;
  --tracking-headline:-0.03em;
  --tracking-body:-0.01em;

  /* ---- Spacing, radius, elevation, motion ------------------ */
  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px;
  --radius-pill:999px;  /* every interactive element is a pill */
  --radius-tag:6px;     /* the one deliberate non-pill */
  --radius-md:16px; --radius-lg:20px; --radius-xl:24px;
  --radius-2xl:28px; --radius-3xl:32px; --radius-4xl:40px;
  --shadow-card:0 4px 12.5px 3px rgba(0,0,0,0.05);
  --ease-brand:cubic-bezier(0.22,1,0.36,1);
  --duration-fast:140ms; --duration-base:240ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-weight:var(--weight-light);
  font-size:1rem;
  line-height:var(--leading-body);
  letter-spacing:var(--tracking-body);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-weight:var(--weight-semibold);
  line-height:var(--leading-headline);
  letter-spacing:var(--tracking-headline);
  color:var(--color-text);
  margin:0;
  text-wrap:balance;
}
p{text-wrap:pretty;margin:0}
a{color:var(--color-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-brand)}
a:hover{color:var(--color-link-hover)}
::selection{background:var(--nice-blue);color:var(--nice-white)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(33,33,43,0.18);border-radius:var(--radius-pill)}

/* ---- Brand primitives ------------------------------------- */

/* Pill button — tones charcoal / blue / light. Press scales 0.97. */
.n-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 20px;border:0;border-radius:var(--radius-pill);
  font-family:inherit;font-size:13px;font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-body);cursor:pointer;
  transition:filter var(--duration-fast) var(--ease-brand),transform var(--duration-fast) var(--ease-brand);
}
.n-btn:hover{filter:brightness(0.94)}
.n-btn:active{transform:scale(0.97)}
.n-btn--charcoal{background:var(--nice-charcoal);color:var(--nice-white)}
.n-btn--blue{background:var(--nice-blue);color:var(--nice-white)}
.n-btn--light{background:rgba(242,240,235,0.8);color:var(--nice-charcoal)}

/* Text link with the brand arrow — arrow slides 4px on hover. */
.n-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:var(--weight-medium);color:var(--nice-charcoal);
  letter-spacing:-0.02em;cursor:pointer;
}
.n-link .n-link__arrow{transition:transform var(--duration-base) var(--ease-brand);display:inline-block}
.n-link:hover{color:var(--color-link)}
.n-link:hover .n-link__arrow{transform:translateX(4px)}

/* Category tag — the 6px chip, the one non-pill. */
.n-tag{
  display:inline-block;border-radius:var(--radius-tag);padding:4px 9px;
  font-size:10.5px;font-weight:var(--weight-medium);letter-spacing:0;
  background:var(--nice-mushroom);color:var(--nice-charcoal);white-space:nowrap;
}
.n-tag--good{background:var(--tone-good-bg);color:var(--tone-good-fg)}
.n-tag--bad{background:var(--tone-bad-bg);color:var(--tone-bad-fg)}
.n-tag--info{background:var(--tone-info-bg);color:var(--tone-info-fg)}

/* Product tag — outlined pill. */
.n-ptag{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(33,33,43,0.2);border-radius:var(--radius-pill);
  padding:6px 14px;font-size:11.5px;font-weight:var(--weight-medium);
}
.n-ptag__dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor;flex:none}

/* Eyebrow label — the only place ALL-CAPS is allowed. */
.n-eyebrow{
  font-size:11px;font-weight:var(--weight-medium);
  letter-spacing:0.14em;text-transform:uppercase;color:var(--color-text-muted);
}