/* ============================================================ ERPForce Design System v2.0 — Tokens Compact · Neutral · AI-native ============================================================ */ /* One combined Google Fonts request (Inter · JetBrains Mono · IBM Plex Sans Arabic). NOTE for production: self-host + subset these to the Arabic unicode-range and drop this third-party @import — render-blocking + PDPL/IP-leak on GCC field connections (gap-audit addendum C1/C2). */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ── Brand ──────────────────────────────────────────────── */ --brand-green: #2EB273; --brand-green-deep: #1A8A56; --brand-green-dark: #146B43; --brand-navy: #001866; --brand-navy-soft: #1B2C6E; /* ── Primary scale (green) ──────────────────────────────── */ --green-50: #F1FBF6; --green-100: #E2F5EC; --green-200: #C8EBD8; --green-300: #A7DEC2; --green-400: #6DCB9D; --green-500: #2EB273; --green-600: #1A8A56; --green-700: #146B43; --green-800: #0E4D31; --green-900: #073220; /* ── Neutrals — warm-tinted, calm ───────────────────────── */ --n-0: #FFFFFF; --n-25: #FCFCFD; --n-50: #F7F8F9; --n-75: #F2F3F5; --n-100: #ECEDEF; --n-150: #E1E3E6; --n-200: #D2D5D9; --n-300: #B6BABF; --n-400: #9498A0; --n-450: #767B83; /* AA-capable mid-grey — quaternary text floor (4.5:1 on white) */ --n-500: #6D7178; --n-600: #54585F; --n-700: #3D4046; --n-800: #25272C; --n-900: #15171B; --n-950: #0B0C0F; /* ── Surfaces ───────────────────────────────────────────── */ --surface-canvas: var(--n-25); /* page bg */ --surface-raised: var(--n-0); /* cards, top bar, main panels */ --surface-sunken: var(--n-50); /* sidebars, toolbars */ --surface-muted: var(--n-75); /* inactive inputs, subtle wells */ --surface-hover: var(--n-75); --surface-active: var(--n-100); --surface-overlay: rgba(15,17,21,0.32); /* modal/sheet scrim (added 2A) */ --surface-overlay-strong: rgba(15,17,21,0.56); /* fullscreen scrim (added 2A) */ --surface-inverse: var(--n-900); /* tooltip, snackbar surface (added 2A) */ --text-on-inverse: var(--n-0); /* text on inverse surface (added 2A) */ /* ── Borders ────────────────────────────────────────────── */ --border-subtle: var(--n-100); --border-default: var(--n-150); --border-strong: var(--n-200); --border-divider: var(--n-100); /* inline cell dividers (added 2A) */ --border-focus: var(--green-500); --border-focus-ai: var(--ai-fg); /* added 2A */ --border-focus-danger: var(--danger); /* added 2A */ /* ── Text ───────────────────────────────────────────────── */ --text-primary: var(--n-900); --text-secondary: var(--n-700); --text-tertiary: var(--n-500); --text-quaternary: var(--n-450); /* a11y 4.3 — was n-400 (2.89:1, sub-AA on real text) */ --text-disabled: var(--n-300); --text-inverse: var(--n-0); --text-brand: var(--green-700); /* a11y 4.4 — was green-600 (4.36:1, just-misses AA for text) */ --text-brand-strong: var(--green-700); /* ── Action role — 3-tier brand indirection (primitive → brand → role) Components consume --color-action ONLY; a new product/white-label theme reskins by overriding --brand-action, never by touching a component (gap-audit F1). Fill is green-700 so white text clears AA at 6.53:1 — brand-green #2EB273 (2.72:1) stays for logo/identity. ── */ --brand-action: var(--green-700); /* tier 2 — overridable per product/theme */ --brand-action-hover: var(--green-800); --brand-action-active: var(--green-900); --color-action: var(--brand-action); /* tier 3 — the role components use */ --color-action-hover: var(--brand-action-hover); --color-action-active: var(--brand-action-active); --color-on-action: #FFFFFF; /* text/icon on action fill */ /* ── Semantic colors ────────────────────────────────────── */ --success: #0C8C6A; /* OWN teal-shifted ramp (~+15° off brand green) so brand green never signals routine status (1.1/7.1) */ --success-bg: #D8F3EB; --success-bg-strong: #B6E8D8; --warning: #B26B0F; --warning-bg: #FEF1DD; --warning-bg-strong: #FCDFB1; --danger: #C2363A; --danger-bg: #FBE3E5; --danger-bg-strong: #F5C7CB; --info: #2A6FDB; --info-bg: #E6EEF9; --info-bg-strong: #CDDDF3; --neutral-bg: var(--n-100); --neutral-fg: var(--n-700); /* ── Row selection (brand-tinted, dark-aware) ──────────── */ --row-selected-bg: #EAF1FB; /* neutral/info tint — NOT brand green (1.1) */ --row-selected-bg-hover: #D9E7F8; /* ── Semantic strong-fg (text on *-bg-strong) — added 2A ── */ --success-fg-strong: #07543F; /* teal-dark — matches de-branded success ramp */ --warning-fg-strong: #5C3604; --danger-fg-strong: #7A1A1F; --info-fg-strong: #133A7E; /* ── AI accent (purple) — for AI-suggested fields, agents ── */ --ai-fg: #6D45D9; --ai-bg: #EFE9FC; --ai-bg-strong: #DDD0F8; --ai-fg-deep: #5535B8; /* filled-AI button bg (added 2A) */ --ai-on-fill: #FFFFFF; /* text on ai-fg-deep (added 2A) */ /* ── Tag palette (8 hues, low-chroma) ───────────────────── */ --tag-slate-bg: #ECEDEF; --tag-slate-fg: #3D4046; --tag-green-bg: #E2F5EC; --tag-green-fg: #1A6B43; --tag-blue-bg: #E6EEF9; --tag-blue-fg: #1F4FA8; --tag-purple-bg: #EFE9FC; --tag-purple-fg: #5535B8; --tag-amber-bg: #FEF1DD; --tag-amber-fg: #8A540B; --tag-rose-bg: #FCE5E8; --tag-rose-fg: #A8232A; --tag-teal-bg: #DDF3F1; --tag-teal-fg: #156B66; --tag-pink-bg: #FBE4F1; --tag-pink-fg: #9D2B6F; /* ── Typography ─────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* compact scale — Attio-tight Half-step tokens (3xs, 2_5xs) added during audit to absorb stray sizes (9.5px, 10.5px, 11.5px) that were hardcoded across components. */ --text-3xs: 9px; /* @restricted — numeric count-chips ONLY, never words (a11y 1.4); enforced by the font-size disallow-list in .stylelintrc.json. Legit count-chip uses opt in with a stylelint-disable-line comment. */ --text-2_5xs: 10px; /* meta, kbd, eyebrows — section heads */ --text-2xs: 10px; /* @deprecated — duplicate of --text-2_5xs; migrate to --text-2_5xs (1.2) */ --text-xs: 11px; /* table meta, captions, footer text */ --text-sm: 12px; /* default body in dense UI, buttons, chips, table cells */ --text-md: 13px; /* preferred body, primary buttons */ --text-base: 14px; /* page titles in narrow chrome */ --text-lg: 15px; /* page title default */ --text-xl: 18px; /* h2 */ --text-2xl: 22px; /* h1 */ --text-3xl: 26px; /* display */ --text-4xl: 32px; /* hero */ --text-5xl: 44px; /* hero page title */ --leading-1: 1; /* @kind font */ /* single-line dense cells (added 2A) */ --leading-tight-1: 1.15; /* @kind font */ /* dense headings (added 2A) */ --leading-tight: 1.25; /* @kind font */ --leading-snug: 1.35; /* @kind font */ --leading-normal: 1.5; /* @kind font */ /* Font weights — explicit tokens so HC theme can shift +100 (added 2A) */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --tracking-tight: -0.018em; /* @kind font */ /* display */ --tracking-snug: -0.011em; /* @kind font */ /* headings */ --tracking-normal: -0.003em; /* @kind font */ /* body — Attio is barely-tracked */ --tracking-wide: 0.04em; /* @kind font */ /* uppercase eyebrows */ /* ── Spacing — 4px grid ─────────────────────────────────── */ --s-0: 0px; --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 10px; --s-6: 12px; --s-7: 14px; /* added 2A — absorbs ~80 stray 14px values across composites */ --s-8: 16px; --s-10: 20px; --s-12: 24px; --s-16: 32px; --s-20: 40px; --s-24: 48px; --s-32: 64px; /* ── Radius ─────────────────────────────────────────────── */ --r-xs: 3px; --r-sm: 4px; --r-md: 6px; /* default — buttons, inputs, chips */ --r-lg: 8px; /* cards, popovers */ --r-xl: 10px; /* sheets, modals */ --r-2xl: 14px; --r-full: 9999px; /* ── Shadows — ultra subtle ─────────────────────────────── */ --shadow-xs: 0 1px 0 rgba(15,17,21,.04); --shadow-sm: 0 1px 2px rgba(15,17,21,.04), 0 0 0 1px rgba(15,17,21,.04); --shadow-md: 0 2px 4px rgba(15,17,21,.04), 0 1px 2px rgba(15,17,21,.04), 0 0 0 1px rgba(15,17,21,.05); --shadow-lg: 0 12px 32px -8px rgba(15,17,21,.14), 0 4px 8px -2px rgba(15,17,21,.06), 0 0 0 1px rgba(15,17,21,.04); --shadow-xl: 0 24px 48px -12px rgba(15,17,21,.22), 0 8px 16px -4px rgba(15,17,21,.08), 0 0 0 1px rgba(15,17,21,.04); --shadow-focus: 0 0 0 3px rgba(46,178,115,.18); --shadow-focus-ai: 0 0 0 3px rgba(109,69,217,.18); --shadow-focus-danger: 0 0 0 3px rgba(194,54,58,.18); /* added 2A */ --shadow-inset-divider-b: inset 0 -1px 0 var(--border-subtle); /* added 2A */ --shadow-inset-divider-t: inset 0 1px 0 var(--border-subtle); /* added 2A */ /* ── Motion ─────────────────────────────────────────────── */ --ease-out: cubic-bezier(.16,1,.3,1); /* @kind other */ --ease-in-out: cubic-bezier(.65,0,.35,1); /* @kind other */ --ease-emphasized: cubic-bezier(.2,0,0,1); /* @kind other */ /* modal entry (added 2A) */ --ease-decelerate: cubic-bezier(0,0,.2,1); /* @kind other */ /* sheet entry (added 2A) */ --dur-fast: 120ms; /* @kind other */ --dur-base: 180ms; /* @kind other */ --dur-slow: 260ms; /* @kind other */ /* ── Component heights — Attio-compact ──────────────────── */ --h-xs: 20px; --h-sm: 24px; --h-md: 28px; /* default buttons, inputs */ --h-lg: 32px; --row-h: 30px; /* table row */ --row-h-c:28px; /* table row, compact */ /* ── Layout ─────────────────────────────────────────────── */ --sidebar-w: 220px; --sidebar-w-mini: 56px; --topbar-h: 44px; --subbar-h: 40px; --content-pad-x: 20px; --content-pad-y: 16px; /* ── Responsive scale standards ───────────────────────────── Five breakpoints (added 2A). Tokens above are *desktop* values. Mobile/tablet overrides live in responsive.css. */ --bp-sm: 480px; --bp-md: 768px; --bp-mobile: 640px; /* @deprecated alias — use --bp-md/--bp-sm (1.2) */ --bp-tablet: 1024px; /* @deprecated alias — use --bp-lg (1.2) */ --bp-lg: 1280px; --bp-xl: 1440px; --bp-2xl: 1920px; /* Container-query breakpoints — for composites that need to respond to their container width, not the viewport (added 2A) */ --cq-sm: 360px; --cq-md: 600px; --cq-lg: 900px; /* Touch-target floor for mobile (WCAG 2.5.5 ≥ 44px) */ --touch-min: 44px; /* @kind spacing */ /* Interactive hit-target floor — decoupled from painted size (T1). Fine pointer 32px; coarse (touch) bumped to --touch-min below. */ --hit-min: 32px; /* @kind spacing */ /* ── Z-index scale (added 2A) — every overlay must use these. Raw values (49, 48, 30, 2, 1) flagged in audit are replaced. */ --z-base: 1; /* @kind other */ --z-sticky: 20; /* @kind other */ --z-dropdown: 30; /* @kind other */ --z-drawer: 35; /* @kind other */ --z-popover: 40; /* @kind other */ --z-tooltip: 45; /* @kind other */ --z-modal-scrim:48; /* @kind other */ --z-modal: 50; /* @kind other */ --z-toast: 60; /* @kind other */ --z-debug: 99; /* @kind other */ /* Density mode — set by responsive.css per breakpoint. Components consume these instead of hardcoding heights. */ --h-control: var(--h-md); /* default control height */ --h-control-sm: var(--h-sm); --h-row: var(--row-h); --pad-x: var(--content-pad-x); --pad-y: var(--content-pad-y); } /* Coarse (touch) pointers raise the hit-target floor to 44px (T1). */ @media (pointer: coarse) { :root, .ef-root { --hit-min: var(--touch-min); } } /* ── Arabic script tokens (GCC) ────────────────────────────── IBM Plex Sans Arabic pairs with Inter's weights & x-height. Joined script needs ~1.6 leading and zero (never negative) tracking. Western digits stay LTR for all financial data via .num. Activation contract: Arabic surfaces set BOTH the native `lang="ar"` (drives font + bidi) AND `data-lang="ar"` on `.ef-root`/ (drives the typographic metric tokens). The two are separated so the metric overrides register as design tokens under a recognized [data-*] scope. */ :root { --font-sans-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif; } [data-lang="ar"] { --leading-normal: 1.65; --leading-snug: 1.5; --leading-tight: 1.4; --leading-tight-1:1.35; --leading-1: 1.3; --tracking-tight: 0; --tracking-snug: 0; --tracking-normal: 0; } /* Font family applies off the native `lang` attribute so the right script shows even when only lang="ar" is set (and in previews that omit foundations.css). Regular property, not a token. The .ef-root:lang(ar) selector (0,1,1) out-specifies foundations' .ef-root font-family (0,1,0), so it wins when both load. */ :lang(ar), .ef-root:lang(ar) { font-family: var(--font-sans-ar); } /* Dark mode (opt-in via .dark on root) */ .dark { --surface-canvas: #0B0C0F; --surface-raised: #15171B; --surface-sunken: #0F1115; --surface-muted: #1B1E23; --surface-hover: #1F2228; --surface-active: #262A31; --border-subtle: #1E2127; --border-default: #2A2E35; --border-strong: #3A3F47; --text-primary: #F2F3F5; --text-secondary: #C5C8CD; --text-tertiary: #8E9298; --text-quaternary: #6B6F76; --text-disabled: #4A4E55; --text-brand: #6DCB9D; --text-brand-strong: #8AD9B0; /* lighter than base so link hover stays visible on dark */ /* Row selection — neutral/info tint (de-branded; 1.1) */ --row-selected-bg: #16243C; --row-selected-bg-hover: #20355A; } /* Base */ * { box-sizing: border-box; } *, *::before, *::after { margin: 0; padding: 0; } html { font-size: 14px; } body { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); color: var(--text-primary); background: var(--surface-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11','ss01','ss03'; } button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; letter-spacing: inherit; } input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } a { color: inherit; text-decoration: none; }