/* Qistas DS token layer — current channel (single source of truth: the running app). GENERATED from tools/design/ds-src/tokens/. Custom-property definitions only. */ /* ---- tokens/version.css ---- */ :root{ --q-ds-version:"1.0.0"; --q-ds-built:"2026-08-19"; /* channel is stamped by the entry file that imports this layer */ } /* ---- tokens/logical.css ---- */ /* Direction primitives. Host page MUST set dir on ; default here is RTL (matches the Qistas app, where Arabic is the base locale and the unsuffixed stylesheet is the Arabic one). LTR-primary consumers set dir="ltr". Rule for all DS components: logical properties ONLY — padding-inline, margin-inline-start, inset-inline-end, border-inline-start, text-align:start. Never left/right. This is what collapses the app's 36 .en.css direction forks. */ :root{ --q-dir:1; /* 1 = rtl (default), -1 = ltr — for transforms that must mirror */ } [dir="ltr"]{ --q-dir:-1; } /* ---- tokens/fonts.css ---- */ /* FONT STACKS — measured from the rendered app: 47,420 nodes render 'CareemRegular, sans-serif'; GE_SS_TEXT_LIGHT is the Arabic fallback tier. The host app provides the @font-face files (assets/fonts/CareemRegular.ttf etc.). */ :root{ --q-font-body:'CareemRegular','GE_SS_TEXT_LIGHT',Tahoma,sans-serif; --q-font-body-medium:'GE_SS_Text_Medium','CareemRegular',Tahoma,sans-serif; --q-font-design:'CareemRegular','GE_SS_TEXT_LIGHT',Tahoma,sans-serif; /* alias kept for cards */ --q-font-ar-asbuilt:'CareemRegular','GE_SS_TEXT_LIGHT',Tahoma,sans-serif; --q-font-en-asbuilt:'CareemRegular','Inter',system-ui,sans-serif; --q-font-mono:'SF Mono',Menlo,Consolas,monospace; } /* ---- tokens/primitives.current.css ---- */ /* QISTAS CURRENT PRIMITIVES — the single source of truth. Every value below is MEASURED from the rendered app (22 captured screens, computed-style aggregation, cascade winners weighted by node count). No legacy values, no prototype values, no brochure values. */ :root{ /* ink (node counts from the live render) */ --q-ink:#1b2733; /* headings — 2,301 nodes */ --q-body-ink:#3a4553; /* dominant body text — 20,185 nodes */ --q-body-ink-2:#333b46; /* 141 */ --q-secondary-ink:#5c6976; /* 306 */ --q-secondary-ink-2:#6b7885; /* 493 */ --q-muted-ink:#8b98a5; /* 82 (+ #93a0ad 129, #7b8794 50 — same family) */ --q-subtle-ink:#93a0ad; /* 129 */ /* brand blues of the current shell */ --q-navy:#022f67; /* topbar / brand navy — the shell's ground */ --q-navy-deep:#1e3a63; /* 138 */ --q-accent:#1d6fb8; /* action/link accent — 47 rendered + stylev2 vocabulary */ --q-accent-light:#43a1d5; /* hover/light accent — 96 */ /* fills & lines */ --q-fill-subtle:#f1f5f9; /* 393 — the app's soft fill */ --q-fill-soft:#f5f7fa; /* 21 */ --q-hairline:#e3e8ed; /* 44 */ --q-selected-bg:#eaf2fb; --q-selected-border:#cfe0ee; --q-selected-fg:#14507f; /* status + signals (rendered) */ --q-danger:#fa5661; /* 154 — the app's own danger/notification red */ --q-info-dot:#60a5fa; /* bell dot — 21 */ --q-release-dot:#9dc6e6; /* release chip — 16 */ --q-gold:#d8b747; /* hero-gradient terminal stop (current AR shell) */ /* on-dark (topbar/rail glyphs) */ --q-ondark-glyph:#e6eff7; /* 941 */ --q-ondark-strong:#edf2f7; /* 1,890 */ --q-ondark-78:rgba(255,255,255,.78); --q-ondark-68:rgba(255,255,255,.68); /* dark-surface elements rendered inside light pages */ --q-panel-dark:#1a202c; /* 44 */ --q-panel-dark-2:#2d3748; /* 42 */ } /* Compatibility aliases — existing cards reference these names; they now resolve to CURRENT values only. Do not use in new work. */ :root{ --q-d-accent:var(--q-accent); --q-d-accent-hover:var(--q-navy-deep); --q-d-navy:var(--q-navy); --q-d-navy-hover:var(--q-navy-deep); --q-d-navy-deep:var(--q-navy-deep); --q-d-navy-gradient:var(--q-navy); --q-d-ink:var(--q-ink); --q-d-body:var(--q-body-ink); --q-d-secondary:var(--q-secondary-ink); --q-d-secondary-2:var(--q-secondary-ink-2); --q-d-muted:var(--q-muted-ink); --q-d-placeholder:var(--q-subtle-ink); --q-d-hairline:var(--q-hairline); --q-d-border-input:#dbe4ec; --q-d-border-soft:#dde2ec; --q-d-fill-subtle:var(--q-fill-subtle); --q-d-fill-page:var(--q-fill-soft); --q-d-selected-bg:var(--q-selected-bg); --q-d-selected-border:var(--q-selected-border); --q-d-selected-text:var(--q-selected-fg); --q-d-amber:var(--q-gold); --q-d-danger:var(--q-danger); --q-d-shadow-tint:11,47,82; --q-d-focus-tint:29,111,184; --q-d-topbar-glyph:var(--q-ondark-glyph); --q-d-notif-dot:var(--q-info-dot); --q-d-release-dot:var(--q-release-dot); --q-d-tree-ink-1:var(--q-ink); --q-d-tree-ink-2:var(--q-body-ink); --q-d-tree-ink-3:var(--q-secondary-ink); --q-d-tree-on:var(--q-selected-bg); --q-d-tree-part:var(--q-fill-soft); --q-d-surface-hover:var(--q-fill-soft); --q-d-group-head:var(--q-subtle-ink); --q-d-pill-remove:var(--q-muted-ink); } /* ---- tokens/typography.css ---- */ /* TYPE SCALE — shared names, per-channel notes. The design language is deliberately dense: median size 11.5px, body weight 500, half-pixel steps are first-class (43% of all font-size declarations). px on purpose: the app's base is 13px, not 16px — rem would lie. */ :root{ --q-text-3xs:9.5px; --q-text-2xs:10px; --q-text-2xs-plus:10.5px; --q-text-xs:11px; --q-text-xs-plus:11.5px; /* design body default (2,233 uses) */ --q-text-sm:12px; --q-text-sm-plus:12.5px; --q-text-md:13px; /* app .font13 (508 blade uses) */ --q-text-md-plus:13.5px; --q-text-lg:14px; /* app .font14 (498) */ --q-text-xl:15px; --q-text-2xl:16px; --q-text-3xl:18px; --q-text-4xl:22px; --q-weight-light:300; --q-weight-regular:400; --q-weight-medium:500; /* DESIGN BODY DEFAULT — not 400 */ --q-weight-semibold:600; --q-weight-bold:700; --q-leading-none:1; --q-leading-tight:1.35; --q-leading-normal:1.45; --q-leading-relaxed:1.6; --q-leading-arabic:1.8; /* Arabic runs looser */ } /* ---- tokens/spacing.css ---- */ /* SPACING — measured, not idealised. The design prototypes are on NO grid: 45.8% odd-pixel values; the two most common paddings are 9px and 7px. The honest scale is this 12-step dense set. The as-built app trends 5px-ish; the brand system is strict 4px. All channels share these names; brand consumers may snap to the 4px subset. */ :root{ --q-space-1:2px; --q-space-2:4px; --q-space-3:5px; --q-space-4:6px; --q-space-5:7px; /* design: 2,693 uses */ --q-space-6:8px; --q-space-7:9px; /* design: 3,804 uses — the modal/panel default */ --q-space-8:10px; --q-space-9:12px; --q-space-10:13px; --q-space-11:14px; --q-space-12:16px; --q-space-14:20px; --q-space-16:24px; --q-space-20:32px; --q-gutter:24px; --q-control-height-sm:26px; /* .q-quick */ --q-control-height-md:28px; /* .q-year */ --q-control-height-lg:34px; --q-rail-width:75px; /* the app's icon rail */ --q-topbar-height:56px; } /* --- additions from component TOKEN-GAP audit (feedback family) --- */ :root{ --q-space-18:18px; /* modal inline padding, close-x hit area */ --q-control-height-xl:32px; /* dialog buttons, menu items */ --q-size-close:18px; --q-menu-min-width:186px; --q-toast-width:320px; /* remote edit 2026-08-19: was 300px — widened per design review */ --q-tooltip-max-width:260px; --q-modal-sm:334px; --q-modal-md:392px; --q-modal-lg:452px; --q-offcanvas-md:min(420px, 92vw); --q-offcanvas-xxl:min(1140px, 96vw); } /* --- TOKEN-GAP fold-in #2 (core/forms/navigation audits) --- */ :root{ --q-topbar-height-compact:38px; /* the live redesigned bar (56px = legacy token) */ --q-rail-width-narrow:58px; --q-rail-width-wide:250px; --q-rail-row-height:44px; --q-control-height-2xs:23px; /* .q-qtab */ --q-control-height-xs:24px; /* filter pill / presets */ --q-tree-indent:19px; /* practice-area tree indent step */ --q-check-size-sm:11px; /* compact filter checkbox */ --q-switch-track:19px; /* 34x19 switch */ --q-panel-width:300px; /* filter/sidebar panel */ --q-searchbar-height:38px; /* hero search input */ --q-searchbar-radius:14px; } /* ---- tokens/radius.css ---- */ /* RADII — the design uses 4/5/6/7/8 at similar volume; semantic names pick the observed per-role mode. Pill spelled once (999px), not twice. */ :root{ --q-radius-xs:4px; --q-radius-sm:5px; --q-radius-md:6px; --q-radius-md-plus:7px; --q-radius-lg:8px; --q-radius-xl:10px; --q-radius-2xl:12px; --q-radius-pill:999px; --q-radius-circle:50%; --q-radius-control:5px; /* inputs (.q-year) */ --q-radius-chip:6px; /* quick buttons */ --q-radius-card:8px; --q-radius-menu:9px; --q-radius-modal:10px; } /* ---- tokens/elevation.css ---- */ /* ELEVATION — 3 tiers + focus ring. Tint varies per channel: design rgba(11,47,82,α) · as-built pure black · brand #01294F-tinted. The semantic files own the composed values; these are the alpha steps. */ :root{ --q-elev-alpha-rest:.28; --q-elev-alpha-card:.22; --q-elev-alpha-pop:.20; --q-elev-alpha-modal:.34; } /* on-dark white-alpha ladder (topbar / rail / hero glass) */ :root{ --q-ondark-06:rgba(255,255,255,.06); --q-ondark-10:rgba(255,255,255,.10); --q-ondark-12:rgba(255,255,255,.12); --q-ondark-18:rgba(255,255,255,.18); --q-ondark-25:rgba(255,255,255,.25); --q-ondark-33:rgba(255,255,255,.33); --q-ondark-50:rgba(255,255,255,.50); --q-ondark-82:rgba(255,255,255,.82); --q-searchbar-halo:0 8px 32px rgba(0,0,0,.2); } /* ---- tokens/motion.css ---- */ /* MOTION — observed: .15s ease on controls, .18s chevrons, ~.5s theme fade. */ :root{ --q-duration-fast:150ms; --q-duration-base:180ms; --q-duration-slow:500ms; --q-ease-standard:ease; --q-transition-control:background .15s ease, color .15s ease, border-color .15s ease; } :root{ --q-duration-shimmer:1200ms; } /* ---- tokens/semantic.current.css ---- */ /* SEMANTIC ROLES — single channel: the current Qistas app. */ :root{ --q-text-strong:var(--q-ink); --q-text-body:var(--q-body-ink); --q-text-secondary:var(--q-secondary-ink); --q-text-muted:var(--q-muted-ink); --q-text-subtle:var(--q-subtle-ink); --q-text-link:var(--q-accent); --q-text-link-hover:var(--q-accent-light); --q-text-on-dark:#ffffff; --q-text-accent:var(--q-accent); --q-surface-page:#ffffff; --q-surface-card:#ffffff; --q-surface-sunken:var(--q-fill-subtle); --q-surface-inverse:var(--q-navy); --q-surface-selected:var(--q-selected-bg); --q-border-subtle:var(--q-hairline); --q-border-default:#dbe4ec; --q-border-soft:#dde2ec; --q-border-selected:var(--q-selected-border); --q-action-primary:var(--q-accent); --q-action-primary-hover:var(--q-navy-deep); --q-action-primary-fg:#ffffff; --q-action-navy:var(--q-navy); --q-action-navy-hover:var(--q-navy-deep); --q-selected-fg:#14507f; --q-status-danger:var(--q-danger); --q-status-danger-hover:#e14550; --q-status-danger-surface:#fdecee; --q-status-success:#1f8a5b; --q-status-success-surface:#e7f5ee; --q-status-warning:#b26a00; --q-status-warning-surface:#fbf0df; --q-status-info:var(--q-accent); --q-accent-warm:var(--q-gold); /* the current shell's gradients (measured from the live pages) */ --q-gradient-hero:linear-gradient(161.14deg, rgba(5,26,75,0.92) -2.94%, #134782 1.77%, #0A3B77 29.8%, #2C729E 69.47%), linear-gradient(0deg, #175C9F, #175C9F); --q-gradient-hero-band:linear-gradient(123.05deg, #0B3F7A -8.8%, rgba(7,57,115,0.8) 9.99%, rgba(109,153,196,0.56) 34.75%, #003D77 78.25%, rgba(5,26,75,0.92) 207.4%), linear-gradient(0deg, #022F67, #022F67); --q-focus-ring:0 0 0 2px rgba(29,111,184,.12); --q-shadow-control:0 1px 3px rgba(11,47,82,.28); --q-shadow-popover:0 10px 28px rgba(11,47,82,.20); --q-shadow-modal:0 24px 64px rgba(11,47,82,.34); } /* ---- tokens/semantic.dark.css ---- */ /* DARK MODE — token redefinitions under BOTH the app's body class (.themeDarkMode — compat concession) and the portable [data-q-theme="dark"]. Values from public/assets/css/qistas/themeDarkMode.css's own --dm-* set, the one deliberate token block the app already had. */ .themeDarkMode, [data-q-theme="dark"]{ --q-text-strong:#e6edf3; --q-text-body:#e6edf3; --q-text-secondary:#b7c2ce; --q-text-muted:#8b97a6; --q-text-subtle:#8b97a6; --q-text-link:rgba(63,150,233,1); --q-text-link-hover:#7fbdf0; --q-text-accent:rgba(63,150,233,1); --q-surface-page:#0d131c; --q-surface-card:#131a25; --q-surface-sunken:#0f151f; --q-surface-inverse:#1a2230; --q-surface-selected:rgba(63,150,233,.14); --q-border-subtle:rgba(255,255,255,.10); --q-border-default:rgba(255,255,255,.10); --q-border-soft:rgba(255,255,255,.10); --q-border-selected:rgba(255,255,255,.18); --q-action-primary:#1f69b0; --q-action-primary-hover:rgba(63,150,233,1); --q-selected-fg:#e6edf3; --q-shadow-control:0 1px 3px rgba(0,0,0,.5); --q-shadow-popover:0 10px 28px rgba(0,0,0,.55); --q-shadow-modal:0 24px 64px rgba(0,0,0,.65); } /* ---- app-compat (utility-class pins) ---- */ /* APP-COMPAT utility tokens — used ONLY by fonts.qistas.css utility classes. These pin the exact literals those classes rendered before tokenisation. NOT part of the design system; do not use in new work. */ :root{ --q-uc-707070:#707070; --q-uc-393939:#393939; --q-uc-504d4d:#504D4D; --q-uc-2678a5:#2678A5; --q-uc-8c8c8c:#8c8c8c; --q-uc-3a4553:rgba(58,69,83,1); --q-uc-45556c:rgba(69,85,108,1); --q-uc-01294f:rgba(1,41,79,1); --q-uc-004a91:rgba(0,74,145,1); --q-uc-3f96e9:rgba(63,150,233,1); --q-uc-d7b746:#d7b746; } :root{ --q-ds-channel:"current"; }