/* ========================================================================== Xealio Connect — design tokens Values sampled from the Xealio mobile app (Alpha SBR 100 screens, 2026-09-11). Every colour used in the portal must come from a token in this file. ========================================================================== */ :root { /* ---- Brand ------------------------------------------------------------ Sampled: navy #183E65 (Talk to an Expert card), green #2AB148 (logo mark and Running state), amber #F59E0B (Manual Control icon). */ --xc-navy: #183E65; --xc-navy-deep: #102A45; --xc-navy-bright: #1F5A94; --xc-green: #2AB148; --xc-green-deep: #167D33; --xc-amber: #F59E0B; /* ---- Surfaces --------------------------------------------------------- The app uses a warm off-white page with pure-white cards and a cooler blue-grey navigation bar. Keep that three-way separation. */ --xc-bg: #F7F7F5; /* page */ --xc-surface: #FFFFFF; /* cards, rows, inputs */ --xc-surface-sunken: #F0F0EE; /* table headers, inert wells */ --xc-nav-bg: #E7EAEF; /* bottom tab bar / desktop sidebar */ --xc-nav-bg-active: #DCE2EA; --xc-line: #E2E4E3; /* 1px dividers inside cards */ --xc-line-strong: #CBD1D6; /* input borders, chip outlines */ --xc-scrim: rgba(16, 42, 69, .45); /* Renkli bir isaretin cevresindeki halka: acik temada beyaz, koyu temada zemin rengi. Tek token olunca her bilesende iki ayri kural yazmak gerekmiyor. */ --xc-halo: rgba(255, 255, 255, .88); /* Teknik cizim yuzeyi (blueprint). Cizimler beyaz kontur olarak bu zemine bindirilir. Ton, marka lacivertinin daha koyu ve doygun hali; beyaz cizgiyle kontrasti 13:1, en zayif durum rengiyle 4.8:1. */ --xc-blueprint: #0E2F63; --xc-blueprint-grid: rgba(255, 255, 255, .10); /* * Blueprint zemini (#0E2F63) uzerindeki durum renkleri. * Hepsi 5.9-7.7:1 bandinda tutuldu; asagidaki degerler olculerek secildi. * * Onceki set dengesizdi: "durdu" rengi 4.83:1 ile en zayifti VE tonu * (hue 207) zeminin tonuna (hue 217) neredeyse esitti. Yani gri noktalar * hem sonuk hem ayni renk ailesindeydi; mavi uzerinde kayboluyorlardi. * Yeni gri notr ve 7.65:1. * * Iki temada da ayni: blueprint yuzeyi her iki temada da koyu. */ --xc-ok-bright: #3DD160; /* 6.53:1 */ /* Ariza net KIRMIZI olmali. Onceki #FF8F86 acik somondu ve render uzerinde turuncuya kaciyordu. #FF4438 doygun kirmizi; blueprint zemininde 4.25:1, render uzerinde de acik sekilde kirmizi okunuyor. */ --xc-fault-bright: #FF5347; /* ton 3.9 derece = kirmizi, doygunluk %72, kontrast 4.10:1 */ --xc-warn-bright: #F5A524; /* 6.41:1 */ --xc-info-bright: #7FB3E8; /* 5.93:1 */ --xc-idle-bright: #BFC7CE; /* 7.65:1 — notr gri, mavi tonu yok */ --xc-mark-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 2px 6px rgba(0, 0, 0, .35); /* Blueprint her iki temada da koyu; uzerindeki cip her zaman beyaz. */ --xc-on-blueprint: #FFFFFF; --xc-on-mark: #FFFFFF; /* ---- Text -------------------------------------------------------------- */ --xc-text: #12181E; /* headings, primary values */ --xc-text-muted: #5A6A78; /* subtitles, descriptors 5.2:1 */ --xc-text-faint: #6B7785; /* equipment codes, timestamps 4.25:1 */ --xc-text-on-navy: #FFFFFF; --xc-text-on-navy-dim:#BFD0E0; /* ---- Operational states ------------------------------------------------ Two values per state on purpose: -mark saturated, for dots / icon fills / chart series / bars -text darkened to clear 4.5:1, for any state word or number -soft tinted background for badges and row highlights Never set a state word in a -mark colour. #2AB148 on white is 2.8:1. */ --xc-ok-mark: #2AB148; /* running, online, cleared */ --xc-ok-text: #167D33; /* 4.88:1 */ --xc-ok-soft: #E6F5EA; --xc-fault-mark: #D54545; /* fault, critical alarm */ --xc-fault-text: #C1322F; /* 5.20:1 */ --xc-fault-soft: #FBE9E8; --xc-warn-mark: #F59E0B; /* warning, maintenance, delayed data */ --xc-warn-text: #8A6A00; /* 4.73:1 — amber text is never #F59E0B */ --xc-warn-soft: #FDF3E0; --xc-idle-mark: #98A2AC; /* stopped, offline, never connected */ --xc-idle-text: #5A6A78; /* 5.20:1 */ --xc-idle-soft: #EEF0F1; --xc-info-mark: #1F5A94; /* standby, auto mode, informational */ --xc-info-text: #1F5A94; --xc-info-soft: #E7EEF6; /* ---- Charts ----------------------------------------------------------- Ordered series palette. Distinguishable in both themes and for the three common colour-vision deficiencies; never reuse the state colours here. */ --xc-series-1: #1F5A94; --xc-series-2: #0E9594; --xc-series-3: #8A5FBF; --xc-series-4: #B5761F; --xc-series-5: #3F6E3F; --xc-grid: #E6E8E9; /* ---- Radius ----------------------------------------------------------- Cards 16, inner rows 10, pills full. One step per hierarchy level. */ --xc-r-sm: 8px; --xc-r-md: 12px; --xc-r-lg: 16px; --xc-r-pill: 999px; /* ---- Elevation -------------------------------------------------------- The app has almost none. Use the border first, shadow only for things that float above the page (menus, sheets, sticky alarm bar). */ --xc-shadow-raised: 0 1px 2px rgba(16, 42, 69, .06); --xc-shadow-float: 0 8px 24px rgba(16, 42, 69, .14); /* ---- Space (4px base) -------------------------------------------------- */ --xc-1: 4px; --xc-2: 8px; --xc-3: 12px; --xc-4: 16px; --xc-5: 20px; --xc-6: 24px; --xc-8: 32px; --xc-10: 40px; --xc-12: 48px; /* ---- Type ------------------------------------------------------------- One family. Archivo is a wide grotesque that matches the letterspaced Xealio wordmark and stays legible at 12px in dense tables. Self-host it under /assets/fonts — do not link Google's CDN from an EU-hosted app. Roboto is the fallback so the web portal matches the Android app 1:1. */ --xc-font: "Archivo", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --xc-t-display: 600 2.125rem/1.15 var(--xc-font); /* 34 — page title */ --xc-t-h1: 600 1.625rem/1.2 var(--xc-font); /* 26 — section title */ --xc-t-h2: 600 1.25rem/1.3 var(--xc-font); /* 20 — card title */ --xc-t-body: 400 1rem/1.5 var(--xc-font); /* 16 */ --xc-t-body-md: 500 1rem/1.5 var(--xc-font); /* 16 — row titles */ --xc-t-small: 400 .875rem/1.45 var(--xc-font); /* 14 — subtitles */ --xc-t-meta: 400 .8125rem/1.4 var(--xc-font); /* 13 — codes, times */ --xc-t-tag: 600 .75rem/1.2 var(--xc-font); /* 12 — state tags */ --xc-tag-track: .07em; --xc-t-reading: 1.0625rem/1.6 var(--xc-font); /* long prose */ /* Numerals: every measured value, runtime, count and timestamp uses tabular figures so columns align and digits don't jitter on refresh. */ --xc-nums: tabular-nums; /* ---- Motion ----------------------------------------------------------- */ --xc-ease: cubic-bezier(.2, 0, .2, 1); --xc-fast: 120ms; --xc-medium: 220ms; /* ---- Layout ------------------------------------------------------------ */ --xc-sidebar-w: 248px; --xc-sidebar-w-collapsed: 68px; --xc-topbar-h: 64px; --xc-tabbar-h: 64px; --xc-content-max: 1320px; --xc-prose-max: 68ch; --xc-tap: 44px; /* minimum touch target */ } /* ========================================================================== Dark theme Rooted in the brand navy rather than neutral grey, so the dark portal still reads as Xealio. State marks are lifted, not inverted. ========================================================================== */ :root[data-theme="dark"] { --xc-navy: #1F5A94; --xc-navy-deep: #0A1622; --xc-navy-bright: #7FB3E8; --xc-green: #3DD160; --xc-green-deep: #3DD160; --xc-amber: #F5A524; --xc-bg: #0D1B29; --xc-surface: #132534; --xc-surface-sunken: #0F1F2D; --xc-nav-bg: #0A1622; --xc-nav-bg-active: #1A3044; --xc-line: #1E3346; --xc-line-strong: #2C4459; --xc-scrim: rgba(0, 0, 0, .6); --xc-halo: rgba(13, 27, 41, .82); --xc-blueprint: #0A2350; --xc-blueprint-grid: rgba(255, 255, 255, .09); --xc-on-mark: #0D1B29; --xc-text: #E8EDF2; --xc-text-muted: #9FB0C0; --xc-text-faint: #8AA0B2; --xc-text-on-navy: #FFFFFF; --xc-text-on-navy-dim:#BFD0E0; --xc-ok-mark: #3DD160; --xc-ok-text: #3DD160; --xc-ok-soft: #13301E; --xc-fault-mark: #FF7B72; --xc-fault-text: #FF7B72; --xc-fault-soft: #3A1A1A; --xc-warn-mark: #F5A524; --xc-warn-text: #F5A524; --xc-warn-soft: #35280E; --xc-idle-mark: #6E8194; --xc-idle-text: #9FB0C0; --xc-idle-soft: #1A2836; --xc-info-mark: #7FB3E8; --xc-info-text: #7FB3E8; --xc-info-soft: #14293C; --xc-series-1: #7FB3E8; --xc-series-2: #4ECDC4; --xc-series-3: #BCA0F0; --xc-series-4: #E8B65C; --xc-series-5: #8FC98F; --xc-grid: #1E3346; --xc-shadow-raised: 0 1px 2px rgba(0, 0, 0, .4); --xc-shadow-float: 0 8px 24px rgba(0, 0, 0, .55); color-scheme: dark; } /* First visit follows the device; the stored user preference wins by writing data-theme on before first paint. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --xc-navy: #1F5A94; --xc-navy-deep: #0A1622; --xc-navy-bright: #7FB3E8; --xc-green: #3DD160; --xc-green-deep: #3DD160; --xc-amber: #F5A524; --xc-bg: #0D1B29; --xc-surface: #132534; --xc-surface-sunken: #0F1F2D; --xc-nav-bg: #0A1622; --xc-nav-bg-active: #1A3044; --xc-line: #1E3346; --xc-line-strong: #2C4459; --xc-scrim: rgba(0, 0, 0, .6); --xc-halo: rgba(13, 27, 41, .82); --xc-on-mark: #0D1B29; --xc-blueprint: #0A2350; --xc-blueprint-grid: rgba(255,255,255,.09); --xc-text: #E8EDF2; --xc-text-muted: #9FB0C0; --xc-text-faint: #8AA0B2; --xc-ok-mark: #3DD160; --xc-ok-text: #3DD160; --xc-ok-soft: #13301E; --xc-fault-mark: #FF7B72; --xc-fault-text: #FF7B72;--xc-fault-soft: #3A1A1A; --xc-warn-mark: #F5A524; --xc-warn-text: #F5A524; --xc-warn-soft: #35280E; --xc-idle-mark: #6E8194; --xc-idle-text: #9FB0C0; --xc-idle-soft: #1A2836; --xc-info-mark: #7FB3E8; --xc-info-text: #7FB3E8; --xc-info-soft: #14293C; --xc-series-1: #7FB3E8; --xc-series-2: #4ECDC4; --xc-series-3: #BCA0F0; --xc-series-4: #E8B65C; --xc-series-5: #8FC98F; --xc-grid: #1E3346; --xc-shadow-raised: 0 1px 2px rgba(0, 0, 0, .4); --xc-shadow-float: 0 8px 24px rgba(0, 0, 0, .55); color-scheme: dark; } }