:root{
/* Brand gradient stops — sampled from the Sylla wordmark, left to right */
--brand-blue:#001EF4;--brand-indigo:#3A2FE9;--brand-violet:#693DDE;--brand-orchid:#9E4EDB;--brand-magenta:#BD56CE;--brand-pink:#D15CCD;
--brand-blue-700:#0016BF;--brand-blue-300:#6C79FF;--brand-pink-300:#E9A0E2;
/* The gradient itself. Sylla is a gradient brand: the ramp is a token, not a decoration. */
--brand-gradient:linear-gradient(90deg,#001EF4 0%,#693DDE 52%,#D15CCD 100%); /* @kind color */
--brand-gradient-diagonal:linear-gradient(135deg,#001EF4 0%,#7D43DB 50%,#D15CCD 100%); /* @kind color */
--brand-gradient-soft:linear-gradient(90deg,rgba(0,30,244,.16) 0%,rgba(125,67,219,.16) 52%,rgba(209,92,205,.16) 100%); /* @kind color */
--brand-glow:radial-gradient(60% 80% at 70% 40%,rgba(158,78,219,.45) 0%,rgba(11,10,13,0) 70%); /* @kind color */

/* Neutral ramp — the app ships dark first */
--ink-0:#0B0A0D;--ink-1:#121114;--ink-2:#1B1A1E;--ink-3:#24232A;--ink-4:#34333B;--ink-5:#4B4A54;
--slate-500:#6F6D77;--slate-400:#8B8993;--slate-300:#A5A3AD;--slate-200:#C9C7D1;--slate-100:#ECEAF2;--slate-50:#F6F5F9;--white:#FFFFFF;

/* Semantic status */
--green-500:#3DDC84;--green-600:#22B268;--amber-500:#F5B93B;--red-500:#E5484D;--sky-500:#3B9BF5;

/* Aliases — dark surface (default for the LXP product) */
--bg-canvas:var(--ink-0);--surface-page:var(--ink-1);--surface-card:var(--ink-2);--surface-raised:var(--ink-3);--surface-input:#17161B;--surface-hover:rgba(255,255,255,.05);--surface-active:rgba(255,255,255,.09);
--border-subtle:rgba(255,255,255,.07);--border-default:rgba(255,255,255,.12);--border-strong:rgba(255,255,255,.22);--border-focus:var(--brand-blue-300);
--text-primary:#FFFFFF;--text-secondary:var(--slate-300);--text-muted:var(--slate-500);--text-inverse:var(--ink-0);--text-brand:var(--brand-pink-300);--text-link:var(--brand-blue-300);
--accent-primary:var(--brand-blue);--accent-secondary:var(--brand-pink);
--status-success:var(--green-500);--status-warning:var(--amber-500);--status-danger:var(--red-500);--status-info:var(--sky-500);
}
/* Light scope — used by the mobile app, marketing site and printed collateral */
.sylla-light{
--bg-canvas:var(--slate-50);--surface-page:var(--white);--surface-card:var(--white);--surface-raised:var(--white);--surface-input:var(--white);--surface-hover:rgba(11,10,13,.04);--surface-active:rgba(11,10,13,.07);
--border-subtle:rgba(11,10,13,.07);--border-default:var(--slate-100);--border-strong:var(--slate-200);
--text-primary:#14131A;--text-secondary:#4B4A54;--text-muted:var(--slate-400);--text-inverse:var(--white);--text-brand:var(--brand-violet);--text-link:var(--brand-blue);
}
/* Dark scope — restates the :root dark aliases so a dark section can sit inside a light page */
.sylla-dark{
--bg-canvas:var(--ink-0);--surface-page:var(--ink-1);--surface-card:var(--ink-2);--surface-raised:var(--ink-3);--surface-input:#17161B;--surface-hover:rgba(255,255,255,.05);--surface-active:rgba(255,255,255,.09);
--border-subtle:rgba(255,255,255,.07);--border-default:rgba(255,255,255,.12);--border-strong:rgba(255,255,255,.22);
--text-primary:#FFFFFF;--text-secondary:var(--slate-300);--text-muted:var(--slate-500);--text-inverse:var(--ink-0);--text-brand:var(--brand-pink-300);--text-link:var(--brand-blue-300);
}