/* =========================================================================== tokens.css — the ONLY file in this codebase permitted to contain a hex value. DESIGN_SYSTEM.md is the authority; this is its machine-readable form. TWO LAYERS, and the separation is load-bearing: Layer 1 --brand-* read from the I Solutions logo. The launch client's identity, and the only part of the system allowed to know which shop it is serving. Layer 2 semantic what components actually use. Defined in terms of layer 1, never a raw colour. Shop #2 replaces layer 1 and nothing else. No component file may reference a --brand-* token or a hex value — if one does, the rebrand stops being a ten-minute edit and becomes a repaint. =========================================================================== */ :root { /* --- LAYER 1 · BRAND --------------------------------------------------- Read from the logo. Replace this block, and only this block, per client. */ --brand-indigo-900: #1E1B4B; --brand-indigo-700: #2E2A6B; /* the "i" stem — the darkest mass in the mark */ --brand-indigo-500: #4A4694; --brand-indigo-100: #E7E6F4; --brand-cyan-600: #1A8FC4; /* text-safe */ --brand-cyan-500: #29ABE2; /* the logo's blue — graphics only */ --brand-cyan-200: #A9DEF5; --brand-cyan-50: #EAF7FD; --brand-teal-600: #0E8F8B; --brand-teal-500: #16B5B0; /* the swoosh */ --brand-teal-50: #E7F8F7; --brand-violet-500: #7B3FA5; --brand-violet-50: #F1EAF8; --brand-magenta-600:#A93185; --brand-magenta-500:#C43C9B; /* the outer ring */ --brand-magenta-50: #FBEDF6; --brand-neutral-ink: #14152E; --brand-neutral-soft: #3D4062; --brand-neutral-muted: #6B6E8C; --brand-neutral-line: #E3E6F0; --brand-neutral-surface: #F5F7FC; --brand-neutral-alt: #EDF1F9; --brand-neutral-paper: #FFFFFF; --brand-success-600: #0B7A5C; --brand-success-500: #0E9A73; --brand-success-50: #E6F6F1; --brand-warning-700: #A8640A; --brand-warning-500: #E8A317; --brand-warning-50: #FEF6E8; --brand-error-600: #C62828; --brand-error-500: #E03B3B; --brand-error-50: #FDEDED; /* The signature gradient. One direction, three stops, and it appears at most once per screen — see DESIGN_SYSTEM.md section 3. */ --brand-gradient: linear-gradient(135deg, var(--brand-cyan-500) 0%, var(--brand-violet-500) 55%, var(--brand-magenta-500) 100%); /* --- LAYER 2 · SEMANTIC ------------------------------------------------ Everything below is what components are allowed to name. */ --primary: var(--brand-indigo-700); --primary-hover: var(--brand-indigo-500); --primary-active: var(--brand-indigo-900); --primary-tint: var(--brand-indigo-100); --primary-ink: var(--brand-neutral-paper); --accent: var(--brand-magenta-500); --accent-ink: var(--brand-magenta-600); --accent-tint: var(--brand-magenta-50); --info: var(--brand-cyan-500); --info-ink: var(--brand-cyan-600); --info-tint: var(--brand-cyan-50); --ink: var(--brand-neutral-ink); --ink-soft: var(--brand-neutral-soft); --muted: var(--brand-neutral-muted); --line: var(--brand-neutral-line); --surface: var(--brand-neutral-surface); --surface-alt: var(--brand-neutral-alt); --paper: var(--brand-neutral-paper); --success: var(--brand-success-500); --success-ink: var(--brand-success-600); --success-tint: var(--brand-success-50); --warning: var(--brand-warning-500); --warning-ink: var(--brand-warning-700); --warning-tint: var(--brand-warning-50); --error: var(--brand-error-500); --error-ink: var(--brand-error-600); --error-tint: var(--brand-error-50); --decor-gradient: var(--brand-gradient); /* --- Aurora & glass (the "Aurora Glass" kiosk language, DESIGN_SYSTEM §16) -- The ambient environment and the frosted-glass material both originate from the logo. Colours are the brand orbs; the glass is translucent white. */ /* Light and airy: colour glows from the corners, the centre stays luminous so glass and text read cleanly. Premium, not heavy. */ --aurora-cyan: rgba(41, 171, 226, .38); --aurora-teal: rgba(22, 181, 176, .28); --aurora-violet: rgba(123, 63, 165, .30); --aurora-magenta: rgba(196, 60, 155, .26); --aurora-base: #F2F6FD; /* the luminous field the orbs float on */ --glass-fill: rgba(255, 255, 255, .62); --glass-fill-strong: rgba(255, 255, 255, .78); --glass-border: rgba(255, 255, 255, .75); --glass-blur: 18px; --glass-shadow: 0 20px 50px -12px rgba(30, 27, 75, .28), 0 6px 16px -8px rgba(30, 27, 75, .22); --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .9); --glow-brand: 0 12px 40px -8px rgba(123, 63, 165, .5); /* Clean card elevation — soft, indigo-tinted, controlled. The refined "banking card" look: a resting shadow and a lifted-on-press shadow. ONE pair of tokens drives every card in the product — home screen tiles, language tiles, panels, choice cards, tabs, secondary buttons — so depth is consistent by construction rather than by remembering to match it. FOUR layers. The first two are the visible ones: a tight contact shadow that grounds the edge, and a HALO with a small offset and no negative spread, so the lift reads on the left and right of a card and not only underneath it. The last two are wide and negatively spread, carrying the depth without darkening anything. The card must look clearly lifted off the page at a glance, from a metre away, on a tablet behind a counter — a shadow nobody notices is doing no work. What still does not happen: no single layer is opaque enough to read as a dark band, and no layer is a zero-offset blur the same size as the element, which is what turns a shadow into a glow. A single hard shadow is the classic "template" tell; the presence here comes from four diffuse layers stacking, which is what Apple, Stripe and Linear converge on. */ --card-shadow: 0 1px 2px rgba(30, 27, 75, .10), 0 3px 12px rgba(30, 27, 75, .10), 0 10px 22px -4px rgba(30, 27, 75, .15), 0 22px 42px -12px rgba(30, 27, 75, .20); --card-shadow-hover: 0 2px 4px rgba(30, 27, 75, .12), 0 6px 18px rgba(30, 27, 75, .13), 0 16px 32px -4px rgba(30, 27, 75, .20), 0 38px 68px -18px rgba(30, 27, 75, .28); /* Frosted "premium tile" surface — a faint top-lit glass the service and language cards are built on. Semantic, so no component names a colour. */ --tile-surface: linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.88) 100%); --tile-sheen: linear-gradient(180deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,0) 100%); --tile-border: rgba(255,255,255,.85); --tile-inner-edge: inset 0 0 0 1px rgba(255,255,255,.6); /* A mask stencil, not a colour: CSS masks read luminance, so this is "fully opaque". Tokenised only so a grep for a hex value in any component file returns nothing at all and the rule stays mechanically checkable. */ --mask-opaque: #000; /* Cards are drawn as a solid fill clipped to the padding box over a gradient clipped to the border box — that is what produces a true gradient border ring, the same treatment the QR panel wears. The fill must be opaque or the ring bleeds through and muddies the card. */ --tile-solid: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%); --card-edge: linear-gradient(150deg, #E9ECF5 0%, #DDE3F0 50%, #ECEFF7 100%); /* Slim branded scrollbar — the default Windows bar with its arrow buttons is the loudest non-premium element on a kiosk screen. */ --scroll-thumb: rgba(46, 42, 107, .30); --scroll-thumb-hover: rgba(46, 42, 107, .48); /* The welcome kicker: a tracked label flanked by two fading hairlines, so "WELCOME TO" reads as deliberate signage rather than a caption. */ --kicker-ink: var(--brand-indigo-500); --rule-in: linear-gradient(90deg, rgba(74, 70, 148, 0), rgba(74, 70, 148, .55)); --rule-out: linear-gradient(90deg, rgba(74, 70, 148, .55), rgba(74, 70, 148, 0)); /* Frosted app bar, and the white ring + drop shadow that lifts the logo off the page. Named here so no component file carries a colour literal. */ --bar-fill: rgba(255, 255, 255, .82); /* The same bar without transparency. The kiosk uses this instead of --bar-fill so its bars need no backdrop-filter: blurring a full-screen background every frame is the single most expensive composite on the counter tablet, and at .82 over a pale field nobody can see the difference. Phone keeps the frosted version. */ --bar-solid: rgb(252, 253, 255); --hover-veil: rgba(255, 255, 255, .6); --logo-ring-lg: 0 0 0 3px rgba(255,255,255,.9), 0 16px 38px rgba(46,42,107,.22); --logo-ring-md: 0 0 0 3px rgba(255,255,255,.9), 0 10px 24px rgba(46,42,107,.2); --logo-ring-sm: 0 0 0 2px rgba(255,255,255,.9), 0 3px 10px rgba(46,42,107,.16); --logo-halo: radial-gradient(circle, rgba(41,171,226,.30) 0%, rgba(123,63,165,.14) 42%, transparent 66%); --action-glow: 0 10px 24px -10px rgba(123,63,165,.55); /* --- Ambient environment — the animated brand field ------------------- A calm, technology-brand atmosphere behind everything: drifting colour glows, a faint moving dot grid, pulsing circuit nodes and a slow light sweep. Every value is derived from the logo, stays low-opacity, and moves slowly. Semantic — components never reach past this to a --brand-* token. */ --bg-field: linear-gradient(158deg, #EAF5FE 0%, #F5F8FF 44%, #F1EEFB 100%); --env-orb-cyan: radial-gradient(closest-side, rgba(41,171,226,.34), rgba(41,171,226,0) 72%); --env-orb-teal: radial-gradient(closest-side, rgba(22,181,176,.30), rgba(22,181,176,0) 72%); --env-orb-violet: radial-gradient(closest-side, rgba(123,63,165,.30), rgba(123,63,165,0) 72%); --env-orb-magenta: radial-gradient(closest-side, rgba(196,60,155,.26), rgba(196,60,155,0) 72%); --env-dot: rgba(46,42,107,.06); --env-node: rgba(41,171,226,.55); --env-line: rgba(123,63,165,.16); --env-particle: radial-gradient(circle, rgba(41,171,226,.55), rgba(41,171,226,0) 70%); /* --env-beam deleted with the full-screen light sweep it painted. */ /* Slow ambient motion — all long, all easing gently, and all frozen on the kiosk layout. --dur-beam and --dur-halo were deleted along with the two animations they timed; see the note above .bg-particles in kiosk.css. */ --dur-orb: 32s; --dur-grid: 44s; --dur-float: 19s; --dur-pulse: 4.6s; /* Semantic gradient tokens, so components never name a --brand-* directly. The full spectrum ring (QR frame, logo halo), the hero-text sweep, and the primary-action fill all live here. */ --decor-conic: conic-gradient(from 0deg, var(--brand-cyan-500), var(--brand-violet-500), var(--brand-magenta-500), var(--brand-teal-500), var(--brand-cyan-500)); --title-gradient: linear-gradient(120deg, var(--brand-indigo-900), var(--brand-violet-500) 60%, var(--brand-magenta-600)); --title-fallback: var(--brand-indigo-700); --action-gradient: linear-gradient(120deg, var(--brand-indigo-700), var(--brand-violet-500)); /* Card medallion tones. Each service card carries a tinted icon medallion so the home screen reads like the logo's spectrum distributed across cards — colour concentrated in small deliberate places, not washed across a background. Every tone is a light tint fill with a text-safe -600 icon on it, so the icon always clears contrast. Components reference --tone-*, never --brand-*. */ /* --- THE MEDALLION — one construction, used by every service ---------- Six different saturated gradients made six different products sharing a screen. A single icon container, identical everywhere, is what makes a set of cards read as one designed system: the glyph is the only thing that changes. Indigo → violet, straight from the logo, with an inner highlight that gives it depth and one soft brand glow beneath. */ --medallion-fill: linear-gradient(150deg, #4A4694 0%, #2E2A6B 55%, #6B2F93 100%); --medallion-edge: inset 0 1px 0 rgba(255,255,255,.30), inset 0 0 0 1px rgba(255,255,255,.12); --medallion-glow: 0 10px 22px -10px rgba(46, 42, 107, .55); --medallion-ink: var(--brand-neutral-paper); /* The single accent used for small highlights (chips, active states). */ --accent-soft: var(--brand-cyan-500); /* --- Radius --- the logo is a circle; nothing here is square ------------ */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; /* --- Elevation --- indigo-tinted, never black -------------------------- */ --shadow-sm: 0 1px 2px rgba(20, 21, 46, .06), 0 1px 3px rgba(20, 21, 46, .05); --shadow-md: 0 4px 12px rgba(20, 21, 46, .08); --shadow-lg: 0 12px 32px rgba(20, 21, 46, .12); --shadow-qr: 0 18px 48px rgba(46, 42, 107, .16); --focus-ring: 0 0 0 4px rgba(41, 171, 226, .35); /* --- Spacing --- 4px base ---------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* --- Motion --- arrives, settles, stops -------------------------------- */ --ease: cubic-bezier(.2, .8, .25, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur-fast: 140ms; --dur-screen: 360ms; --dur-breathe: 3200ms; --dur-drift: 26s; /* aurora orbs */ --dur-orbit: 18s; /* the logo halo ring */ /* --- Typography -------------------------------------------------------- */ /* Plus Jakarta Sans carries every heading, label and button: geometric, open counters, a tall x-height that stays legible at arm's length, and far more refined at 100px than Poppins or Montserrat — both of which have become the default "template" look. Inter stays for body copy, where its narrower forms and superior hinting read better at small sizes. */ --font-hero: 'Plus Jakarta Sans', system-ui, sans-serif; --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; --font-ui: 'Inter', system-ui, sans-serif; --font-urdu: 'Noto Nastaliq Urdu', serif; /* The credential face. ui-monospace families disambiguate 0/O and 1/l/I, which is the whole point — a customer WILL type this by hand. */ --font-credential: ui-monospace, 'Cascadia Mono', 'Consolas', 'DejaVu Sans Mono', 'Liberation Mono', monospace; --lh-latin: 1.4; --lh-urdu: 1.9; /* Nastaliq clips at Latin leading */ /* Phone is the default column of DESIGN_SYSTEM.md section 6; the kiosk surface overrides these wholesale. */ --fs-display: 32px; --fs-h1: 26px; --fs-button: 19px; --fs-body: 17px; --fs-caption: 14px; --fs-mono: 24px; /* ROLE TOKENS. The six sizes above are the scale. These name what a thing IS, so a component never writes a literal size and never does arithmetic on another role's size. `calc(var(--fs-button) + 4px)` appeared in three unrelated places and silently coupled card titles to button text: changing buttons moved the cards. A role token breaks that coupling. */ --fs-shop: var(--fs-button); /* shop name in the app bar */ --fs-title: var(--fs-h1); /* screen heading */ --fs-card: var(--fs-button); /* launcher + language card titles */ --fs-choice: var(--fs-button); /* website / social card titles */ --fs-badge: 22px; /* language script badge */ --fs-step: var(--fs-body); /* numbered instruction text */ --fs-eyebrow: 13px; /* the digit inside a step circle */ --fs-credential: calc(var(--fs-mono) - 2px); /* account numbers */ --fs-clock: var(--fs-body); --fs-date: var(--fs-caption); --tap-min: 44px; /* phone floor */ --screen-pad: var(--sp-5); --stack-gap: var(--sp-4); --card-pad: var(--sp-5); } /* The tablet at the counter: read at arm's length, at an angle, by someone who may not read English. Everything grows. Keyed on data-LAYOUT, not data-surface. Two different questions: data-surface — WHAT data may be shown (kiosk key; privacy). Server-decided. data-layout — HOW it is laid out (viewport size). Client-decided. A big screen gets the big kiosk layout whether or not it holds the key; only the WiFi password depends on the key. Conflating the two made the public link render a phone list on a 10-inch tablet. */ :root[data-layout="kiosk"] { --fs-display: 56px; --fs-h1: 44px; --fs-button: 30px; --fs-body: 24px; --fs-caption: 20px; /* the floor. nothing on the kiosk goes below this. */ --fs-mono: 40px; /* The counter tablet is read standing, at roughly arm's length plus the depth of the counter — call it 70cm, against 35cm for a phone. Every role is re-stated here rather than inherited, so the kiosk scale can be tuned without touching the phone. Three roles were BELOW the 20px floor declared above — instruction text at 17px and the step digits at 13px and 15px. A floor that components are free to undercut is not a floor. */ --fs-shop: var(--fs-button); --fs-title: var(--fs-h1); --fs-card: 34px; /* was calc(--fs-button + 4px) */ --fs-choice: 26px; /* was calc(--fs-button - 4px) */ --fs-badge: 28px; --fs-step: var(--fs-body); /* was a raw 17px */ --fs-eyebrow: var(--fs-caption); /* was a raw 13px / 15px */ --fs-credential: calc(var(--fs-mono) - 2px); --fs-clock: var(--fs-caption); --fs-date: var(--fs-caption); --tap-min: 96px; --screen-pad: var(--sp-6); --stack-gap: var(--sp-5); --card-pad: var(--sp-6); }