/* ========================================================================== tokens.css. Saka design tokens Values extracted from the Figma frames (Saka Home Wireframe). Nothing in this file may be a raw value used elsewhere; every other stylesheet consumes these custom properties only. ========================================================================== */ :root { /* ---- Brand ----------------------------------------------------------- */ --ink: #12142B; /* primary dark: text, hero, primary button */ --ink-deep: #0C1021; /* deepest dark: device frame, nav shadowing */ --ink-alt: #143032; /* card/product titles */ --paper: #F2F2F6; /* page background */ --panel: #FFFFFF; /* cards, sheets, surfaces */ --violet: #6B2FC4; /* primary action / active / links */ --violet-soft: #EDE6F9; /* tinted panel + pill background */ --violet-tint: #F7F3FD; /* selected input / upload zone fill */ --violet-line: #E0D2F5; /* violet rules, progress track */ --violet-nav: #E9E4F5; /* active bottom-nav pill, scallop strip */ --violet-deep: #3B1670; /* text on violet-soft */ --green: #0E8A72; /* success, completed, verified */ --green-soft: #DFF3EE; /* success pill background */ --green-panel: #E3F3EF; /* success note panel */ --green-deep: #0D4B41; /* text on green panel */ --green-mid: #2E7C6C; /* secondary text on green panel */ --amber: #C79A2E; /* pending / processing / warning */ --amber-soft: #FBF3DF; /* warning pill + note background */ --red: #C6303A; /* destructive, validation errors */ --red-soft: #FDECEC; /* ---- Text ------------------------------------------------------------ */ --text: #12142B; /* headings, primary */ --text-strong: #143032; /* item titles */ --text-body: #55566B; /* body copy, secondary labels */ --text-muted: #7C7D8E; /* supporting paragraph copy */ --text-soft: #9394A5; /* meta, placeholder, captions */ --text-faint: #A9A7AE; /* weakest meta */ --text-disabled: #C6C7D3; /* disabled labels, future timeline steps */ --on-dark: #FFFFFF; --on-dark-mid: rgba(255, 255, 255, 0.75); --on-dark-soft: rgba(255, 255, 255, 0.50); --on-dark-line: rgba(255, 255, 255, 0.30); --on-dark-fill: rgba(255, 255, 255, 0.12); --on-dark-fill-2: rgba(255, 255, 255, 0.14); /* ---- Lines & neutral surfaces ---------------------------------------- */ --line: #ECECF1; /* card border */ --line-input: #E0E0E7; /* input / secondary button border */ --line-chip: #E4E4EB; /* filter chip border */ --line-divider: #F0F0F4; /* in-card divider */ --line-rule: #F2F2F6; /* list row divider on white */ --surface-sub: #F7F7FA; /* subtlest fill */ --surface-chip: #EFF0F5; /* icon buttons, steppers, quantity */ --surface-shade: #E9E9EF; /* skeleton base, chat day marker */ --surface-flag: #DCDCE4; /* flag placeholder block */ /* Hatched placeholder used everywhere a photo will eventually load. */ --hatch: repeating-linear-gradient( 45deg, #EDEDF2, #EDEDF2 9px, #F7F7FA 9px, #F7F7FA 18px); --hatch-sm: repeating-linear-gradient( 45deg, #E9E9EF, #E9E9EF 6px, #F7F7FA 6px, #F7F7FA 12px); --hatch-violet: repeating-linear-gradient( 45deg, #E4D8F5, #E4D8F5 7px, #EFE7FA 7px, #EFE7FA 14px); /* ---- Type ------------------------------------------------------------ */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-display: 31px; /* screen title on white pages 800 / -0.8 */ --fs-h1: 21px; /* sheet + modal title 800 / -0.4 */ --fs-h2: 19px; /* hero title, profile name 800 / -0.3 */ --fs-h3: 17px; /* stat figure, note headline 800 */ --fs-h4: 15.5px; /* chat header name 800 / -0.2 */ --fs-lg: 15px; /* section heading, emphasis 800 */ --fs-btn: 14.5px; /* button label 700 */ --fs-md: 14px; /* card title 700 */ --fs-body: 13.5px; /* body copy, message text 400/700 */ --fs-sm: 13px; /* input value, list row 400/600 */ --fs-chip: 12.5px; /* chip, tag, inline link 600/700 */ --fs-label: 12px; /* card section label 700 / 0.1 */ --fs-meta: 11.5px; /* meta line, helper text 400 */ --fs-micro: 11px; /* caption under a stat 400 */ --fs-tiny: 10.5px; /* timestamp inside a bubble 400 */ --fs-badge: 8.5px; /* status pill 700 / 0.3 */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; --lh-tight: 1.25; --lh-snug: 1.45; --lh-normal: 1.5; --lh-loose: 1.55; --ls-display: -0.8px; --ls-h1: -0.4px; --ls-h2: -0.3px; --ls-h4: -0.2px; --ls-label: 0.1px; --ls-badge: 0.3px; --ls-caps: 0.6px; /* ---- Space ----------------------------------------------------------- */ --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 9px; --sp-6: 10px; --sp-7: 11px; --sp-8: 12px; --sp-9: 13px; --sp-10: 14px; --sp-11: 15px; --sp-12: 16px; --sp-13: 18px; --sp-14: 20px; --sp-15: 22px; --sp-16: 26px; --sp-17: 32px; --sp-18: 40px; --gap-stack: 13px; /* vertical gap between cards */ --gap-inline: 11px; /* gap inside a row of controls */ --page-x: 15px; /* mobile page gutter */ --page-x-wide: 20px; /* gutter on the white-background pages */ /* ---- Radii ----------------------------------------------------------- */ --r-xs: 4px; /* inline tag */ --r-sm: 5px; /* status pill */ --r-md: 11px; /* input, inner note */ --r-thumb: 12px; /* photo thumbnail */ --r-card: 16px; /* default card */ --r-lg: 18px; /* grouped card */ --r-xl: 20px; /* feature card, profile card */ --r-pill: 20px; /* filter chip */ --r-btn: 26px; /* button, circular icon button */ --r-sheet: 28px; /* bottom sheet */ --r-nav: 32px; /* floating bottom nav */ --r-full: 999px; /* Vertical bulge of the curved dark header. The frames draw it as `Q 201 232 402 150`, a quadratic, whose curve reaches only HALF its control offset, so the true depth is (232-150)/2. */ --hero-curve: 41px; /* ---- Elevation ------------------------------------------------------- */ --shadow-float: 0 7px 20px rgba(18, 20, 43, 0.12); /* nav, action bar */ --shadow-raise: 0 6px 18px rgba(18, 20, 43, 0.08); /* lifted card */ --shadow-modal: 0 24px 60px rgba(18, 20, 43, 0.28); --scrim: rgba(18, 20, 43, 0.55); /* ---- Control sizing -------------------------------------------------- */ --control-h: 50px; /* primary button */ --control-h-sm: 46px; /* paired button */ --control-h-xs: 36px; /* filter chip */ --input-h: 44px; --icon-btn: 51px; /* hero circular button */ --icon-btn-sm: 44px; --nav-h: 72px; /* icon plus its text label */ --actionbar-h: 70px; /* ---- Layout ---------------------------------------------------------- */ --shell-max: 430px; /* mobile shell width on large screens */ --admin-min: 1280px; /* admin minimum supported width */ --admin-side: 248px; /* admin sidebar width */ --admin-topbar: 68px; /* ---- Motion ---------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms; /* ---- Z index --------------------------------------------------------- */ --z-hero: 1; --z-sticky: 20; --z-nav: 70; --z-scrim: 90; --z-sheet: 100; --z-toast: 120; } /* Dark mode, applied via the data-theme attribute js/theme.js sets on before a page settles (explicit choice, or the device's own setting when nobody has chosen). --ink and its two siblings deliberately do not appear below: audited across every stylesheet, they are used as dark accent surfaces (hero curve, primary button, active chip), never as body text, so they stay exactly as they are in both themes, the same near-black brand color carrying white (--on-dark) content on top of it either way. Anything that WAS text set in --ink has already been moved onto --text at its call site, that is the one that actually inverts here. Elevation shadows are left as the same black-based values, on a dark page they simply read as very subtle rather than invisible, not worth inventing a second glow-based shadow system for. */ :root[data-theme="dark"] { --paper: #0B0C1A; --panel: #1A1C33; --ink-alt: #E8F0EE; /* only ever used as text, see the note above */ --violet: #9B6EE8; --violet-soft: #241B3D; --violet-tint: #2A2145; --violet-line: #3D2E5C; --violet-nav: #2E2350; --violet-deep: #D9C7F5; --green: #3FBFA0; --green-soft: #12332C; --green-panel: #143A32; --green-deep: #A8E0D0; --green-mid: #6FBFA8; --amber: #E0B84C; --amber-soft: #332A12; --red: #E0616A; --red-soft: #3A1518; --text: #F2F2F6; --text-strong: #F5F7F6; --text-body: #B8B9C9; --text-muted: #9A9BAC; --text-soft: #7E7F91; --text-faint: #6B6975; --text-disabled: #4A4B5C; --line: #2A2B3D; --line-input: #34364A; --line-chip: #303244; --line-divider: #24263A; --line-rule: #202236; --surface-sub: #17182B; --surface-chip: #22243A; --surface-shade: #2C2E44; --surface-flag: #383A52; --hatch: repeating-linear-gradient( 45deg, #1E2033, #1E2033 9px, #262841 9px, #262841 18px); --hatch-sm: repeating-linear-gradient( 45deg, #1B1D2E, #1B1D2E 6px, #22243A 6px, #22243A 12px); --hatch-violet: repeating-linear-gradient( 45deg, #2A2145, #2A2145 7px, #332856 7px, #332856 14px); } /* A dark-mode browser otherwise repaints native form controls (checkboxes, date pickers, scrollbars) unexpectedly, this keeps that in sync with whichever theme is actually active rather than forcing light always. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }