/* Railbed design tokens — v1.0 (September 2026) Source of truth for color, type, spacing, radius, shadow and motion. Light is the default theme. Dark is applied with [data-theme="dark"] on (or on one element, to theme just that part) (and follows the OS when no data-theme is set). */ :root { /* Touch controls: 48 CSS px includes Apple's 44 pt and Google's 48 dp design targets. */ --touch-target: 48px; --touch-input-font-size: 16px; /* ---------- Brand primitives (never change between themes) ---------- */ --rb-ink: #0E0E0D; /* logo, primary text, primary buttons */ --rb-paper: #F6F5F1; /* marketing page ground */ --rb-stone: #EFEEE9; /* secondary surfaces, proof band */ --rb-slate: #2C3533; /* texture panels, deep surfaces */ --rb-white: #FFFFFF; --rb-green: #1F7A4D; /* live / success / positive delta */ --rb-green-bright: #7FD6A0; /* positive on dark surfaces */ --rb-red: #B4402F; /* critical / destructive / risk underline */ --rb-amber: #9A6414; /* warning (text & icons on light) */ --rb-amber-bright: #E7C79A; /* warning on dark, JSON booleans */ /* ---------- Neutral scale (warm, very low chroma) ---------- */ --rb-n-0: #FFFFFF; --rb-n-25: #FAF9F6; --rb-n-50: #F6F5F1; --rb-n-75: #F4F3EF; --rb-n-100: #F2F1EC; --rb-n-150: #EFEEE9; --rb-n-200: #ECEBE5; --rb-n-250: #E2E0DA; --rb-n-300: #D6D4CD; --rb-n-400: #B4B2AB; --rb-n-500: #8C8B85; --rb-n-600: #6A6964; --rb-n-700: #5A5955; --rb-n-800: #2E2D2A; --rb-n-850: #2A2A28; --rb-n-900: #1A1A19; --rb-n-950: #0E0E0D; /* ---------- Semantic: surfaces ---------- */ --bg-page: var(--rb-paper); /* marketing pages */ --bg-app: var(--rb-n-75); /* app content area (dashboard main) */ --bg-surface: var(--rb-white); /* cards, windows, inputs */ --bg-surface-tint: var(--rb-n-25); /* checkout summary column, quiet panels */ --bg-sunken: var(--rb-n-100); /* segmented control track, pills */ --bg-subtle: var(--rb-stone); /* hover rows, proof band */ --bg-warning: #FCF5E8; /* test-mode band and pill (amber text 4.6:1) */ --bg-inverse: var(--rb-ink); /* app sidebar, featured card, primary button */ --bg-inverse-hover: var(--rb-n-850); --bg-inverse-active: #262626; /* selected sidebar item */ --bg-texture: var(--rb-slate); /* fallback under the grain texture */ --bg-code: #111111; --bg-sidebar: var(--rb-ink); /* app sidebar stays ink in both themes */ --text-sidebar: #E4E4E1; --icon-sidebar: #BDBDBA; /* ---------- Semantic: primary action ---------- */ --btn-primary-bg: var(--rb-ink); --btn-primary-fg: var(--rb-white); --btn-primary-hover: var(--rb-n-850); --btn-primary-loading: #3A3A39; /* primary button while it works ("Converting to USDC") */ /* ---------- Semantic: text ---------- */ --text-strong: var(--rb-ink); /* headings, values, primary labels */ --text: var(--rb-n-800); /* running text in UI */ --text-body: var(--rb-n-700); /* paragraphs, leads, descriptions */ --text-muted: var(--rb-n-600); /* labels, captions, metadata */ --text-placeholder: var(--rb-n-500); --text-disabled: var(--rb-n-400); --text-inverse: var(--rb-white); --text-inverse-muted: #BDBCB6; --text-inverse-subtle: #A3A19C; --text-positive: var(--rb-green); --text-critical: var(--rb-red); --text-warning: var(--rb-amber); /* ---------- Semantic: borders ---------- */ --border-subtle: var(--rb-n-200); /* dividers inside cards, table rows */ --border: var(--rb-n-250); /* card outlines, inputs, section rules */ --border-strong: var(--rb-n-300); /* secondary button outline, radio */ --border-input: var(--rb-n-500); /* input outline: 3.4:1 on white, findable (WCAG 1.4.11) */ --border-emphasis: var(--rb-ink); /* list top rules, selected option, outline button */ --border-inverse: var(--rb-n-850); /* dividers on ink surfaces */ --focus-ring: var(--rb-green); /* ---------- Semantic: status ---------- */ --status-live: var(--rb-green); --status-positive: var(--rb-green); --status-critical: var(--rb-red); --status-warning: var(--rb-amber); --status-neutral: var(--rb-n-500); /* ---------- Code window ---------- */ --code-bg: #111111; --code-border: #242423; --code-text: #DAD8D2; --code-strong: #F2F0EA; --code-muted: #7F7E78; --code-gutter: #4A4A47; --code-punct: #6F6E69; --code-string: #A8D8B6; --code-literal: #E7C79A; /* ---------- On dark surfaces (texture panels, ink sidebar, toasts): same in both themes ---------- */ --on-dark: var(--rb-white); /* headings, values and icons on slate, texture or ink */ --on-dark-body: rgba(255,255,255,0.86); /* body text on texture */ --on-dark-muted: rgba(255,255,255,0.78); /* metadata on veiled texture (AA) */ --on-dark-hover: rgba(255,255,255,0.06); /* hover fill on ink (sidebar) */ --on-dark-fill: rgba(255,255,255,0.12); /* ghost hover and placeholders on texture */ --on-dark-border: rgba(255,255,255,0.5); /* ghost-on-dark outline */ --critical-on-dark: #E8826F; /* a failure's dot on an ink toast */ --veil-ink: #121615; /* veils over texture: mix it toward transparent */ --veil: rgba(18,22,21,0.62); /* bottom veil on texture panels (final CTA, auth) */ --scrim: rgba(14,14,13,0.4); /* behind modals, drawers and the phone menu */ --selection: rgba(31,122,77,0.18); /* selected text */ --btn-on-dark-bg: var(--rb-white); --btn-on-dark-fg: var(--rb-ink); --btn-on-dark-hover: #E9E8E3; /* Google sign-in branding: provider colors and type stay independent of Railbed themes. */ --google-button-bg: var(--rb-white); --google-button-border: #747775; --google-button-text: #1F1F1F; --google-button-font: 500 14px/20px 'Google Sans', Arial, sans-serif; --google-button-gap: 10px; --google-button-tracking: 0.25px; --google-button-hover-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%); /* ---------- Typography ---------- */ --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Marketing display scale (desktop / mobile) */ --type-hero: 400 104px/0.96 var(--font-serif); --track-hero: -0.035em; --type-hero-m: 400 62px/0.96 var(--font-serif); --type-display: 400 72px/1.02 var(--font-serif); --track-display: -0.03em; --type-display-m: 400 42px/1.04 var(--font-serif); --type-h1: 400 56px/1.06 var(--font-serif); --track-h1: -0.028em; --type-h1-m: 400 38px/1.08 var(--font-serif); --type-h2: 400 36px/1.08 var(--font-serif); --track-h2: -0.025em; --type-h2-m: 400 30px/1.1 var(--font-serif); --type-h3: 400 28px/1.15 var(--font-serif); --track-h3: -0.02em; --type-lead: 400 20px/1.5 var(--font-sans); --type-body-l: 400 17px/1.55 var(--font-sans); --type-body: 400 16px/1.55 var(--font-sans); /* App scale (denser; the dashboard lives here) */ --type-page-title: 400 32px/1.15 var(--font-serif); /* e.g. "Northwind Studio" */ --type-amount-xl: 400 54px/1.04 var(--font-serif); /* balances */ --type-amount-l: 400 46px/1.08 var(--font-serif); /* prices on checkout */ --type-amount-m: 400 36px/1.1 var(--font-serif); /* card amounts */ --type-title: 500 15px/1.35 var(--font-sans); /* card titles, row primary */ --type-ui: 400 14px/1.45 var(--font-sans); /* default UI text */ --type-ui-s: 400 13px/1.4 var(--font-sans); /* captions, metadata */ --type-ui-xs: 400 12px/1.35 var(--font-sans); /* dense tables, chips (minimum) */ --type-overline: 500 11px/1.2 var(--font-sans); /* uppercase labels, +0.06em */ --type-code: 400 13.5px/24px var(--font-mono); --type-code-s: 400 12px/21px var(--font-mono); /* ---------- Spacing (px) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-18: 72px; --space-22: 88px; --space-24: 96px; --space-28: 112px; --space-37: 148px; /* Layout */ --container: 1200px; /* content width at 1440 viewport */ --gutter-desktop: 120px; --gutter-mobile: 20px; --label-rail: 306px; /* chapter label column (3 grid columns) */ --grid-columns: 12; --grid-step: 102px; /* column k starts at 120 + (k-1) * 102 */ --sidebar-width: 210px; /* app sidebar */ --nav-height: 84px; /* marketing nav (64px mobile) */ --section-gap: 148px; /* between marketing chapters (88px mobile) */ /* ---------- Radius ---------- */ --radius-xs: 4px; /* buttons, inputs, small chips */ --radius-s: 6px; /* inner controls, list items, secondary buttons */ --radius-m: 8px; /* flow nodes, banners, small cards */ --radius-l: 10px; /* cards, windows, popovers */ --radius-xl: 14px; /* texture panels (12px on mobile) */ --radius-pill: 999px; /* ---------- Elevation ---------- */ --shadow-1: 0 1px 2px rgba(14,14,13,0.05), 0 8px 20px rgba(14,14,13,0.06); /* nodes, small cards */ --shadow-2: 0 1px 2px rgba(14,14,13,0.05), 0 18px 44px rgba(14,14,13,0.08); /* cards on texture, product windows */ --shadow-3: 0 1px 2px rgba(14,14,13,0.06), 0 24px 54px rgba(14,14,13,0.18); /* popovers, overlapping windows */ --shadow-4: 0 1px 2px rgba(14,14,13,0.10), 0 30px 70px rgba(0,0,0,0.30); /* modals, app window on texture */ --shadow-inset-control: 0 1px 2px rgba(14,14,13,0.10); /* selected segment */ --ring-marker: 0 0 0 3px #FFFFFF; /* numbered markers */ --ring-selected: 0 0 0 4px rgba(14,14,13,0.10); /* selected node */ /* ---------- Motion ---------- */ --ease-standard: cubic-bezier(.45, 0, .2, 1); --ease-out: cubic-bezier(.2, .7, .2, 1); --dur-fast: 150ms; /* hover color */ --dur-base: 200ms; /* buttons, links */ --dur-slow: 250ms; /* arrow nudge, row hover */ --dur-demo: 8s; /* hero product demo loop */ /* ---------- Texture ---------- */ --texture-url: url('../assets/texture/railbed-texture.jpg'); } /* ---------- Dark theme (app) ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg-page: #121413; --bg-app: #121413; --bg-surface: #1A1D1C; --bg-surface-tint: #1C1F1E; --bg-sunken: #232726; --bg-subtle: #1F2322; --bg-warning: #2B251A; --bg-inverse: #F2F1EC; --bg-inverse-hover: #FFFFFF; --bg-inverse-active: #2B302E; --text-strong: #F2F1EC; --text: #E4E3DE; --text-body: #D9D8D2; --text-muted: #9B9A94; --text-placeholder: #7A7974; --text-disabled: #5C5C58; --text-inverse: #0E0E0D; --text-positive: #7FD6A0; --text-critical: #E8826F; --text-warning: #E7C79A; --border-subtle: #242826; --border: #2B302E; --border-strong: #3A403E; --border-input: #7A7974; --border-emphasis: #F2F1EC; --status-live: #7FD6A0; --status-positive: #7FD6A0; --status-critical: #E8826F; --status-warning: #E7C79A; --focus-ring: #7FD6A0; --bg-sidebar: #0B0C0C; --btn-primary-bg: #F2F1EC; --btn-primary-fg: #0E0E0D; --btn-primary-hover: #FFFFFF; --btn-primary-loading: #BDBCB6; --shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.25); --shadow-2: 0 1px 2px rgba(0,0,0,0.3), 0 18px 44px rgba(0,0,0,0.35); --shadow-3: 0 1px 2px rgba(0,0,0,0.35), 0 24px 54px rgba(0,0,0,0.45); } } /* Also scoped: any element with data-theme="dark" (a merchant's dark checkout inside the light app). */ :root[data-theme="dark"], [data-theme="dark"] { color-scheme: dark; --bg-page: #121413; --bg-app: #121413; --bg-surface: #1A1D1C; --bg-surface-tint: #1C1F1E; --bg-sunken: #232726; --bg-subtle: #1F2322; --bg-warning: #2B251A; --bg-inverse: #F2F1EC; --bg-inverse-hover: #FFFFFF; --bg-inverse-active: #2B302E; --text-strong: #F2F1EC; --text: #E4E3DE; --text-body: #D9D8D2; --text-muted: #9B9A94; --text-placeholder: #7A7974; --text-disabled: #5C5C58; --text-inverse: #0E0E0D; --text-positive: #7FD6A0; --text-critical: #E8826F; --text-warning: #E7C79A; --border-subtle: #242826; --border: #2B302E; --border-strong: #3A403E; --border-input: #7A7974; --border-emphasis: #F2F1EC; --status-live: #7FD6A0; --status-positive: #7FD6A0; --status-critical: #E8826F; --status-warning: #E7C79A; --focus-ring: #7FD6A0; --bg-sidebar: #0B0C0C; --btn-primary-bg: #F2F1EC; --btn-primary-fg: #0E0E0D; --btn-primary-hover: #FFFFFF; --btn-primary-loading: #BDBCB6; --shadow-1: 0 1px 2px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.25); --shadow-2: 0 1px 2px rgba(0,0,0,0.3), 0 18px 44px rgba(0,0,0,0.35); --shadow-3: 0 1px 2px rgba(0,0,0,0.35), 0 24px 54px rgba(0,0,0,0.45); }