/* * CloudSnap design tokens. The one place a colour, size, radius, shadow or * duration is defined; every surface of cloudsnap.cloud imports this file first * and never redeclares a token. DESIGN.md at the repo root explains each value; * change the two together. * * Theme: one, light, the blueprint (owner's direction of 2026-10-24). A white * ground, teal-tinted hairlines and bands, near-black ink, the logo's terminal * teal as the single signal (a stroke, a tint, and the solid plane of the one * primary action), the brand green reserved for what is running or settled. The * only deep planes are the primary action and the ink band (the footer and the * section index). The page carries a blueprint line grid; figures are line art * with dimension marks; the loading skeleton is the dashed wireframe of the * component; a hover draws its blueprint and a trailing skeleton at the pointer. * Shape: square corners, and one chamfered corner on the primary action and on a * flagged tag, cut on the inline-end, block-end corner. * Type: Mukta for Latin text (400 to 600) and its ExtraBold for headlines, Dana * (variable) for everything Persian, digits included, IBM Plex Mono for labels and * machine strings, Libre Barcode 39 Text for one quiet footer line. All vendored * with their licence files. * Language: `lang="fa"` (or any fa-* / ar-*) swaps the type families, turns on Dana's * equal-width digits and resets casing, tracking and leading; `lang="ru"` swaps the * sans only. * Direction: layout uses logical properties; motion multiplies every horizontal * distance by --inline-sign, and the chamfer angle mirrors, under dir="rtl". * Density: `data-density="compact|comfortable"` on a region retunes row height and * the three spacing roles; the default is the customer dashboard's. * Ratios quoted below are WCAG 2.x, computed, in the order bg / tint / sunken. */ :root { color-scheme: light; /* ---- Colour: a white ground, teal-tinted neutrals ---- */ --bg: #FFFFFF; --surface: #FFFFFF; --surface-raised: #FFFFFF; --surface-tint: #F6FAFB; /* a band: the short answer, a figure's stage, the location sheet */ --surface-sunken: #EDF4F5; --surface-hover: rgba(15, 27, 30, .04); --overlay: rgba(15, 27, 30, .32); --ink: #0F1B1E; /* 17.6 / 16.7 / 15.8; near-black, cooled by the teal */ --ink-muted: #4A585C; /* 7.4 / 7.0 / 6.6, and 5.1 or better on every tint */ --ink-faint: #56666A; /* 6.0 / 5.7 / 5.4 */ --ink-disabled: var(--ink-faint); --ink-inverse: #FFFFFF; /* the label on the primary plane and the mark on a checked control */ --border: #E1EBED; /* the hairline, about 1.2:1 */ --border-soft: #EDF3F4; /* the blueprint grid's cell line and a quiet divider inside a band */ --border-dash: #BBD0D4; /* dashed blueprint strokes: dimension lines, the skeleton's outline */ --border-strong: #7D8F93; /* the boundary of a control: 3.4 / 3.2 / 3.0 */ --float-border: var(--border); /* a floating layer keeps a hairline; its lift is the shadow */ --accent: #2F8A99; /* the logo's terminal teal as a stroke: 4.0 / 3.8 / 3.6 */ --accent-hover: #287F8D; --accent-active: #2F8A99; --accent-ink: #1C6773; /* the teal as text, the focus ring and the primary plane: 6.5 / 6.2 / 5.8 */ --accent-deep: #15525C; /* the primary plane's hover and press step: 8.8 against white */ --on-accent: #FFFFFF; /* the label on the primary plane, 6.5:1 */ --accent-soft: #E3F1F3; /* the tinted plane of a chosen item and a highlighted country */ --accent-soft-hover: #D3E9EC; --accent-soft-active: #C2E0E5; --accent-edge: #BFDDE3; /* the stroke of a tinted tag and of a country on sale */ --success: #32703A; --success-soft: #E3EFDD; /* the brand green: running, live, settled */ --warning: #8C5A00; --warning-soft: #F8EBD2; --danger: #B23A3A; --danger-soft: #F6E0DC; --info: #4A6490; --info-soft: #E3E8F2; /* slate, because the teal is the signal */ /* ---- The ink band: the footer and the section index, nothing else ---- */ --band-bg: #0F1B1E; --band-ink: #E6EFF0; /* 15.0 on the band */ --band-muted: #93A6AA; /* 6.9 on the band */ --band-line: #24363A; --band-accent: #7FC3CE; /* the teal on the band: 8.9 */ --grid-line: var(--border-soft); /* the blueprint grid */ --grid-cross: #C9DADD; /* the registration crosses at a section's corners */ --shadow-color: rgba(15, 27, 30, .10); --line: #9DB9BE; /* decorative strokes only, never text */ /* ---- Data series: five categorical slots; a sixth entity folds into "Other" ---- */ --chart-1: #3D73B6; --chart-2: #9D4518; --chart-3: #7D5FAD; --chart-4: #767700; --chart-5: #9F5387; --chart-6: var(--chart-neutral); --ring-color: var(--accent-ink); --link-underline: var(--border-strong); --chart-neutral: var(--ink-muted); --chart-grid: var(--border); --chart-axis: var(--ink-faint); --chart-fill: 12%; /* ---- The primary action, the skeleton, the blueprint and the product frame ---- */ --btn-primary-bg: var(--accent-ink); --btn-primary-bg-hover: var(--accent-deep); --btn-primary-bg-active: var(--accent-deep); --btn-primary-fg: var(--on-accent); --btn-primary-border: transparent; --skeleton-bg: transparent; --skeleton-border: var(--border-dash); --skeleton-bar: var(--surface-sunken); --skeleton-style: dashed; --mark-color: var(--border-strong); /* corner marks on a figure in marketing and docs */ --mark-size: 12px; --bp-stroke: var(--accent); /* the hover blueprint's outline and dimension marks */ --bp-dash: 4px; --bp-gap: 3px; --bp-tick: 6px; /* the corner ticks of the hover blueprint */ --bp-offset: 18px; /* the trailing skeleton's distance from the pointer */ --bp-follow: 0.22; /* the share of the gap the trailing skeleton closes each frame */ --bp-ghost-w: 168px; /* ---- Type ---- */ --font-sans: 'Mukta', 'Dana', system-ui, 'Segoe UI', Roboto, sans-serif; --font-display: 'Mukta', 'Dana', system-ui, 'Segoe UI', Roboto, sans-serif; --font-hero: var(--font-display); --font-barcode: 'Libre Barcode 39 Text', monospace; /* one quiet line in the footer */ --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace; --font-num: var(--font-mono); /* figures; Dana on Persian pages */ --font-label: var(--font-mono); /* eyebrows, tags, button and index labels; Dana on Persian pages, where a mono space would gape */ --numeric-features: normal; /* 'ss03' on Persian pages: Dana's equal-width digits */ --weight-regular: 400; --weight-strong: 500; --weight-display: 600; --weight-heavy: 800; /* marketing and page headlines */ --text-xs: 0.75rem; /* 12 eyebrows, column headers, badges, axis labels */ --text-ui: 0.875rem; /* 14 buttons, menu items, secondary text, dense cells */ --text-base: 1rem; /* 16 body, inputs */ --text-md: 1.125rem; /* 18 card and section titles */ --text-lg: 1.375rem; /* 22 dialog titles, card headlines */ --text-xl: 1.75rem; /* 28 app page titles, KPI values */ --text-2xl: 2.25rem; /* 36 the primary KPI value */ --text-3xl: 3.25rem; /* 52 marketing H2 */ --text-4xl: 4.25rem; /* 68 marketing H1 */ --text-5xl: 5.5rem; /* 88 the home hero */ --leading-tight: 1.0; --leading-snug: 1.25; --leading-body: 1.6; --leading-label: 1; --leading-code: 1.6; --tracking-display: -0.025em; --tracking-eyebrow: 0.14em; --tracking-label: 0.06em; /* mono tags, buttons' mono labels */ --case-eyebrow: uppercase; --measure: 68ch; --measure-hint: 300px; /* ---- Space: the scale, then the roles every component uses ---- */ --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px; --sp-64: 64px; --sp-96: 96px; --sp-128: 128px; --space-inset: var(--sp-24); /* padding inside a container */ --space-within: var(--sp-8); /* between items of one group */ --space-between: var(--sp-32); /* between groups; at least 3x within */ --space-section: var(--sp-128); /* between marketing and docs sections */ /* ---- Layout ---- */ --container: 1320px; --container-wide: 1440px; --gutter: 40px; --nav-h: 64px; --utility-h: 36px; --bottom-bar-h: 64px; --rail-w: 240px; --rail-w-collapsed: 64px; --drawer-w: 420px; --drawer-w-min: 320px; --dialog-w: 520px; --control-h: 40px; --control-h-sm: 32px; --control-h-lg: 52px; /* the hero and closing calls to action */ --control-h-xs: 24px; /* the floor for any target (WCAG 2.5.8); an icon-only control pads its hit area to --hit-min */ --row-h: 44px; --hit-min: 44px; --check-size: 18px; --toggle-w: 36px; --toggle-h: 20px; --icon: 20px; --icon-sm: 16px; --globe-max: 640px; /* ---- Shape: square, with one chamfered corner where the system points ---- */ --r-1: 0px; --r-2: 0px; --r-3: 0px; --r-4: 0px; --r-full: 999px; --bw: 1px; --ring-width: 2px; --ring-offset: 2px; --bracket-w: 2px; --bracket-arm: 8px; --chamfer: 10px; /* the cut on the primary action and a flagged tag */ --chamfer-lg: 14px; /* the cut on a large call to action */ --chamfer-angle: 315deg; /* points the cut at the inline-end, block-end corner; 45deg in rtl */ /* ---- Texture: the blueprint grid, the only pattern in the system ---- */ --grid-pitch: 32px; --grid-fade: 70%; --cross-size: 11px; /* ---- Elevation: in-flow surfaces are flat; only floating layers lift, softly ---- */ --shadow-float: 0 12px 32px var(--shadow-color); /* ---- Motion: one duration scale sized by how much changes; the exit of any entrance is the band below it ---- */ --dur-instant: 0ms; --dur-micro: 80ms; /* hover, press, focus, colour */ --dur-small: 150ms; /* menus, popovers, tooltips, toast reflow, the hover blueprint */ --dur-medium: 250ms; /* dialogs, drawers, sheets, toggles, tab indicator, expand */ --dur-large: 400ms; /* route change, shared-element morph, the globe turning to a country */ --dur-blink: 1000ms; /* one caret cycle */ --blink-count: 5; /* the caret blinks this many times, then holds solid */ --dur-shake: 320ms; /* a wholly rejected entry, at most two oscillations */ --dur-scroll: 600ms; /* scroll restore, one decelerating move */ --dur-highlight: 1200ms;/* how long a returned-to or newly inserted row stays marked */ --dur-pulse: 1800ms; /* one cycle of a live indicator: a live dot's ring, a check's pulse */ --dur-sweep: 8000ms; /* one turn of an ambient live display, the status radar's sweep */ --dur-entrance: 600ms; /* a page's one-time entrance: a rise, a line drawing, a figure counting up */ --stagger: 50ms; /* delay = min(index, 6) x --stagger */ --press-scale: 0.97; --caret-w: 0.55ch; --ease-out: cubic-bezier(0.2, 0, 0, 1); /* enter, settle, state change */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* exit */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* travel between two positions, morph */ --ease-linear: linear; /* countdown and progress fills only */ --ease-pop: cubic-bezier(0.2, 0.9, 0.3, 1.1); /* elements under 48px only */ /* ---- Timers ---- */ --loading-delay: 300ms; --tooltip-delay: 300ms; --toast-info: 4s; --toast-warning: 7s; --undo-window: 5s; --undo-window-bulk: 10s; /* ---- Layers (outside the browser top layer) ---- */ --z-sticky: 10; --z-drawer: 20; --z-modal: 30; --z-dropdown: 40; --z-toast: 50; --z-tooltip: 55; --z-skip: 60; --inline-sign: 1; accent-color: var(--ink); font-synthesis-weight: none; } /* ---- The dark set (DESIGN.md, "The dark set"): opt-in, never from the system setting here. A page carries both attributes; the surfaces whose older night modes already set data-theme alone keep their own until they are moved over. ---- */ :root[data-theme="dark"][data-tokens="dark"] { color-scheme: dark; --bg: #0D1719; --surface: #121E21; --surface-raised: #172528; --surface-tint: #111C1F; --surface-sunken: #1C2B2F; --surface-hover: rgba(230, 239, 240, .06); --overlay: rgba(0, 0, 0, .56); --ink: #E6EFF0; /* 15.6 / 14.6 / 12.5 */ --ink-muted: #A9BBBF; /* 9.1 / 8.6 / 7.3 */ --ink-faint: #93A6AA; /* 7.2 / 6.7 / 5.8 */ --ink-inverse: #0D1719; --border: #263639; --border-soft: #1C2A2D; --border-dash: #3C5257; --border-strong: #6F8589; /* 4.7 / 4.4 / 3.8 */ --accent: #5FB3C1; /* 7.5 / 7.1 / 6.1 */ --accent-hover: #74C0CC; --accent-active: #5FB3C1; --accent-ink: #7FC3CE; /* 9.2 / 8.6 / 7.4 */ --accent-deep: #9AD2DB; --on-accent: #0D1719; /* 9.2 on --accent-ink */ --accent-soft: #14343A; --accent-soft-hover: #1A3F46; --accent-soft-active: #204B53; --accent-edge: #2D5F68; --success: #6DBA76; --success-soft: #16301A; /* 7.7 / 7.2 / 6.2, 6.1 on its tint */ --warning: #E0A93F; --warning-soft: #33270F; /* 8.6 / 8.0 / 6.9, 6.9 on its tint */ --danger: #F08A80; --danger-soft: #3A1C1A; /* 7.5 / 7.0 / 6.0, 6.4 on its tint */ --info: #93AEDB; --info-soft: #1C2638; /* 8.1 / 7.6 / 6.5, 6.7 on its tint */ --band-bg: #081012; --band-line: #1F2E31; --grid-cross: #2A3B3F; --shadow-color: rgba(0, 0, 0, .50); --line: #3F5A5F; --chart-1: #7FA6DB; --chart-2: #D98A5E; --chart-3: #AC94D6; --chart-4: #B9BA4A; --chart-5: #D68DBE; } [dir='rtl'] { --inline-sign: -1; --chamfer-angle: 45deg; } [dir='ltr'] { --inline-sign: 1; --chamfer-angle: 315deg; } [lang|='fa'], [lang|='ar'] { --font-sans: 'Dana', system-ui, 'Segoe UI', Tahoma, sans-serif; --font-display: 'Dana', system-ui, 'Segoe UI', Tahoma, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, 'Dana', monospace; --font-num: 'Dana', system-ui, sans-serif; --font-label: 'Dana', system-ui, sans-serif; --numeric-features: 'ss03'; --leading-tight: 1.35; --leading-snug: 1.5; --leading-body: 1.85; --leading-label: 1.5; --tracking-display: 0; --tracking-eyebrow: 0; --tracking-label: 0; --case-eyebrow: none; } [lang|='ru'] { --font-sans: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-display: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } [data-density='compact'] { --row-h: 36px; --space-inset: var(--sp-16); --space-within: var(--sp-4); --space-between: var(--sp-16); } [data-density='comfortable'] { --row-h: 56px; --space-inset: var(--sp-32); --space-within: var(--sp-12); --space-between: var(--sp-48); } @media (pointer: coarse) { :root { --hit-min: 48px; --control-h: 44px; --control-h-sm: 40px; } [data-density='compact'] { --row-h: var(--hit-min); } } @media (max-width: 1023px) { :root { --gutter: 24px; } } @media (max-width: 767px) { :root { --gutter: 16px; --space-inset: var(--sp-16); --space-section: var(--sp-64); --text-3xl: 2.25rem; /* 36 */ --text-4xl: 2.75rem; /* 44 */ --text-5xl: 3.25rem; /* 52 */ } [data-density='comfortable'] { --space-inset: var(--sp-24); --space-between: var(--sp-32); } } @media (prefers-reduced-motion: reduce) { :root { --dur-micro: 1ms; --dur-small: 1ms; --dur-medium: 1ms; --dur-large: 1ms; --dur-shake: 0ms; --dur-scroll: 0ms; --dur-pulse: 0ms; --dur-sweep: 0ms; --dur-entrance: 1ms; --blink-count: 0; --stagger: 0ms; --press-scale: 1; --ease-pop: var(--ease-out); --bp-follow: 1; } } @media (forced-colors: active) { :root { --ring-color: Highlight; --ink-disabled: GrayText; --border-strong: ButtonText; --link-underline: LinkText; } }