/* ==========================================================================
Syok Design System — tokens.css (v1.18)
Single source of truth for colour, type, spacing, radius and shadow.
Import this file first in every Syok service, then style with var(--*).
Light theme is the default; dark follows the OS unless data-theme is set.
Note on the palette: this is a lifestyle-tech brand named "Syok", distinct
from an existing Malaysian radio-and-podcast app that shares the name.
The wordmark carries colour letter by letter (see DESIGN.md §0 — a
multi-colour lockup, not a solid-red mark), and the display face is a
rounded, humane tech face on purpose: "tech comes from humanity", not
the sharp, cold, corporate default.
========================================================================== */
/* Fonts. For speed, products may instead put the same URL in a in
(after ) and delete this line,
or self-host the files (all three families are SIL Open Font Licence). */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;600&display=swap");
:root {
/* ---- Brand palette (raw, theme-independent) ---------------------------- */
/* Bunga — hibiscus pink-red. Primary. Warmer and more magenta than a
broadcast red on purpose: it reads as "vitality", not "on air". */
--syok-bunga-50: #FFF0F3;
--syok-bunga-100: #FFDCE4;
--syok-bunga-300: #FF87A0;
--syok-bunga-400: #E8355A;
--syok-bunga-500: #D42548; /* primary, light theme */
--syok-bunga-700: #A11A38;
--syok-bunga-900: #650F26;
/* Nyonya — Peranakan tile turquoise. Co-equal second brand colour: this
is a two-tone system, not "red plus a support cast". */
--syok-nyonya-50: #E6FBFA;
--syok-nyonya-100: #C7F5F2;
--syok-nyonya-300: #5FD9D2;
--syok-nyonya-400: #0E9E96;
--syok-nyonya-500: #097B75; /* secondary, light theme */
--syok-nyonya-700: #065E58;
--syok-nyonya-900: #043D38;
/* Emas — tile gold. Accent for promos and celebration, never for CTAs. */
--syok-emas-100: #FFF3D6;
--syok-emas-300: #FFD873;
--syok-emas-500: #F0A202;
--syok-emas-700: #A66E00;
/* Segar — fresh green. Status only (paid / done / online). */
--syok-segar-100: #DFF7E9;
--syok-segar-400: #34C77E;
--syok-segar-500: #0F7F4F;
--syok-segar-700: #0A5C3A;
/* Bahaya — a plainer, more orange-leaning red. Errors only: kept
hue-distinct from Bunga so a destructive action never reads as a CTA. */
--syok-bahaya-100: #FFE1E1;
--syok-bahaya-400: #FF6B75;
--syok-bahaya-500: #D6303C;
--syok-bahaya-700: #A11F29;
/* Malam — night navy. The fourth brand colour: the K in the wordmark,
and a calm, trustworthy fill for tech surfaces. Pure black/ink is kept
for text and utility use, not the brand. */
--syok-malam-50: #EEF1FA;
--syok-malam-100: #DCE3F5;
--syok-malam-300: #93A6E3;
--syok-malam-400: #6A82D4;
--syok-malam-500: #34489A;
--syok-malam-700: #1F2D6E;
--syok-malam-900: #131C47;
/* Dakwat — ink. Cool near-black (a hint of plum). Text and utility only. */
--syok-dakwat-200: #E9E3ED;
--syok-dakwat-400: #A69AAB;
--syok-dakwat-500: #6E6270;
--syok-dakwat-700: #3D3240;
--syok-dakwat-800: #2A2130;
--syok-dakwat-900: #1A1420;
--syok-dakwat-950: #120E16;
/* Kapas — cotton. Warm neutral ground, kept separate from ink's cool cast
so surfaces still feel hospitable next to the vivid brand pair. */
--syok-kapas-50: #FDF8F4;
--syok-kapas-100: #F6EEE7;
--syok-kapas-200: #EFE4DC;
/* ---- Semantic roles (use these in components) -------------------------- */
--color-bg: var(--syok-kapas-50);
--color-surface: #FFFFFF;
--color-surface-muted: var(--syok-kapas-100);
--color-border: var(--syok-kapas-200);
--color-border-strong: var(--syok-dakwat-900);
--color-text: var(--syok-dakwat-900);
--color-text-muted: var(--syok-dakwat-500);
--color-text-inverse: #FFFFFF;
--color-primary: var(--syok-bunga-500);
--color-primary-hover: var(--syok-bunga-700);
--color-primary-soft: var(--syok-bunga-50);
--color-on-primary: #FFFFFF;
--color-secondary: var(--syok-nyonya-500);
--color-secondary-hover: var(--syok-nyonya-700);
--color-secondary-soft: var(--syok-nyonya-50);
--color-on-secondary: #FFFFFF;
--color-accent: var(--syok-emas-500);
--color-on-accent: var(--syok-dakwat-950);
--color-link: var(--syok-nyonya-500);
--color-success: var(--syok-segar-500);
--color-success-soft: var(--syok-segar-100);
--color-warning: var(--syok-emas-700);
--color-warning-soft: var(--syok-emas-100);
--color-danger: var(--syok-bahaya-500);
--color-danger-soft: var(--syok-bahaya-100);
--color-success-text: #116A46;
--color-warning-text: #8A5C06;
--color-danger-text: #B02A36;
--color-info: var(--syok-nyonya-500);
--color-info-soft: var(--syok-nyonya-50);
--color-night: var(--syok-malam-700);
--color-scrim: rgb(18 14 22 / .48); /* behind drawers and dialogs */
--color-focus: var(--syok-nyonya-500);
--shadow-color: var(--syok-dakwat-900);
/* ---- Font family -------------------------------------------------------- */
/* Rounded, humane tech face — soft terminals instead of sharp corporate
corners, because the brand's premise is "tech comes from humanity". */
--font-display: "M PLUS Rounded 1c", "Baloo 2", ui-rounded, "Arial Rounded MT Bold", sans-serif;
--font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
/* ---- Type scale (1.25 major third, 16px base) --------------------------- */
--text-xs: 0.75rem; /* 12px captions, labels */
--text-sm: 0.875rem; /* 14px secondary text, table cells */
--text-base: 1rem; /* 16px body */
--text-lg: 1.25rem; /* 20px lead paragraph */
--text-xl: 1.5625rem; /* 25px h4 */
--text-2xl: 1.9375rem; /* 31px h3 */
--text-3xl: 2.4375rem; /* 39px h2 */
--text-4xl: 3.0625rem; /* 49px h1 */
--text-5xl: 3.8125rem; /* 61px hero */
--leading-tight: 1.08;
--leading-snug: 1.3;
--leading-body: 1.6;
--tracking-display: -0.005em;
--tracking-label: 0.08em;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold:600;
--weight-bold: 700;
--weight-black: 800;
/* ---- Spacing: 4px base. Use for padding, margin and gap ----------------- */
--space-0: 0;
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.5rem; /* 24px */
--space-6: 2rem; /* 32px */
--space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */
--space-9: 6rem; /* 96px */
/* ---- Layout -------------------------------------------------------------
Breakpoints (min-width). CSS can't read variables inside @media, so media
queries use these exact numbers; the variables are here for JS and docs.
phone 0–599 · 4 columns · gutter 16
tablet 600–1023 · 8 columns · gutter 24
desktop 1024–1439 · 12 columns · gutter 32
wide 1440+ · 12 columns · gutter 32, content stays in the container */
--bp-tablet: 600px;
--bp-desktop: 1024px;
--bp-wide: 1440px;
--gutter: var(--space-4); /* side padding: 16 / 24 / 32 (set per breakpoint below) */
--grid-columns: 4; /* 4 / 8 / 12 */
--grid-gap: var(--space-4); /* 16 / 24 / 24 */
--container-narrow: 45rem; /* 720px: forms, articles, sign-in */
--container-max: 72rem; /* 1152px: most pages */
--container-wide: 90rem; /* 1440px: dashboards, data-heavy pages */
--measure: 65ch; /* max width of running text */
--header-height: 56px; /* 56 on phones, 64 from tablet up */
--sidebar-width: 256px;
--sidebar-collapsed: 72px;
--drawer-width: min(320px, 86vw);
/* Layers: keep every z-index on this scale */
--z-sticky: 10; /* sticky table headers, sub-bars */
--z-header: 100;
--z-drawer: 200; /* drawers and their scrim */
--z-dialog: 300;
--z-toast: 400;
/* ---- Radius ------------------------------------------------------------- */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-pill: 999px;
/* ---- Borders & shadow --------------------------------------------------- */
--border-width: 1px;
--border-width-bold: 2px;
/* Elevation: soft, layered, low-contrast — product UI, not stickers. */
--shadow-xs: 0 1px 2px rgb(18 14 22 / .06);
--shadow-sm: 0 1px 2px rgb(18 14 22 / .06), 0 1px 3px rgb(18 14 22 / .08);
--shadow-md: 0 2px 4px rgb(18 14 22 / .05), 0 6px 16px rgb(18 14 22 / .08);
--shadow-lg: 0 4px 8px rgb(18 14 22 / .06), 0 16px 40px rgb(18 14 22 / .12);
--ring-focus: 0 0 0 3px color-mix(in srgb, var(--color-focus) 35%, transparent);
/* ---- Motion ------------------------------------------------------------- */
--ease-out: cubic-bezier(.2, .8, .2, 1); /* things arriving: menus, drawers, toasts */
--ease-in: cubic-bezier(.4, 0, 1, 1); /* things leaving */
--ease-in-out: cubic-bezier(.4, 0, .2, 1); /* things moving from A to B */
--duration-fast: 120ms;
--duration-base: 200ms; /* drawers, dialogs, tabs */
--duration-slow: 320ms; /* large surfaces, page-level changes; never longer */
/* ---- Charts (DESIGN.md §1.6) -------------------------------------------
Categorical order is fixed and validated for colour-blind separation in
both modes (worst adjacent CVD ΔE 16.2 light / 14.9 dark). Max 5 series;
fold the rest into "Other". Status colours are never series colours. */
--chart-1: var(--syok-nyonya-400); /* #0E9E96 */
--chart-2: var(--syok-emas-500); /* #F0A202 — under 3:1 on light: label it directly */
--chart-3: var(--syok-malam-500); /* #34489A */
--chart-4: var(--syok-bunga-400); /* #E8355A */
--chart-5: #4A3AA7; /* Ungu (violet), chart-only */
--chart-seq-1: var(--syok-nyonya-400); /* one hue, light → dark, for ordered data */
--chart-seq-2: var(--syok-nyonya-500);
--chart-seq-3: var(--syok-nyonya-700);
--chart-seq-4: var(--syok-nyonya-900);
--chart-div-neg: var(--syok-bunga-500); /* diverging: below the baseline */
--chart-div-mid: var(--syok-kapas-100); /* neutral midpoint, never a hue */
--chart-div-pos: var(--syok-nyonya-500); /* above the baseline */
--chart-grid: var(--color-border);
--chart-axis: var(--color-text-muted);
}
/* ---- Layout values per breakpoint ------------------------------------------ */
@media (min-width: 600px) {
:root { --gutter: var(--space-5); --grid-columns: 8; --grid-gap: var(--space-5); --header-height: 64px; }
}
@media (min-width: 1024px) {
:root { --gutter: var(--space-6); --grid-columns: 12; }
}
/* ---- Dark theme: OS preference, unless the user forced light ------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-bg: var(--syok-dakwat-950);
--color-surface: var(--syok-dakwat-800);
--color-surface-muted: #241A29;
--color-border: var(--syok-dakwat-700);
--color-border-strong: #F2ECF4;
--color-text: #F6F1F8;
--color-text-muted: var(--syok-dakwat-400);
--color-text-inverse: var(--syok-dakwat-950);
--color-primary: var(--syok-bunga-400);
--color-primary-hover: var(--syok-bunga-300);
--color-primary-soft: var(--syok-bunga-900);
--color-on-primary: var(--syok-dakwat-950);
--color-secondary: var(--syok-nyonya-400);
--color-secondary-hover: var(--syok-nyonya-300);
--color-secondary-soft: var(--syok-nyonya-900);
--color-on-secondary: var(--syok-dakwat-950);
--color-accent: var(--syok-emas-300);
--color-on-accent: var(--syok-dakwat-950);
--color-link: var(--syok-nyonya-400);
--color-success: var(--syok-segar-400);
--color-success-soft: #103324;
--color-warning: var(--syok-emas-300);
--color-warning-soft: #362508;
--color-danger: var(--syok-bahaya-400);
--color-danger-soft: #3A1418;
--color-success-text: #5BCF96;
--color-warning-text: #FDDD8E;
--color-danger-text: #FD868F;
--color-info: var(--syok-nyonya-400);
--color-info-soft: #0F2E2C;
--color-night: var(--syok-malam-300);
--color-scrim: rgb(0 0 0 / .62); /* behind drawers and dialogs */
--chart-1: var(--syok-nyonya-400);
--chart-2: var(--syok-emas-700);
--chart-3: var(--syok-malam-400);
--chart-4: var(--syok-bunga-400);
--chart-5: #9085E9;
--chart-seq-1: var(--syok-nyonya-700); /* dark: small values sit near the surface */
--chart-seq-2: var(--syok-nyonya-500);
--chart-seq-3: var(--syok-nyonya-400);
--chart-seq-4: var(--syok-nyonya-300);
--chart-div-neg: var(--syok-bunga-400);
--chart-div-mid: var(--syok-dakwat-700);
--chart-div-pos: var(--syok-nyonya-400);
--color-focus: var(--syok-nyonya-400);
--shadow-color: #000000;
}
}
/* ---- Dark theme: explicit toggle ---------------------------------------- */
:root[data-theme="dark"] {
color-scheme: dark;
--color-bg: var(--syok-dakwat-950);
--color-surface: var(--syok-dakwat-800);
--color-surface-muted: #241A29;
--color-border: var(--syok-dakwat-700);
--color-border-strong: #F2ECF4;
--color-text: #F6F1F8;
--color-text-muted: var(--syok-dakwat-400);
--color-text-inverse: var(--syok-dakwat-950);
--color-primary: var(--syok-bunga-400);
--color-primary-hover: var(--syok-bunga-300);
--color-primary-soft: var(--syok-bunga-900);
--color-on-primary: var(--syok-dakwat-950);
--color-secondary: var(--syok-nyonya-400);
--color-secondary-hover: var(--syok-nyonya-300);
--color-secondary-soft: var(--syok-nyonya-900);
--color-on-secondary: var(--syok-dakwat-950);
--color-accent: var(--syok-emas-300);
--color-on-accent: var(--syok-dakwat-950);
--color-link: var(--syok-nyonya-400);
--color-success: var(--syok-segar-400);
--color-success-soft: #103324;
--color-warning: var(--syok-emas-300);
--color-warning-soft: #362508;
--color-danger: var(--syok-bahaya-400);
--color-danger-soft: #3A1418;
--color-success-text: #5BCF96;
--color-warning-text: #FDDD8E;
--color-danger-text: #FD868F;
--color-info: var(--syok-nyonya-400);
--color-info-soft: #0F2E2C;
--color-night: var(--syok-malam-300);
--color-scrim: rgb(0 0 0 / .62); /* behind drawers and dialogs */
--chart-1: var(--syok-nyonya-400);
--chart-2: var(--syok-emas-700);
--chart-3: var(--syok-malam-400);
--chart-4: var(--syok-bunga-400);
--chart-5: #9085E9;
--chart-seq-1: var(--syok-nyonya-700); /* dark: small values sit near the surface */
--chart-seq-2: var(--syok-nyonya-500);
--chart-seq-3: var(--syok-nyonya-400);
--chart-seq-4: var(--syok-nyonya-300);
--chart-div-neg: var(--syok-bunga-400);
--chart-div-mid: var(--syok-dakwat-700);
--chart-div-pos: var(--syok-nyonya-400);
--color-focus: var(--syok-nyonya-400);
--shadow-color: #000000;
}
/* ---- High contrast: the OS asks for more contrast ---------------------------
Muted text and hairlines get darker (lighter in dark mode); focus becomes a solid ring. */
@media (prefers-contrast: more) {
:root {
--color-text-muted: var(--syok-dakwat-700);
--color-border: var(--syok-dakwat-500);
--ring-focus: 0 0 0 3px var(--color-focus);
}
:root[data-theme="dark"] { --color-text-muted: var(--syok-dakwat-200); --color-border: var(--syok-dakwat-400); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --color-text-muted: var(--syok-dakwat-200); --color-border: var(--syok-dakwat-400); }
}