/* public/assets/css/rd-tokens.css — Redaily design tokens (colour port from Redaily.pro, 2026-10-16). Written verbatim by WP-1 from IMPLEMENTATION-PLAN.md §2 (= redaily-color-port.md §2 + CL-02 + CL-08). Single source for the private app, public pages, viewers, auth, invites, help and Drop. Contract: @font-face + :root custom properties only. Only WP-1 (phase 1) and WP-3 (phase 3) edit this file. */ @font-face{font-family:RedailyInter;src:url('/assets/redaily-inter-cyrillic.woff2') format('woff2'); font-style:normal;font-weight:100 900;font-display:swap; unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:RedailyInter;src:url('/assets/redaily-inter-latin.woff2') format('woff2'); font-style:normal;font-weight:100 900;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ color-scheme:dark; /* ---------- Type (Redaily G:42-49, C; §4) ---------- */ --rd-font:RedailyInter,Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --rd-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --rd-fw-body:402; /* new: vapor body weight (G:194) */ --rd-fw-name:460; /* new: Cloud file names (C:539) */ --rd-type-micro:700 10px/12px var(--rd-font); /* kind extension label, +.4px uppercase */ --rd-type-badge:500 12px/16px var(--rd-font); --rd-type-meta:402 12px/16px var(--rd-font); /* row meta, hints, field errors (c-faint) */ --rd-type-menu-heading:402 12px/16px var(--rd-font); /* M:106-112, tertiary colour */ --rd-type-small:402 13px/20px var(--rd-font); /* column cells, secondary body */ --rd-type-field-label:402 13px/18px var(--rd-font); --rd-type-small-strong:500 13px/20px var(--rd-font); --rd-type-body:402 14px/20px var(--rd-font); /* Cloud rows, nav, inputs (C: fs-80) */ --rd-type-body-long:402 13px/20px var(--rd-font); /* dialog/state body (D, C:704-732: 13/1.45-1.55) */ --rd-type-label:500 14px/20px var(--rd-font); /* active nav, sidebar CTA text */ --rd-type-lead:402 15px/22px var(--rd-font); /* no Redaily equivalent; kept for Drop */ --rd-type-button-xl:500 15px/22px var(--rd-font); /* kept for Drop */ --rd-type-cta:600 15px/20px var(--rd-font); /* kept for Drop */ --rd-type-subtitle:600 16px/24px var(--rd-font); --rd-type-title-s:600 18px/24px var(--rd-font); --rd-type-title:600 18px/24px var(--rd-font); /* page/folder title: Cloud .title 18/600 (C:357) */ --rd-type-h1:600 24px/30px var(--rd-font); /* standalone auth/help h1 only */ --rd-type-state:600 28px/34px var(--rd-font); --rd-type-display:600 44px/48px var(--rd-font); --rd-type-wordmark:620 20px/28px var(--rd-font); --rd-type-menu:402 13px/20px var(--rd-font); /* new: menu rows (M:56) */ --rd-type-button:500 13px/20px var(--rd-font); /* new: .rf-btn, tool buttons (G:335, C:93) */ --rd-type-name:460 14px/20px var(--rd-font); /* new: list-row file name */ --rd-type-crumb:500 16px/24px var(--rd-font); /* new: Cloud breadcrumbs (C:328) */ --rd-type-dialog-title:600 16px/24px var(--rd-font); /* new: D:31 */ --rd-type-tooltip:402 12px/16px var(--rd-font); /* new: TT */ --rd-track-18:-.2px; --rd-track-20:-.4px; --rd-track-24:-.4px; --rd-track-28:-.6px; --rd-track-44:-1.4px; --rd-track-wordmark:-.55px; --rd-track-micro:.4px; /* ---------- Redaily ramps (G:58-72) — new ---------- */ --rd-grey-0:#000000; --rd-grey-5:#0b0d17; --rd-grey-8:#12141e; --rd-grey-10:#181b29; --rd-grey-12:#1f2332; --rd-grey-15:#262a3b; --rd-grey-20:#2b2f41; --rd-grey-30:#32374c; --rd-grey-40:#4c5067; --rd-grey-50:#63677d; --rd-grey-60:#7d8198; --rd-grey-70:#a6aac1; --rd-grey-80:#c9cbde; --rd-grey-90:#dee0ed; --rd-grey-100:#ffffff; --rd-grey-alpha-5:rgba(36,39,53,.2); --rd-grey-alpha-10:rgba(44,48,65,.3); --rd-grey-alpha-15:rgba(57,61,79,.35); --rd-grey-alpha-20:rgba(85,88,110,.4); --rd-grey-alpha-30:rgba(109,113,136,.5); --rd-light-alpha-5:rgba(255,255,255,.04); --rd-light-alpha-10:rgba(255,255,255,.08); --rd-light-alpha-15:rgba(255,255,255,.12); --rd-light-alpha-20:rgba(255,255,255,.15); --rd-light-alpha-30:rgba(255,255,255,.2); --rd-light-alpha-50:rgba(255,255,255,.4); --rd-light-alpha-90:rgba(255,255,255,.8); --rd-dark-alpha-30:rgba(0,0,0,.2); --rd-dark-alpha-40:rgba(0,0,0,.4); --rd-dark-alpha-50:rgba(0,0,0,.5); --rd-dark-alpha-60:rgba(0,0,0,.6); --rd-dark-alpha-80:rgba(0,0,0,.7); /* sic: Redaily -80 = .7 */ /* ---------- Surfaces ---------- */ --rd-bg-rail:#000000; /* html, rail, shell seams, media stage (G:139,153,145) */ --rd-seam:var(--rd-bg-rail); /* new: 2px seams between shell cards (C:39) */ --rd-bg-tooltip:#0b0d17; /* new: --surface-1 (G:163) */ --rd-bg-canvas:#12141e; /* sidebar, auth/help/Drop body, preview top bar, thumb bed */ --rd-bg-content:#12141e; /* WAS #191c29. Redaily content = canvas (C:76). Name kept */ --rd-bg-dialog:#181b29; /* new: dialog panel only (D:21) */ --rd-bg-card-soft:#1b1f2c; /* new: Cloud c-card = mix(#1f2332 70%,#12141e) (C:24) */ --rd-bg-card:#1f2332; /* cards, docked uploads panel (U:15), list header */ --rd-bg-popover:#262a3b; /* menus, popovers, toasts, search panel, segmented thumb */ --rd-bg-expanded:#32374c; /* new: open trigger, select expanded (S:17, L:473) */ --rd-bg-control:rgba(255,255,255,.08); /* WAS #2c3041. ghost/secondary button, wells, tracks (G:344) */ --rd-bg-control-hover:rgba(255,255,255,.12); /* WAS #363b50 (G:345) */ --rd-bg-control-strong:#32374c; /* WAS #474c66. pressed / expanded filled trigger */ --rd-switch-off:rgba(255,255,255,.12); /* WAS #3b4057 (SW:9) */ --rd-switch-off-hover:rgba(255,255,255,.15); /* new (SW:12) */ --rd-hover:rgba(255,255,255,.08); /* icon/tool buttons, tiles, search hit (= Redaily --surface-hover) */ --rd-row-hover:rgba(255,255,255,.04); /* new: list rows, nav, crumbs, upload rows (C:13) */ --rd-menu-hover:rgba(57,61,79,.35); /* new: menu-row ::before highlight, menu separators (M:64-77,99) */ --rd-danger-row-hover:rgba(255,80,80,.09); /* new: danger menu row highlight (R:375-383; A4) */ --rd-segment-track:rgba(255,255,255,.04); /* new (C:372) */ --rd-segment-thumb:var(--rd-bg-popover); /* new (C:384) */ --rd-selected:rgba(91,83,255,.2); /* WAS rgba(105,88,165,.25). Cloud c-selected (C:18) */ --rd-selected-hover:rgba(91,83,255,.26); /* C:19 */ --rd-selected-card:#21214b; /* --rd-selected over --rd-bg-content, opaque */ --rd-selected-card-hover:#252458; --rd-selected-line:rgba(91,83,255,.75); /* new: raw Redaily c-selected-line; consumers go through U1-U5 tokens */ --rd-drop:rgba(91,83,255,.24); /* new: c-drop (C:21) */ --rd-drop-soft:rgba(91,83,255,.08); /* new: OS-drop overlay fill (C:670-687 uses 8-10%) */ --rd-field-bg:rgba(44,48,65,.3); /* WAS contextual canvas/content. --surface-input (G:167) */ --rd-scrim:rgba(0,0,0,.8); /* WAS .7 (D:10) */ --rd-scrim-sheet:rgba(4,6,12,.55); /* new: mobile action sheet (C:938) */ --rd-media-control:rgba(18,20,30,.6); /* unchanged; no Redaily equivalent */ --rd-check-media-bg:rgba(10,12,20,.45); /* new: check over imagery (C:603) */ --rd-check-media-ring:rgba(255,255,255,.85); /* new */ --rd-scrollbar:rgba(255,255,255,.08); /* WAS #474c66 (G:312) */ --rd-scrollbar-hover:rgba(255,255,255,.15); /* new (G:315) */ /* ---------- Accent ---------- */ --rd-accent:#5b53ff; --rd-accent-hover:#4d3dea; /* Redaily --accent-press-hover; on every fill that carries text (A1) */ --rd-accent-hover-light:#6d66ff; /* new: Redaily --accent-hover; switch-on hover only (no text) */ --rd-accent-pressed:#3425c5; --rd-accent-soft:rgba(91,83,255,.22); /* WAS .16. Brand mark, unread chips, state wells (C:66) */ --rd-accent-ink:#aaa5ff; /* accent-coloured text/icons on dark (A3) */ --rd-on-accent:#ffffff; /* ---------- Text and icons (G:154-162, LA:21-27, C:11) ---------- */ --rd-text:rgba(243,243,247,.9); --rd-text-strong:#f3f3f7; --rd-text-bright:rgba(245,245,245,.9); /* new: enabled/active controls (G:157) */ --rd-text-on-media:#f5f5f7; /* new (G:78) */ --rd-text-secondary:rgba(212,214,230,.75); /* WAS #a1a4be. Redaily text-dim */ --rd-text-tertiary:rgba(189,192,212,.72); /* WAS #868aa1. Cloud c-faint */ --rd-text-quiet:#7d8198; /* new: Redaily "--text-secondary"/grey-60. Marks, >=12px on rail/canvas only */ --rd-text-muted:#63677d; /* new: grey-50. Decorative / disabled only, never text */ --rd-icon:rgba(212,214,230,.75); --rd-icon-secondary:rgba(161,164,190,.65); --rd-icon-active:#ffffff; --rd-icon-disabled:rgba(255,255,255,.4); /* new (LA:23) */ /* ---------- Lines and focus ---------- */ --rd-border:rgba(255,255,255,.04); /* WAS .08. Hairlines, row hairline, card/menu/popover/dialog edge */ --rd-border-mid:rgba(255,255,255,.08); /* new: toast, docked/bottom bars, settings inputs, kbd, card hover edge */ --rd-border-strong:rgba(255,255,255,.12); /* WAS .14. Form inputs (C:912) */ --rd-border-hover:rgba(255,255,255,.15); /* WAS #676c85. = Redaily light-alpha-20 / lalo-border-neutral */ --rd-check-ring:rgba(189,192,212,.72); /* new: unchecked round check (C:484) */ --rd-focus:rgba(255,255,255,.5); /* WAS #9699ab (G:272) */ --rd-focus-width:2px; --rd-focus-offset:0px; /* WAS 2px */ --rd-focus-offset-inset:-2px; /* new: inside rows and cards (L:2169) */ --rd-focus-ring:var(--rd-focus-width) solid var(--rd-focus); /* rule-compliant defaults for Redaily accent lines (§1.2). Flip one token to restore Redaily. */ --rd-focus-inset:inset 0 0 0 2px var(--rd-focus); /* U2 Redaily: inset 0 0 0 2px var(--rd-selected-line) */ --rd-selected-edge:transparent; /* U1/U5 Redaily: var(--rd-selected-line) */ --rd-field-focus-border:var(--rd-focus); /* U3 Redaily: var(--rd-accent) */ --rd-drop-ring:none; /* U4 Redaily: inset 0 0 0 2px var(--rd-selected-line) */ /* ---------- Semantic (G:93-98, C:22) ---------- */ --rd-error:#ff6471; /* WAS #ff7b88. Error/danger TEXT and icons */ --rd-danger:#ab2438; /* new: danger button fill at rest (user decision A2: Redaily --error-dark, 6.9:1 with white) */ --rd-danger-hover:#f43350; /* new: danger button hover (user decision A2); never text */ --rd-error-dark:#ab2438; /* new: = --rd-danger; error pill border */ --rd-error-soft:rgba(244,51,80,.14); /* WAS rgba(255,123,136,.12). Error well (C:714) */ --rd-error-soft-hover:var(--rd-danger-row-hover); --rd-success:#21c17b; --rd-success-soft:rgba(33,193,123,.18); /* soft WAS .14 (C:890) */ --rd-notice:#f0cd33; --rd-notice-soft:rgba(240,205,51,.08); /* soft WAS .14 (G:98) */ --rd-notice-line:rgba(240,205,51,.35); /* new */ --rd-info:#3f74ff; /* new */ --rd-favorite:#ffc93d; /* WAS var(--rd-error). Cloud star (C:22) */ /* ---------- File kinds (USER-DECISIONS «File icons», 2026-10-17: direction B «sibling of the Redaily folder») ---------- One hue per kind for glyph, band and extension label on every kind card in the app, Drop included. Values are the mockup's palette (design-server/file-icons/sheet-sibling/gen.py KINDS): Redaily.pro hues calmed for #12141e, the same family as the storage legend's --rd-tone-*. Warm kinds sit ~20deg apart and step up in lightness (pdf 352 -> image 11 -> presentation 30 -> archive 47); text and other differ in lightness. Supersedes D7 / CL-02. */ --rd-kind-document:#5a8dff; --rd-kind-pdf:#f04f64; --rd-kind-text:#b4b9cc; --rd-kind-spreadsheet:#2fbf71; --rd-kind-presentation:#ffa040; --rd-kind-audio:#ec6ae6; --rd-kind-video:#9b6bff; --rd-kind-image:#ff7f62; --rd-kind-archive:#f2cc3d; --rd-kind-code:#2ec5d6; --rd-kind-design:#8ad64a; --rd-kind-other:#7d849a; /* the file slab's compact fill (40 slot rows, pickers, uploads; 32 search and menu head): between --rd-folder-front and the folder-row silhouette grey --rd-folder-glyph, one step up on row hover (mockup gen.py CARD_COMPACT). The 80 / 145 slab is the folder's own --rd-folder-front / -raised. Replaces the four --rd-kind-tint-* tokens (icon-port §5.2). */ --rd-file-slab-compact:#393e54; --rd-file-slab-compact-raised:#43485f; /* new: Redaily Cloud --tone set (C:628-636): storage legend (CL-19). Area colour only; kind cards use --rd-kind-* */ --rd-tone-image:#ff795d; --rd-tone-video:#8c45ff; --rd-tone-audio:#ff63ff; --rd-tone-pdf:#ff0042; --rd-tone-doc:#3f74ff; --rd-tone-sheet:#00c857; --rd-tone-slides:#ff6300; --rd-tone-archive:#f0cd33; --rd-tone-other:var(--rd-text-secondary); --rd-tone-well:14%; /* use as color-mix(in srgb,var(--tone) var(--rd-tone-well),transparent) */ /* ---------- Folder art (replaces icon-port §3.2; recomputed for content #12141e, §6.1) ---------- */ --rd-folder-back:#1f2332; --rd-folder-front:#1f2332; /* Redaily --lalo-folder-fill */ --rd-folder-back-raised:#32374c; --rd-folder-front-raised:#32374c; /* hover, context, selected */ --rd-folder-back-raised-2:#32374c; --rd-folder-front-raised-2:#32374c; /* selected:hover (alias) */ --rd-folder-back-drop:#2e2f65; --rd-folder-front-drop:#2e2f65; /* mix(#1f2332 75%, accent 25%) (L:2517) */ --rd-folder-edge:rgba(255,255,255,.04); /* Redaily #ffffff0a (WAS .06) */ --rd-folder-cell:#12141e; --rd-folder-mark:rgba(161,164,190,.65); --rd-folder-glyph:#4c5067; --rd-folder-glyph-raised:#63677d; /* grey-40 / grey-50 (WAS #3a3f55 / #474c66) */ /* ---------- Design-direction §3.0 tokens (recomputed) ---------- */ --rd-mark:var(--rd-text-quiet); /* #7d8198, 1.5px corner marks */ --rd-mark-active:var(--rd-text-secondary); --rd-mark-arm:12px; --rd-mark-w:1.5px; --rd-matte:var(--rd-bg-rail); --rd-burnin:var(--rd-dark-alpha-60); /* WAS .72; Redaily badge .5 raised to .6 (A5) */ --rd-content-hover:#252730; /* --rd-hover over #12141e (WAS #2b2e3a) */ --rd-content-selected:#21214b; /* WAS #2d2b48 */ --rd-content-selected-hover:#252458; /* WAS #353251 */ /* ---------- Radius (§4.2; Redaily G:31, C) ---------- */ --rd-r-4:4px; --rd-r-6:6px; --rd-r-8:8px; --rd-r-10:10px; --rd-r-12:12px; --rd-r-14:14px; --rd-r-16:16px; --rd-r-18:18px; --rd-r-20:20px; --rd-r-24:24px; --rd-r-pill:999px; --rd-r-menu-item:4px; /* new (M:55) */ --rd-r-button:6px; /* new: .rf-btn 32, icon button 28-30, select, dialog close (G:334, S, D:37) */ --rd-r-row:8px; /* rows, nav, crumbs, tiles, 32-38px tool controls */ --rd-r-control:8px; /* WAS 10. 36-38px controls (C:367, C:910) */ --rd-r-control-lg:12px; /* 40-48px controls: sidebar CTA, search field (C:135, C:247) */ --rd-r-field:12px; /* WAS 14 */ --rd-r-float:8px; /* new: menus, popovers, app toasts, tooltips (M:13, TT, T) */ --rd-r-float-lg:12px; /* new: search panel, bottom-left snackbar, docked upload panel, bottom selection bar */ --rd-r-card:12px; /* WAS 16. Cloud cards, meter, inset wells (C:205, C:561) */ --rd-r-panel:12px; /* WAS 18. help sections, Drop panels */ --rd-r-shell:8px; /* WAS 20. shell cards: sidebar, content, details (C:51,76,126) */ --rd-r-modal:8px; /* WAS 24. dialogs (D:20); state cards follow --rd-r-card */ /* ---------- Heights (unchanged; Redaily geometry differences in §4.2) ---------- */ --rd-h-switch:20px; /* WAS 22 (SW: 34x20) */ --rd-h-inline:28px; --rd-h-compact:32px; --rd-h-control:36px; --rd-h-control-lg:42px; --rd-h-field-xl:52px; --rd-h-cta:56px; /* ---------- Spacing (unchanged) ---------- */ --rd-space-1:4px; --rd-space-2:8px; --rd-space-3:12px; --rd-space-4:16px; --rd-space-5:20px; --rd-space-6:24px; --rd-space-8:32px; --rd-space-10:40px; --rd-space-12:48px; /* ---------- Elevation (G:182-183) ---------- */ --rd-shadow-float:0 1px 20px rgba(0,0,0,.16),0 12px 16px rgba(0,0,0,.2),0 6px 12px rgba(0,0,0,.24); --rd-shadow-tooltip:0 1px 16px rgba(0,0,0,.12),0 8px 12px rgba(0,0,0,.16),0 4px 8px rgba(0,0,0,.2); /* new */ --rd-shadow-micro:0 1px 3px rgba(0,0,0,.25); /* segmented thumb (C:384) */ --rd-shadow-knob:none; /* switch knob is flat (SW) */ --rd-shadow-dialog:none; /* new: dialogs have no shadow (D:17) */ /* ---------- Motion (G:13-22) ---------- */ --rd-ease:cubic-bezier(.2,.4,.1,1); /* WAS ease. Redaily --ease-primary */ --rd-ease-ios:cubic-bezier(.32,.72,0,1); --rd-dur-instant:50ms; /* new: menu highlight, linear (M:73) */ --rd-dur-press:80ms; /* new: only if press scale is adopted (§4.3) */ --rd-dur-exit:125ms; /* new: popover/menu exit */ --rd-dur-fast:150ms; --rd-dur-base:200ms; --rd-dur-progress:300ms; /* WAS 450ms (C:221) */ /* Delicate motion (CLOUD-MOTION-SPEC §1; values from Redaily.pro globals.css:13-21). Durations always in ms: app.js motionMs() reads them with parseFloat. Every curve keeps its y control points in 0..1 (no overshoot). */ --rd-ease-in:cubic-bezier(.42,0,1,1); /* toast and sheet exits only */ --rd-ease-out:cubic-bezier(.61,1,.88,1); /* image and media fade-in */ --rd-ease-in-out:cubic-bezier(.45,0,.4,1); /* reduced-motion busy pulse only */ --rd-dur-toast-exit:100ms; --rd-dur-release:200ms; /* press release */ --rd-dur-sheet:250ms; /* phone action sheet in */ /* amplitudes: one place to calm everything further */ --rd-move-pop:4px; /* menus and popovers travel from the anchor side */ --rd-move-rise:6px; /* dialogs, toast */ --rd-move-bar:8px; /* selection toolbar on the phone, upload panel */ --rd-move-settle:3px; /* view switch */ --rd-scale-pop:.98; /* menus and popovers */ --rd-scale-press:.97; /* .icon-btn press */ --rd-scale-press-wide:.98; /* .btn press */ } @media (prefers-reduced-motion:reduce){ :root{--rd-dur-instant:0ms;--rd-dur-press:0ms;--rd-dur-exit:0ms;--rd-dur-fast:0ms;--rd-dur-base:0ms;--rd-dur-progress:0ms; --rd-dur-toast-exit:0ms;--rd-dur-release:0ms;--rd-dur-sheet:0ms; --rd-move-pop:0px;--rd-move-rise:0px;--rd-move-bar:0px;--rd-move-settle:0px; --rd-scale-pop:1;--rd-scale-press:1;--rd-scale-press-wide:1} }