/* ==========================================================================
VIVID — DESIGN TOKENS
--------------------------------------------------------------------------
High-energy, image-led DTC commerce for an industrial packaging printer.
The theme's signature is a CONTRAST RHYTHM: crisp white sections alternating
with full-bleed INK bands, with the Bakkar red used as a FLAT, confident
block colour (never a gradient — that belongs to Momentum).
==========================================================================
DARK MODE — READ THIS BEFORE YOU TOUCH A COLOUR
==========================================================================
Vivid's identity IS the light → dark → light band rhythm. Dark mode does NOT
flatten the page into one black sheet. It INVERTS the rhythm:
LIGHT DARK
page #FFFFFF white → #0A0B10 near-black
.band--ink #0E1016 near-black → #262C3C a LIFTED graphite slab
.band--red #DA1920 solid red → #DA1920 solid red (unchanged)
So in dark the page still reads as a STACK OF ALTERNATING BANDS — the band is
simply the lighter tone instead of the darker one. Everything that used to
live "on ink" (white headings, ink-200 body) still works, because the slab is
still dark enough to carry white text (12.4:1).
Cards sit one step above the page (--surface), and a card ON the band sits one
step above the band (--surface-ink-card). The rhythm survives at every depth.
THE RULE: never type a raw ramp value (--ink-900, --white) for a SURFACE, a
BORDER or a TEXT colour. Use the semantic tokens in §2. The only legitimate
raw usage is on top of a PHOTOGRAPH (a scrim, a badge sitting on an image) —
those are theme-independent by nature.
Driven by , stamped BEFORE first paint by the
inline boot script in every page's . The same block is repeated inside
@media (prefers-color-scheme: dark) for :root:not([data-theme]) so a
JS-disabled visitor on a dark OS still gets dark. KEEP THE TWO IN SYNC.
========================================================================== */
/* ==========================================================================
0. SULTAN NAHIA — the self-hosted Arabic face, and the theme's DEFAULT.
Ships as a single weight; the browser synthesises the bold, so the range is
declared 400–700 rather than lying about a 700 file that does not exist.
Self-hosted, so it works offline and over file:// — no network round-trip.
========================================================================== */
@font-face {
font-family: 'Sultan Nahia';
src: url('../fonts/SultanNahia.ttf') format('truetype');
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
:root {
color-scheme: light;
/* ======================================================================
1. RAW COLOUR RAMPS (never used directly for surfaces / text / lines)
====================================================================== */
/* --- Ink: the signature dark. Blue-black, not warm, not pure black. ---- */
--ink-950: #08090D;
--ink-900: #0E1016; /* THE dark band colour in LIGHT mode */
--ink-850: #14161F;
--ink-800: #1A1D28;
--ink-700: #262A38;
--ink-600: #363B4D;
--ink-500: #4C5266;
--ink-400: #6B7186;
--ink-300: #9096A8;
--ink-200: #BFC3CF;
--ink-100: #DFE1E8;
--ink-050: #EEEFF3;
--ink-025: #F6F7F9;
/* --- Bakkar red. Flat block colour. -----------------------------------
TWO reds, and the reason matters.
#ED1C24 is the LOGO red. Against it, white text scores 4.38:1 and BLACK
text scores 4.31:1 — i.e. NOTHING passes AA on it, because it sits at
exactly the wrong luminance. So it cannot carry small text, full stop.
--red-brand #ED1C24 the identity. Used ONLY where no text sits on it:
the hero block, the underline rule, dots, ::selection.
--red-500 #DA1920 the working red. 5.07:1 with white — every surface
that carries a LABEL (buttons, badges, the red band,
and the customiser's "Bakkar Red" header / sidebar).
The two differ by 19/255 on one channel: side by side they read as the
same red, and the brand block colour is genuinely on the page.
--------------------------------------------------------------------- */
--red-brand: #ED1C24; /* logo / decorative fills only — never behind text */
--red-700: #9E1016; /* red TEXT on a white plate — 8.1:1 */
--red-600: #C0161C;
--red-500: #DA1920; /* the working red — AA-safe with white text (5.07:1) */
--red-400: #F4474D;
--red-300: #FA7B7F;
--red-200: #FDBFC2;
--red-100: #FEE4E5;
--red-050: #FFF1F1;
/* --- Support: one warm neutral so white sections can breathe. ---------- */
--sand-100: #F4F2ED;
--sand-050: #FAF9F6;
/* --- Utility ---------------------------------------------------------- */
--white: #FFFFFF;
--black: #08090D;
/* ======================================================================
2. SEMANTIC COLOUR — THE ONLY THING COMPONENTS MAY TYPE
====================================================================== */
/* --- Surfaces --------------------------------------------------------- */
--page: var(--white); /* the body canvas */
--surface: var(--white); /* cards, panels, header, dialogs */
--surface-raised: var(--white);
--surface-sunken: var(--ink-025); /* hover beds, inset strips, feet */
--surface-warm: var(--sand-050);
--media-bed: var(--ink-050); /* the plate an loads onto */
/* The BAND. Full-bleed, alternating with the page. In dark it becomes the
LIGHTER tone — that is how the rhythm survives the inversion. */
--surface-ink: var(--ink-900);
--surface-ink-soft: var(--ink-850);
--surface-ink-card: var(--ink-800); /* a card sitting ON the band */
--surface-ink-line: var(--ink-700); /* its border */
--band-edge: transparent; /* hairline that crisps the band in dark */
/* The red band. Identical in both themes — the red keeps its punch. */
--surface-red: var(--red-500);
/* --- Text ------------------------------------------------------------- */
--text: var(--ink-900);
--text-strong: var(--ink-900);
--text-2: var(--ink-700); /* nav links, secondary UI */
--text-muted: var(--ink-500);
--text-subtle: var(--ink-400);
--text-inverse: var(--white);
/* Text on the ink band (checked against BOTH band tones). */
--text-on-ink: var(--white);
--text-on-ink-muted: var(--ink-200);
--text-on-ink-subtle: var(--ink-300);
/* Text on red. Even on the darkened working red, a tinted "muted" pink only
reaches ~3.9:1 — so body copy on a red band is PURE WHITE, and hierarchy
is carried by weight and size instead of by tint. */
--text-on-red: var(--white);
--text-on-red-muted: var(--white);
/* --- Brand ------------------------------------------------------------ */
--brand: var(--red-500);
--brand-strong: var(--red-600);
--brand-ink: var(--ink-900);
/* Red as TEXT on the page is only 4.0:1 at #ED1C24, so link/eyebrow red is
darkened in light — and BRIGHTENED in dark, where a dark red would vanish. */
--brand-text: var(--red-600);
--brand-soft: var(--red-050); /* tinted plate */
--brand-soft-fg: var(--red-700); /* text ON --brand-soft */
/* Red TEXT sitting ON the ink band (kickers, small labels). The band is the
one surface whose LUMINANCE MOVES between the themes, so this red has to
move with it: #F4474D is 5.3:1 on the light-mode band (#0E1016) but only
3.88:1 on the dark-mode band (#262C3C), which fails at 12px. */
--brand-on-ink: var(--red-400);
/* --- INVERT — "a solid block of the opposite of the page" -------------
The chunky solid slug behind: the default .btn, .btn--ink, an active chip,
the .langsw / .viewsw / .seg thumb, .badge--ink, the avatar, a table head.
In light it is ink-on-white; in dark it flips to white-on-ink, so a solid
button never becomes a black hole on a black page. */
--invert-bg: var(--ink-900);
--invert-bg-h: var(--ink-800);
--invert-fg: var(--white);
/* --- Lines. Vivid uses BOLD borders where they earn it. ---------------- */
--line: var(--ink-100);
--line-strong: var(--ink-200);
--line-bold: var(--ink-900); /* THE signature 2px border */
--line-on-ink: rgba(255, 255, 255, 0.14);
--line-on-red: rgba(255, 255, 255, 0.28);
/* --- Overlays: the only safe way to tint over an unknown ground -------- */
--overlay-1: rgba(14, 16, 22, 0.06);
--overlay-2: rgba(14, 16, 22, 0.12);
--scrim: rgba(8, 9, 13, 0.72); /* dialog / drawer backdrop */
/* --- Focus ------------------------------------------------------------ */
--focus: var(--ink-900);
--focus-on-ink: var(--white);
--focus-on-red: var(--white);
/* --- Status ----------------------------------------------------------- */
--ok-500: #14804A;
--ok-050: #E7F4EC;
--warn-500:#A66200;
--warn-050:#FFF3E0;
--err-500: #C8151C;
--err-050: #FEE9EA;
/* The