:root{
/* Base ramp — monochrome only */
--black-1:#0A0A0A;   /* primary black, dominant background */
--black-2:#161616;   /* secondary black, alternate surface */
--grey-1:#292929;    /* dark grey, dividers + secondary elements */
--grey-2:#454545;    /* interpolated step, hairline on dark */
--grey-3:#8B8B8B;    /* mid grey, metadata + secondary info */
--grey-4:#C9C7C1;    /* interpolated step, muted on light */
--off-white:#F2F1ED; /* use instead of pure white */
--white:#FFFFFF;     /* reserve for logo assets only */

/* Semantic — surfaces */
--surface-page:var(--black-1);
--surface-raised:var(--black-2);
--surface-inverse:var(--off-white);
--surface-panel:var(--grey-1);

/* Semantic — text on dark */
--text-primary:var(--off-white);
--text-secondary:var(--grey-3);
--text-meta:var(--grey-3);
--text-disabled:var(--grey-2);

/* Semantic — text on light */
--text-primary-inverse:var(--black-1);
--text-secondary-inverse:#5C5C5C;
--text-meta-inverse:var(--grey-3);

/* Semantic — lines */
--rule-strong:var(--grey-1);
--rule-hairline:rgba(242,241,237,0.14);
--rule-hairline-inverse:rgba(10,10,10,0.16);

/* Interaction — no colour shift, opacity + inversion only */
--state-hover-veil:rgba(242,241,237,0.06);
--state-press-veil:rgba(242,241,237,0.12);
--focus-ring:var(--off-white);

/* Overlays for type-on-image legibility */
--scrim-image:rgba(10,10,10,0.42);
--scrim-bottom:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,0.86) 100%); /* @kind other */
}