/* ============================================================ IntoActiv — Portal Design Tokens Source of truth: intoactiv_design_system_v2 (mobile app v2.1) Adapted for desktop web portals (Admin / Ad Manager). Loaded once on every Admin / Ad Manager page. Pure CSS variables — zero rendered output until consumed by a component class. Safe on un-redesigned pages. CRITICAL RULES (mirrored from the v2 design doc): 1. The brand "primary action" color is INK #1A1A1A — never a vibrant accent. There is no orange in this system. 2. #9D0B0E is the iA logo mark color ONLY. Never use it on any UI element. It is exposed as --ia-logo for reference but no component CSS may reference it. 3. Page background is the warm cream #F8F6F2 — never pure white. White is reserved for elevated surfaces (cards, modals, inputs, popovers). 4. DM Serif Display is for screen-level hero moments only (page H1, splash, major empty states). Repeats kill the effect — DM Sans handles every list, card, button, label. 5. Status badges use radius 4px. They are NOT pills. Pills (radius 100px) are only for filter chips, search bars, and avatars. ============================================================ */ :root { /* ────────────────────────────────────────────────────────── 1. SURFACES (v2 §3 "Surfaces") ────────────────────────────────────────────────────────── */ --ia-bg: #F8F6F2; /* pageBg — all screens */ --ia-bg-soft: #F0EDE8; /* skeleton base, neutral chip bg */ --ia-surface: #FFFFFF; /* cards, inputs, modals, popovers */ --ia-surface-2: #F2EFE9; /* surfaceMid — icon circles, hover rows */ --ia-surface-press: #EDEAE4; /* surfacePress — pressed list item */ /* ────────────────────────────────────────────────────────── 2. INK / TEXT (v2 §3 "Text") ────────────────────────────────────────────────────────── */ --ia-ink: #1A1A1A; /* textPrimary — headings, primary action fill */ --ia-ink-2: #6B6760; /* textSecondary — subtitles, role labels */ --ia-ink-3: #A09A92; /* textMuted — timestamps, helper, chevrons */ --ia-ink-4: #C4BEB8; /* textHint — input placeholders only */ --ia-ink-inverse: #FFFFFF; /* ────────────────────────────────────────────────────────── 3. LINES (v2 §3 "Borders") ────────────────────────────────────────────────────────── */ --ia-border: #E8E4DC; /* borderLight — inputs, cards, dividers */ --ia-border-strong: #C8C4BC; /* borderMid — outline button, stronger separators */ --ia-border-focus: #1A1A1A; /* borderFocus — focused input border ONLY */ /* ────────────────────────────────────────────────────────── 4. LOGO MARK COLOR — DO NOT USE IN UI ────────────────────────────────────────────────────────── */ --ia-logo: #9D0B0E; /* iA wordmark / logomark only — NEVER UI */ /* ────────────────────────────────────────────────────────── 5. SEMANTIC (v2 §3 "Semantic") ────────────────────────────────────────────────────────── */ --ia-success: #1A7A48; --ia-danger: #E24B4A; --ia-warning: #F0921A; --ia-info: #185FA5; /* Badge / pill bg+fg pairs — exact pairings from v2 §7 "Status badge / tag" */ --ia-success-bg: #E4F4EC; --ia-success-fg: #186040; --ia-success-bd: #C0E0CE; --ia-info-bg: #E6F1FB; --ia-info-fg: #185FA5; --ia-info-bd: #C8DDF1; --ia-warn-bg: #FCEFD9; --ia-warn-fg: #92560F; --ia-warn-bd: #F2DDB1; --ia-danger-bg: #FEF2F2; --ia-danger-fg: #A32D2D; --ia-danger-bd: #F9CCCC; --ia-neutral-bg: #F0EDE8; --ia-neutral-fg: #6B6760; --ia-neutral-bd: #E0DDD6; /* ────────────────────────────────────────────────────────── 6. SPACING — base 4px (v2 §4 "Spacing system") ────────────────────────────────────────────────────────── */ --ia-space-1: 4px; /* icon-to-label gap, badge padding */ --ia-space-2: 8px; /* internal element gap */ --ia-space-3: 12px; /* field gap, list item gap */ --ia-space-4: 16px; /* card padding, section padding */ --ia-space-5: 20px; /* settings row h-padding */ --ia-space-6: 22px; /* screen edge padding (mobile) */ --ia-space-7: 24px; /* section-to-section gap */ --ia-space-8: 32px; /* major section break, desktop screen edge */ --ia-space-9: 40px; /* desktop section break */ --ia-space-10: 56px; /* desktop major section break */ /* ────────────────────────────────────────────────────────── 7. RADIUS (v2 §4 "Border radius") ────────────────────────────────────────────────────────── */ --ia-r-xs: 4px; /* status badges, tiny tags */ --ia-r-sm: 8px; /* small thumbnail cards, avatar containers */ --ia-r-md: 12px; /* form inputs */ --ia-r-lg: 14px; /* content cards (programs, articles), primary button */ --ia-r-xl: 20px; /* feed post cards, bottom tab bar top corners */ --ia-r-pill: 100px; /* pill selectors, search bar, chips */ --ia-r-circle: 50%; /* avatars, FAB, icon-action circles */ /* ────────────────────────────────────────────────────────── 8. ELEVATION (v2 §7 + extended for desktop) Mobile spec: primary btn 0 4px 18px rgba(26,26,26,.18) FAB 0 4px 14px rgba(0,0,0,.22) Desktop adds two softer levels for cards / popovers / modals. ────────────────────────────────────────────────────────── */ --ia-shadow-1: 0 1px 2px rgba(26, 26, 26, .04), 0 1px 1px rgba(26, 26, 26, .03); --ia-shadow-2: 0 4px 14px -4px rgba(26, 26, 26, .10), 0 1px 2px rgba(26, 26, 26, .04); --ia-shadow-3: 0 12px 32px -12px rgba(26, 26, 26, .18), 0 2px 4px rgba(26, 26, 26, .04); --ia-shadow-btn: 0 4px 18px rgba(26, 26, 26, .18); /* primary button */ --ia-shadow-fab: 0 4px 14px rgba(0, 0, 0, .22); /* ────────────────────────────────────────────────────────── 9. MOTION (v2 §8 "Interactive States") Mobile uses scale 0.97 / 80ms for press. We translate that to web hover/active feedback below. ────────────────────────────────────────────────────────── */ --ia-ease: cubic-bezier(.2, .8, .2, 1); --ia-press-scale: 0.97; --ia-press-dur: 80ms; --ia-active-opacity: 0.78; /* matches RN activeOpacity standard */ --ia-dur-1: 120ms; /* state changes, focus rings */ --ia-dur-2: 200ms; /* hover, button bg, row hover */ --ia-dur-3: 240ms; /* popovers, dropdowns */ --ia-dur-4: 320ms; /* modals, drawers */ /* ────────────────────────────────────────────────────────── 10. SKELETON / LOADING (v2 §8 "Loading states") ────────────────────────────────────────────────────────── */ --ia-skel-base: #F0EDE8; --ia-skel-shimmer: #E8E4DC; --ia-spinner: #1A1A1A; /* ────────────────────────────────────────────────────────── 11. TYPOGRAPHY — desktop-adapted scale Mobile sizes from v2 §2 are preserved as comments for cross-platform reference. Desktop bumps a notch where readability or hierarchy benefits from more presence on wide canvases. The TYPE FAMILY rules from v2 still apply absolutely — DM Serif Display is hero-only. ────────────────────────────────────────────────────────── */ --ia-font-sans: "DM Sans", system-ui, -apple-system, sans-serif; --ia-font-serif: "DM Serif Display", "DM Sans", serif; /* Hero — DM Serif Display (sparingly, screen-level moments only) */ --ia-fs-hero: 36px; /* mobile 30 → desktop 36 */ --ia-lh-hero: 1.14; --ia-fs-hero-2: 28px; /* mobile 26 → desktop 28 */ --ia-lh-hero-2: 1.20; /* DM Sans scale */ --ia-fs-display: 24px; /* mobile 22/700 group header → desktop 24 */ --ia-fw-display: 700; --ia-lh-display: 1.25; --ia-fs-h1: 20px; /* page H1 (sans bold variant) */ --ia-fw-h1: 700; --ia-lh-h1: 1.30; --ia-fs-h2: 18px; /* card / section title — mobile 17/600 → desktop 18 */ --ia-fw-h2: 600; --ia-lh-h2: 1.30; --ia-fs-h3: 15px; /* list-item primary, card title — same as mobile */ --ia-fw-h3: 600; --ia-lh-h3: 1.35; --ia-fs-body: 14px; /* body / caption / input value */ --ia-fw-body: 400; --ia-lh-body: 1.55; --ia-fs-body-sm: 13px; /* table cells, secondary lines */ --ia-fw-body-sm: 400; --ia-lh-body-sm: 1.50; --ia-fs-caption: 12px; /* timestamps, view counts, helper */ --ia-fw-caption: 400; --ia-lh-caption: 1.50; --ia-fs-eyebrow: 11px; /* uppercase section tags, KPI labels */ --ia-fw-eyebrow: 600; --ia-ls-eyebrow: .07em; --ia-fs-badge: 10px; /* status badge / tag — locked from mobile */ --ia-fw-badge: 500; /* ────────────────────────────────────────────────────────── 12. PORTAL-ONLY EXTENSIONS Patterns the mobile system doesn't define (no sidebar, no persistent topbar, no dense data tables). Kept here so the same warm DNA flows into them. ────────────────────────────────────────────────────────── */ /* Persistent dark sidebar (charcoal, matches ink) */ --ia-nav-bg: #1A1A1A; --ia-nav-bg-2: #232120; /* slight lift for headers / hovers */ --ia-nav-ink: #C4BEB8; /* idle nav item label */ --ia-nav-ink-active: #FFFFFF; --ia-nav-active-bg: rgba(255, 255, 255, .06); --ia-nav-active-bar: #FFFFFF; /* matches v2 active-tab indicator */ /* Topbar (white over pageBg) */ --ia-topbar-bg: #FFFFFF; --ia-topbar-border: #E8E4DC; --ia-topbar-h: 64px; /* tighter than mobile 80 — desktop convention */ /* Dark circle action button (v2 §9 "Chats Screen — Dark circle icon buttons") */ --ia-circle-btn-bg: #1A1A1A; --ia-circle-btn-fg: #FFFFFF; --ia-circle-btn-sz: 40px; } /* ============================================================ GLOBAL ELEMENT-LEVEL DEFAULTS Light-touch resets only — they don't paint anything that an un-redesigned page hasn't already painted via style.css. These declarations establish base typography + page bg for the OPT-IN .ia-page wrapper (used by redesigned screens). ============================================================ */ .ia-page { background: var(--ia-bg); color: var(--ia-ink); font-family: var(--ia-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01" on, "cv01" on; } /* DM Serif Display is the EDITORIAL voice — only on .ia-hero h1 or explicit .ia-serif. v2 forbids using it on repeating elements. */ .ia-serif { font-family: var(--ia-font-serif); font-weight: 400; letter-spacing: -.005em; }