/* Elena Bridge ยท design tokens. * * Copied by value from the Bridge's glass tokens, not linked. Two coordinate * sets: dark is the default, light is its own set and not an inversion. The * page picks one through html[data-theme], kept under `elena-theme`. */ :root, [data-theme="dark"]{ color-scheme: dark; --wall: radial-gradient(1100px 760px at 12% 8%, rgba(94,92,230,.42), transparent 62%), radial-gradient(900px 700px at 88% 14%, rgba(64,200,224,.20), transparent 60%), radial-gradient(1000px 800px at 55% 108%, rgba(255,55,95,.18), transparent 60%), radial-gradient(700px 600px at 30% 80%, rgba(191,90,242,.14), transparent 60%), #08080D; --glass: rgba(24,24,30,.62); --glass2: rgba(44,44,52,.62); --glass-line: rgba(255,255,255,.09); --glass-hi: rgba(255,255,255,.10); --blur: blur(40px) saturate(180%); --blur-bar: blur(30px) saturate(180%); --blur-pal: blur(50px) saturate(190%); --sheet: rgba(16,16,20,.58); --card: rgba(255,255,255,.055); --card-line: rgba(255,255,255,.07); --card-hover: rgba(255,255,255,.085); --card-solid: rgba(34,34,40,.85); --menu-solid: #1E1E24; --fill: rgba(120,120,128,.28); --fill2: rgba(120,120,128,.18); --fill3: rgba(120,120,128,.11); --sep: rgba(255,255,255,.08); --t1: #F5F5F7; --t2: rgba(235,235,245,.62); --t3: rgba(235,235,245,.52); --tint: #0A84FF; --tint-soft: rgba(10,132,255,.20); --tint-line: rgba(10,132,255,.45); --red:#FF453A; --orange:#FF9F0A; --yellow:#FFD60A; --green:#30D158; --mint:#66D4CF; --teal:#40C8E0; --cyan:#64D2FF; --indigo:#5E5CE6; --purple:#BF5AF2; --pink:#FF375F; --brown:#AC8E68; --gray:#98989D; --red-soft: color-mix(in srgb, var(--red) 16%, transparent); --orange-soft: color-mix(in srgb, var(--orange) 16%, transparent); --green-soft: color-mix(in srgb, var(--green) 16%, transparent); --ink-to: white; --ink-k: 60%; --tint-ink: color-mix(in srgb, var(--tint) 61%, white); --red-ink: color-mix(in srgb, var(--red) 62%, white); --orange-ink: color-mix(in srgb, var(--orange) 88%, white); --green-ink: color-mix(in srgb, var(--green) 90%, white); --purple-ink: color-mix(in srgb, var(--purple) 62%, white); --indigo-ink: color-mix(in srgb, var(--indigo) 56%, white); --teal-ink: color-mix(in srgb, var(--teal) 89%, white); --tint-fill: #0071E3; --red-fill: color-mix(in srgb, var(--red) 82%, black); --on-bright: #1D1D1F; --accent-on: #FFFFFF; /* the channel marks are the channels' own colours, and mail is the tint */ --ch-li:#0A66C2; --ch-wa:#25D366; --ch-tg:#2AABEE; --ch-ml:var(--tint); --ch-ol:#0F6CBD; --shadow: 0 12px 34px rgba(0,0,0,.48), 0 1px 2px rgba(0,0,0,.5); --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-lg: 0 30px 80px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.5); --shadow-tint: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 10px rgba(10,132,255,.3); --shadow-sel: 0 0 0 2px var(--tint-line), 0 10px 30px rgba(0,0,0,.18); --bubble-in: rgba(255,255,255,.10); --scrim: rgba(0,0,0,.28); /* the system face first, as the Bridge does: on a Mac it is SF, elsewhere the self-hosted Inter Tight */ --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter Tight', 'Helvetica Neue', system-ui, sans-serif; --mono: 'SF Mono', ui-monospace, 'Fragment Mono', Menlo, monospace; --w-body:400; --w-med:500; --w-str:600; --w-bold:700; --spring: cubic-bezier(.2,.8,.2,1); --ease-press: cubic-bezier(.23,1,.32,1); --ease-io: cubic-bezier(.65,0,.35,1); --ease-out: cubic-bezier(0,0,.2,1); /* the Bridge's ladder, 120 to 500ms, and the press */ --d-tap:120ms; --d-press:160ms; --d-state:200ms; --d-fade:250ms; --d-seg:300ms; --d-lift:350ms; --d-row:380ms; --d-pill:450ms; --d-land:460ms; --d-arrive:500ms; --r-pane:20px; --r-panel:18px; --r-card:16px; --r-tile:14px; --r-row:12px; --r-ctl:10px; --r-btn:9px; --r-tag:5px; --r-full:9999px; --rail-mini:76px; --pane-gap:10px; --peek:380px; --lm:224px; /* the etch marks on the rail, lit from above (the Bridge's lane-marks block, by value) */ --lk-wall:#7D87A3; --lk-ink:#DDE1EC; --lk-fine:#A9B0C6; --lk-hi:rgba(255,255,255,.3); --lk-hi-f:rgba(255,255,255,.12); --lk-fx:drop-shadow(0 -.5px .5px rgba(0,0,0,.55)); --lk-wall-h:#B4BBD0; --lk-ink-h:#fff; --lk-fine-h:#CDD2E0; --lk-wall-on:color-mix(in srgb, var(--tint) 88%, black); --lk-ink-on:var(--tint-ink); --lk-fine-on:color-mix(in srgb, var(--tint-ink) 78%, #0A1A33); --lk-hi-on:rgba(255,255,255,.26); --lk-hi-f-on:rgba(255,255,255,.1); --lk-fx-on:drop-shadow(0 0 2px rgba(10,132,255,.6)); /* the brand mark, cut like the lane marks; its line carries a little tint */ --bm-hi:rgba(255,255,255,.2); --bm-wall:#4A5370; --bm-ink:color-mix(in srgb, var(--tint-ink) 62%, #DDE1EC); --bm-ink-h:color-mix(in srgb, var(--tint-ink) 80%, #fff); --bm-fx:drop-shadow(0 -.5px .5px rgba(0,0,0,.55)); /* calendar hues: one per kind of time, the same lightness and quiet chroma */ --c-client:oklch(.72 .128 258); --c-intro:oklch(.78 .118 62); --c-team:oklch(.74 .095 187); --c-focus:oklch(.72 .085 155); --c-personal:oklch(.74 .118 12); --c-hold:oklch(.66 .012 260); } [data-theme="light"]{ color-scheme: light; --wall: radial-gradient(1100px 760px at 12% 8%, rgba(0,122,255,.26), transparent 62%), radial-gradient(900px 700px at 88% 14%, rgba(175,82,222,.16), transparent 60%), radial-gradient(1000px 800px at 55% 108%, rgba(255,45,85,.14), transparent 60%), radial-gradient(700px 600px at 30% 80%, rgba(52,199,89,.10), transparent 60%), #E4E8F0; --glass: rgba(255,255,255,.58); --glass2: rgba(255,255,255,.78); --glass-line: rgba(255,255,255,.75); --glass-hi: rgba(255,255,255,.9); --sheet: rgba(255,255,255,.52); --card: rgba(255,255,255,.66); --card-line: rgba(0,0,0,.05); --card-hover: rgba(255,255,255,.92); --card-solid: rgba(255,255,255,.92); --menu-solid: #FFFFFF; --fill: rgba(120,120,128,.18); --fill2: rgba(120,120,128,.12); --fill3: rgba(120,120,128,.08); --sep: rgba(60,60,67,.12); --t1: #1D1D1F; --t2: rgba(60,60,67,.82); --t3: rgba(60,60,67,.76); --tint: #007AFF; --tint-soft: rgba(0,122,255,.14); --tint-line: rgba(0,122,255,.4); --red:#FF3B30; --orange:#FF9500; --yellow:#FFCC00; --green:#34C759; --mint:#00C7BE; --teal:#30B0C7; --cyan:#32ADE6; --indigo:#5856D6; --purple:#AF52DE; --pink:#FF2D55; --brown:#A2845E; --gray:#8E8E93; --red-soft: color-mix(in srgb, var(--red) 14%, transparent); --orange-soft: color-mix(in srgb, var(--orange) 14%, transparent); --green-soft: color-mix(in srgb, var(--green) 14%, transparent); --ink-to: black; --ink-k: 53%; --tint-ink: color-mix(in srgb, var(--tint) 69%, black); --red-ink: color-mix(in srgb, var(--red) 64%, black); --orange-ink: color-mix(in srgb, var(--orange) 53%, black); --green-ink: color-mix(in srgb, var(--green) 54%, black); --purple-ink: color-mix(in srgb, var(--purple) 70%, black); --indigo-ink: color-mix(in srgb, var(--indigo) 83%, black); --teal-ink: color-mix(in srgb, var(--teal) 57%, black); --shadow: 0 12px 34px rgba(30,40,60,.14), 0 1px 2px rgba(0,0,0,.08); --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow-lg: 0 30px 80px rgba(30,40,60,.25), 0 2px 6px rgba(0,0,0,.08); --shadow-tint: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 10px rgba(0,122,255,.3); --shadow-sel: 0 0 0 2px var(--tint-line), 0 10px 30px rgba(30,40,60,.12); --bubble-in: rgba(120,120,128,.14); --scrim: rgba(0,0,0,.18); --lk-wall:#121A30; --lk-ink:#47557A; --lk-fine:#5F6C8E; --lk-hi:#fff; --lk-hi-f:rgba(255,255,255,.9); --lk-fx:drop-shadow(0 .5px .5px rgba(255,255,255,.7)) drop-shadow(0 -.5px .5px rgba(18,26,48,.3)); --lk-wall-h:#090E1C; --lk-ink-h:#1D2640; --lk-fine-h:#3A4664; --lk-wall-on:color-mix(in srgb, var(--tint) 60%, black); --lk-ink-on:var(--tint); --lk-fine-on:color-mix(in srgb, var(--tint) 92%, white); --lk-hi-on:#fff; --lk-hi-f-on:rgba(255,255,255,.9); --lk-fx-on:drop-shadow(0 .5px .5px rgba(255,255,255,.7)) drop-shadow(0 0 2px rgba(0,122,255,.26)); --bm-hi:#fff; --bm-wall:#2A3554; --bm-ink:color-mix(in srgb, var(--tint) 62%, #47557A); --bm-ink-h:var(--tint); --bm-fx:drop-shadow(0 .5px .5px rgba(255,255,255,.7)); --c-client:oklch(.55 .148 258); --c-intro:oklch(.62 .132 62); --c-team:oklch(.56 .105 187); --c-focus:oklch(.54 .07 155); --c-personal:oklch(.58 .132 12); --c-hold:oklch(.58 .012 260); }