/* ========================================================================== Smart Kid CRM — shared design tokens Hand-authored plain CSS. No build step. Loaded FIRST on every CRM route. Why this file exists -------------------- inbox.css and crm.css each carry their own identical copy of the neutral ramp and the semantic set. Two copies drift; three would be worse. This is the single source of truth from here on. Why it is safe to add underneath two approved stylesheets --------------------------------------------------------- Every value below is byte-identical to what inbox.css and crm.css already declare, and both of those files still declare their own copies and load AFTER this one — so on the Inbox, Dashboard, Campaigns and Safety Center the cascade resolves to exactly the same computed value it did before this file existed. Deleting this file reverts those pages to their prior state with no other change. Two tokens are deliberately NOT declared here: --sk-canvas inbox.css uses #efeae2 (the chat wallpaper) while crm.css uses #f3f4f6 (the page ground). They are genuinely different decisions, not a drift, so each page keeps its own. --sk-radius 12px for message bubbles, 10px for cards. Same reasoning. New surfaces declare those two for themselves. ========================================================================== */ :root { /* --- text ramp: hierarchy is carried by tone, not by size --------------- */ --sk-ink: #111827; --sk-ink-2: #374151; --sk-ink-soft: #6b7280; --sk-ink-faint: #9ca3af; /* --- structure --------------------------------------------------------- */ --sk-line: #e5e7eb; /* structural border */ --sk-line-soft: #f0f1f3; /* list divider */ --sk-surface: #ffffff; --sk-hover: #f7f8f9; /* --- action ------------------------------------------------------------ Primary is near-black, never blue. This single choice is what keeps the CRM from reading as a generic admin panel, so it lives here to make it hard to contradict by accident. */ --sk-accent: #111827; /* --- selection and focus: indigo, and only ever indigo ----------------- */ --sk-sel: #eef2ff; --sk-sel-edge: #4f46e5; --sk-info: #4f46e5; /* --- semantic: meaning only, never decoration -------------------------- */ --sk-good: #16a34a; --sk-good-bg: #f0fdf4; --sk-good-ink: #166534; /* Not in inbox.css/crm.css's own token block — both warn and bad already had a -line border shade, good never did, so every good/ok border in the CRM hardcoded #bbf7d0 by hand instead (crm.css's own .sk-badge2--completed among them). Added here for new work; existing approved-file occurrences are untouched, same value either way. */ --sk-good-line: #bbf7d0; --sk-ok-bg: #f0fdf4; --sk-ok-ink: #166534; --sk-warn: #d97706; --sk-warn-bg: #fffbeb; --sk-warn-ink: #92400e; --sk-warn-line: #fde68a; --sk-bad: #dc2626; --sk-bad-bg: #fef2f2; --sk-bad-ink: #991b1b; --sk-bad-line: #fecaca; --sk-idle: #9ca3af; /* --- shell ------------------------------------------------------------- --sk-nav-h (the navigation bar's height) is defined once, in nav.css, which loads on every authenticated page. Do not redeclare it here. */ /* --- motion ----------------------------------------------------------- One duration for every hover and selection change in the CRM. Kept as a token so the reduced-motion rule in crm-shared.css can zero it in one place rather than hunting declarations. */ --sk-t: 150ms; /* --- formal spacing/radius scale ---------------------------------------- Names the steps every file already uses in practice. NOT a retrofit: inbox.css and crm.css keep their literal px values — rewriting five files' worth of working declarations to var() would be a full-file diff with no visual change and real regression surface, for a byte-stable pair that cannot be touched anyway. This scale is for new work (Social Inbox's redesign) so it stops inventing its own numbers. */ --sk-space-1: 2px; --sk-space-2: 4px; --sk-space-3: 6px; --sk-space-4: 8px; --sk-space-5: 10px; --sk-space-6: 12px; --sk-space-7: 14px; --sk-space-8: 16px; --sk-space-9: 20px; --sk-space-10: 24px; --sk-space-11: 32px; --sk-radius-sm: 6px; /* pills-adjacent, small controls */ --sk-radius-md: 8px; /* buttons, inputs */ --sk-radius-lg: 10px; /* cards */ /* --- typography, promoted CRM-wide --------------------------------------- Both were introduced scoped to .sk-social pending visual approval; that approval is this phase's own instruction ("promote CRM-wide if the visual validation remains successful"), so they move here and apply to (see crm-shared.css's body.font-sans rule — Tailwind's own .font-sans class has to be beaten on specificity, an element selector alone cannot). Figtree stays the Latin face; Plex Arabic sits before it in the stack so Arabic glyphs render in a face actually designed for them instead of falling through to whatever the OS supplies, which is what every screen except Social Inbox was doing until now. Mono is for IDs, timestamps and technical/numeric values ONLY — never applied to normal Arabic or English content. Sharing Plex's design with the Arabic face means a numeral sitting next to Arabic text doesn't visually clash with a generic ui-monospace fallback. */ --sk-font-ar: 'IBM Plex Sans Arabic', 'Figtree', ui-sans-serif, system-ui, 'Segoe UI', Tahoma, sans-serif; --sk-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ========================================================================== DESIGN SYSTEM TOKENS (--ui-*) The shared language the later page migrations are built on. Every value below is copied from the approved production Dashboard (command-center.css, `.cc`), which stays the visual reference and keeps its own `--cc-*` values until it is migrated; nothing here replaces or aliases them. Nothing in the existing CRM reads a `--ui-*` variable, so declaring them changes no existing page. They are consumed only by ui.css / shell.css, which load on pages that opt in. The legacy `--sk-*` block above is untouched: it keeps the near-black / indigo values the existing pages were approved with, and none of them becomes a default of the new system (tests pin both). Rules this file encodes ----------------------- - Navy is the ink. Turquoise, cyan, orange and gold are MARKS (rails, bars, rings, dots, icons) and never carry text: on white turquoise is 2.7:1. - Text contrast on every approved surface: navy 10.0-10.4:1, soft ink (78% navy) 5.4-5.5:1. Do not introduce a lighter text tone. - Semantic good / warn / bad stay separate from brand and always travel with text or an icon. "Enabled" is not "danger": red means failure, an unsafe state, an emergency stop, or required intervention. - Decorative lines are faint on purpose (--ui-line, 1.25:1). The boundary of a form control is NOT decoration, so it has its own token that reaches 3:1 on every surface (--ui-line-control, WCAG 1.4.11). Breakpoints (media queries cannot read variables; use these numbers): 1280 wide desktop 1024 desktop bar / two-pane 768 tablet portrait 720 phone layout (tables become cards) ========================================================================== */ :root { /* --- surfaces ---------------------------------------------------------- */ --ui-canvas: #FBFEFD; /* page canvas */ --ui-surface-hero: #F7FCFB; /* the "today" hero surface */ --ui-surface-zone: #FCFEFE; /* the large analytical zone */ --ui-surface: #FFFFFF; /* cards */ --ui-mint: #EFFAF9; /* brand mint: a reference tint, not a page background */ /* --- brand -------------------------------------------------------------- */ --ui-navy: #233C80; --ui-turquoise: #19AFA9; --ui-orange: #F26926; --ui-gold: #F9A71B; --ui-cyan: #00AEF0; /* --- ink ---------------------------------------------------------------- */ --ui-ink: var(--ui-navy); --ui-ink-soft: rgba(35, 60, 128, .78); /* secondary text: >= 5.4:1 on every surface */ --ui-ink-on-solid: #FFFFFF; /* text on a solid navy or semantic-red control */ /* --- lines, tracks, tints ------------------------------------------------ */ --ui-line: rgba(35, 60, 128, .13); /* card and divider borders (decorative) */ --ui-line-soft: rgba(35, 60, 128, .08); /* list dividers */ --ui-line-control: rgba(35, 60, 128, .58); /* form-control boundary: >= 3.1:1 on every approved surface (WCAG 1.4.11) */ --ui-track: rgba(35, 60, 128, .09); /* the empty part of a bar / meter */ --ui-tint: rgba(25, 175, 169, .045); /* resting tint (notes, empty states) */ --ui-tint-edge: rgba(25, 175, 169, .22); --ui-tint-hover: rgba(25, 175, 169, .10); --ui-tint-selected: rgba(25, 175, 169, .12); --ui-tint-active: rgba(25, 175, 169, .18); /* --- focus --------------------------------------------------------------- */ --ui-focus-color: var(--ui-navy); /* 10.4:1 on white; visible on every surface */ --ui-focus-width: 2px; --ui-focus-offset: 2px; /* --- semantic: meaning only, never decoration ------------------------------ */ --ui-good: #16a34a; --ui-good-bg: #f0fdf4; --ui-good-ink: #166534; --ui-good-line: #bbf7d0; --ui-warn: #d97706; --ui-warn-bg: #fffbeb; --ui-warn-ink: #92400e; --ui-warn-line: #fde68a; --ui-bad: #dc2626; --ui-bad-bg: #fef2f2; --ui-bad-ink: #991b1b; --ui-bad-line: #fecaca; --ui-idle: #9ca3af; /* the dot of an inactive/unknown state; never text */ /* --- spacing: a 4px scale -------------------------------------------------- */ --ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px; --ui-space-4: 16px; --ui-space-5: 20px; --ui-space-6: 24px; --ui-space-7: 32px; --ui-space-8: 40px; --ui-space-9: 48px; --ui-space-10: 56px; --ui-gap: 16px; --ui-gap-lg: 20px; --ui-pad: clamp(14px, 1.3vw, 22px); /* card padding */ --ui-gutter: clamp(14px, 2vw, 40px); /* page side margin on the wide family */ /* --- radii ------------------------------------------------------------------ */ --ui-radius-sm: 8px; /* chips, small controls */ --ui-radius-md: 10px; /* buttons, inputs */ --ui-radius-lg: 16px; /* cards */ --ui-radius-xl: 22px; /* hero surface */ --ui-radius-2xl: 26px; /* analytical zone */ --ui-radius-pill: 999px; /* --- shadows: nearly none; only the hero and floating layers carry one ----- */ --ui-shadow-none: none; --ui-shadow-hero: 0 10px 28px -20px rgba(35, 60, 128, .35); --ui-shadow-popover: 0 14px 34px -12px rgba(35, 60, 128, .35); --ui-shadow-sheet: 0 20px 44px -16px rgba(35, 60, 128, .45); /* --- typography --------------------------------------------------------------- Arabic-first. The stack does not name Figtree: every CRM page uses Plex, and the legacy --sk-font-ar keeps Figtree for the pages that still read it. Mono is for IDs, timestamps and technical values only, never for content. */ --ui-font: 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, 'Segoe UI', Tahoma, sans-serif; --ui-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ui-fs-display: clamp(34px, 3vw, 56px); /* the hero figure */ --ui-fs-kpi-lg: clamp(26px, 2.35vw, 44px); /* a large money figure */ --ui-fs-kpi: clamp(20px, 1.6vw, 26px); /* a KPI figure */ --ui-fs-title: clamp(22px, 1.6vw, 28px); /* page title */ --ui-fs-h2: 17px; --ui-fs-h3: 15px; --ui-fs-body: 14px; --ui-fs-control: 13.5px; --ui-fs-small: 13px; --ui-fs-xs: 12.5px; --ui-lh-body: 1.55; --ui-lh-tight: 1.25; --ui-fw-regular: 400; --ui-fw-medium: 500; --ui-fw-semibold: 600; --ui-fw-bold: 700; /* --- controls and shell ------------------------------------------------------- */ --ui-control-h-sm: 32px; --ui-control-h: 40px; --ui-control-h-lg: 44px; --ui-touch-min: 44px; /* minimum target on a touch layout */ --ui-nav-h: var(--sk-nav-h, 64px); /* an alias: the one definition lives in nav.css */ --ui-w-wide: 1680px; /* the container families (the navigation follows the same ones) */ --ui-w-standard: 1248px; --ui-w-narrow: 1100px; --ui-w-data: 1400px; /* the data-dense family (Recovery); the navigation names the same width */ /* --- shared layers (only the ones genuinely shared) ----------------------------- */ --ui-z-sticky: 30; /* a sticky bar inside a page */ --ui-z-nav: 40; /* the navigation (nav.css) */ --ui-z-popover: 45; --ui-z-scrim: 55; --ui-z-modal: 60; --ui-z-toast: 70; /* --- motion ----------------------------------------------------------------------- */ --ui-t: 150ms; --ui-ease: ease; }