/* ============================================================================ afb2b — Design Tokens Source of truth for the AynAlfahad B2B admin UI. Extracted from Resellers_Admin_Screen.html and normalized into clean scales. RULES: - Nothing in the app hardcodes a color, size, radius, shadow or duration. Everything references a variable below. - If you need a value that isn't here, ADD a token — don't inline a literal. - Colors are semantic (roles), not named after their hue. Use --accent, not "terracotta"; use --text-muted, not "#a8a29e". ========================================================================== */ :root { /* ----- Brand / accent (Console GOLD — now the GLOBAL accent; was warm clay) - 2026-06-23: promoted gold to the global accent per the Console design system. Re-skins primary buttons, active nav, focus rings across every admin screen. */ --accent: #F5A501; /* primary actions, active nav, focus */ --accent-hover: #DB9300; --accent-pressed: #C47E00; --accent-contrast: #1c1917; /* ink reads on gold (text/icon on top of --accent) */ --accent-tint: #FCEFCF; /* soft wash behind accent content */ --accent-tint-2: rgba(245, 165, 1, 0.16); --accent-ring: rgba(245, 165, 1, 0.50); /* focus ring / glow */ /* ----- Gold accent aliases (retained == --accent so .btn-gold/.rs-* resolve) -- */ --accent-gold: #F5A501; /* primary actions, switch-on, active page, KPI debt value, active sort arrow */ --accent-gold-hover: #DB9300; /* primary button hover */ --accent-gold-text: #8A5D00; /* text/icons on light gold surfaces (count chip, bulk btn, sync, avatar initials) */ --accent-gold-soft: #FCEFCF; /* selected row, count chip bg, bulk bar bg, icon-button hover */ --accent-gold-translucent: rgba(245, 165, 1, 0.16); /* avatar square backgrounds */ --accent-gold-border: rgba(245, 165, 1, 0.40); /* bulk action button border */ --accent-gold-ring: rgba(245, 165, 1, 0.50); /* sync ghost button border / focus */ --shadow-gold: 0 2px 8px rgba(245, 165, 1, 0.32); /* primary gold button shadow */ /* ----- Console redesign component tokens (2026-06-23) -------------------- Warm-linen recipe values + EXACT risk palette + sidebar active chrome. These are OPT-IN (consumed by design-system.css recipes + the sidebar rule); the generic surface/border tokens below stay COOL so un-migrated screens don't shift. Page bg (--bg-canvas) stays #f2f3f5. */ --card-radius-console: 13px; /* tighter than --radius-md */ --card-shadow-flat: 0 1px 2px rgba(40, 30, 20, .05); --card-border-warm: #e3dfd9; --table-header-bg: #f5f3ef; --table-header-text: #9a948c; --row-zebra-bg: #faf8f5; /* even-row tint (zebra) */ --row-border-warm: #efece7; --row-hairline: #f0e9df; /* warm hairline (card banners, dividers) */ --row-hover-warm: #f7f2ec; --toolbar-bg: #fbf9f6; --risk-track: #ece9e4; /* risk progress-bar track */ /* Risk palette — EXACT handoff hex, decoupled from Bootstrap danger so the bell badge + danger-button borders keep --danger-fg (#c8432f) below. */ --risk-healthy-fg: #4F7A52; --risk-healthy-bg: #E9EFE4; --risk-near-fg: #A9760F; --risk-near-bg: #F5ECD6; --risk-over-fg: #AE3A2C; --risk-over-bg: #F4E0DA; /* Sidebar active chrome (Console tan/brown) — consumed by afb2b-theme.css. */ --sidebar-active-bg: #F3E6DB; --sidebar-active-text: #8F4327; /* ----- Surfaces (cool light — Cool Linen neutrals; accent stays warm) ---- */ --bg-canvas: #f2f3f5; /* page background — Cool Linen (cool neutral, user-locked) */ --surface: #ffffff; /* cards, tables, panels */ --surface-raised: #f7f8fa; /* subtly lifted areas, hover rows (cool) */ --surface-sunken: #eef1f4; /* inset wells, inputs at rest (cool) */ --surface-hover: #f1f3f5; /* row / item hover (cool) */ --sidebar-bg: #f7f8fa; /* left nav rail — subtle cool off-white, distinct from white cards */ /* ----- Text -------------------------------------------------------------- */ --text: #1c1917; /* primary / headings */ --text-secondary: #57534e; /* body, secondary labels */ --text-muted: #8a847d; /* meta, placeholders, captions */ --text-faint: #a8a29e; /* disabled, very low emphasis */ --text-on-accent: #ffffff; /* ----- Borders / dividers ----------------------------------------------- */ --border: #e4e7eb; /* default hairline (cool) */ --border-strong: #d4d9df; /* emphasized / input outline (cool) */ --border-faint: #eef0f3; /* internal table rule (cool) */ /* ----- Status (foreground / soft background pairs) ----------------------- */ --success-fg: #4f7a52; --success-bg: #e9efe4; --warning-fg: #a9760f; --warning-bg: #f5ecd6; --danger-fg: #c8432f; --danger-fg-strong: #ae3a2c; --danger-bg: #fdeeeb; --danger-border: rgba(200, 67, 47, 0.30); --info-fg: #8f4327; /* reuses clay family */ --info-bg: #f3e6db; /* ----- Typography -------------------------------------------------------- */ --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* numerals, IDs, dates, amounts */ --font-arabic: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', sans-serif; /* RTL */ /* type scale (px → rem at 16px base kept literal for fidelity) */ --fs-micro: 11px; /* uppercase eyebrow labels */ --fs-xs: 12px; /* meta, table sublabels */ --fs-sm: 13px; /* default body / table cells (dominant) */ --fs-base: 14px; /* primary body, inputs, buttons */ --fs-md: 15px; /* card titles, emphasized rows */ --fs-lg: 17px; /* section / page subheads */ --fs-xl: 20px; /* page title */ --fs-2xl: 26px; /* hero figures / big numerals */ --fs-3xl: 30px; /* KPI card values (Console) */ --lh-tight: 1.2; --lh-normal: 1.45; --lh-relaxed:1.6; --fw-medium: 500; --fw-semibold: 600; /* default for labels/buttons */ --fw-bold: 700; --fw-heavy: 800; /* page titles, KPI numbers */ --tracking-label: 0.5px; /* uppercase micro labels */ --tracking-tight: -0.4px; /* large headings */ --tracking-figure: -0.6px; /* big numerals / KPI values */ /* ----- Spacing scale (4px base) ----------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 6px; --space-3: 8px; --space-4: 12px; --space-5: 14px; --space-6: 16px; --space-7: 20px; --space-8: 22px; --space-9: 28px; --space-10: 32px; /* ----- Radius ------------------------------------------------------------ */ --radius-xs: 6px; /* chips, tags */ --radius-sm: 10px; /* buttons, inputs, small controls */ --radius-md: 12px; /* cards, panels, table container */ --radius-lg: 16px; /* large surfaces, modals */ --radius-pill: 999px; /* status pills, segmented filters */ --radius-full: 50%; /* avatars, icon circles */ /* ----- Shadows (WARM-tinted — never pure black) -------------------------- */ --shadow-xs: 0 1px 2px rgba(60, 40, 20, 0.06); --shadow-sm: 0 2px 8px rgba(70, 52, 32, 0.06); --shadow-md: 0 4px 12px rgba(60, 40, 20, 0.10); --shadow-lg: 0 12px 32px rgba(60, 40, 20, 0.12); --shadow-accent: 0 2px 8px rgba(182, 90, 54, 0.26); /* resting accent button */ --shadow-accent-lg: 0 4px 12px rgba(182, 90, 54, 0.30); /* hover/active accent */ /* ----- Motion ------------------------------------------------------------ */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-fast: 0.12s; --dur-normal: 0.15s; --transition-base: all var(--dur-normal) var(--ease); /* ----- Focus ------------------------------------------------------------- */ --focus-ring: 0 0 0 3px var(--accent-ring); } /* RTL: swap to the Arabic face and lean on logical properties everywhere. */ [dir="rtl"] { --font-sans: var(--font-arabic); }