/* ============================================================ ChurnShield — Design Tokens ------------------------------------------------------------ Dark-mode "recovery green" system: deep navy canvas, vibrant green accent. Sourced from the design handoff bundle (design_handoff_churnshield_redesign/tokens/colors_and_type.css). COMPAT LAYER at the bottom maps the legacy --color-* / --bg-* / --text-* names used by base.css / components.css / landing.css to the new semantic tokens, so existing CSS keeps rendering under the new visual. ============================================================ */ /* --- Webfonts ------------------------------------------------ */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=JetBrains+Mono:wght@400;500;600&display=swap"); :root { color-scheme: dark; /* ── Color — deep navy canvas ──────────────────── */ --ink-950: #07101A; /* page bg */ --ink-925: #0A1620; /* deeper sunken */ --ink-900: #0E1B26; /* surface (cards) */ --ink-850: #122230; /* surface-alt */ --ink-800: #18293A; /* hover surface */ --ink-700: #233447; /* border-strong */ --ink-600: #2E4358; /* border */ --ink-500: #4A6075; /* tertiary text */ --ink-400: #6E8499; /* secondary text */ --ink-300: #9AAEC0; /* muted text */ --ink-200: #C4D2DE; --ink-100: #DFE7EE; --ink-50: #F1F5F9; /* primary text */ /* ── Color — recovery green (sole brand accent) ── */ --green-50: #E5FBEC; --green-100: #BFF4D2; --green-200: #7DE5A8; --green-300: #4ED888; /* hover */ --green-400: #3FB872; /* PRIMARY ACCENT */ --green-500: #2F9E5F; /* pressed */ --green-600: #237A48; --green-700: #1A5934; --green-800: #0F3D24; --green-900: #082516; /* Teal aliases for older code that pre-dated the green ramp */ --teal-50: var(--green-50); --teal-100: var(--green-100); --teal-200: var(--green-200); --teal-300: var(--green-300); --teal-400: var(--green-400); --teal-500: var(--green-500); --teal-600: var(--green-600); --teal-700: var(--green-700); --teal-800: var(--green-800); --teal-900: var(--green-900); --brand-teal-deep: #0E4C5B; --brand-teal: #178496; --brand-green: #3FB872; --brand-green-lt: #7BD68A; /* Amber + cream — older legacy aliases */ --amber-50: var(--green-900); --amber-100: var(--green-800); --amber-200: var(--green-700); --amber-400: var(--green-400); --amber-500: var(--green-500); --amber-600: var(--green-400); --amber-700: var(--green-300); --cream-50: var(--ink-950); --cream-100: var(--ink-925); --cream-200: var(--ink-700); --cream-300: var(--ink-600); --cream-400: var(--ink-500); /* ── Status ─────────────────────────────────────── */ --success-50: #0E2A1B; --success-100: #103A24; --success-500: #3FB872; --success-600: #5BD08C; --warn-50: #2B1F08; --warn-100: #3B2A0A; --warn-500: #E6B546; /* saffron — distinct from brand */ --warn-600: #F2C868; --danger-50: #2A1115; --danger-100: #3A1820; --danger-500: #E5556C; --danger-600: #F47286; --info-50: #08231A; --info-100: #0E3324; --info-500: var(--green-400); --info-600: var(--green-300); /* ── Semantic tokens ────────────────────────────── */ --bg: var(--ink-950); --bg-subtle: var(--ink-925); --bg-sunken: #050B12; --surface: var(--ink-900); --surface-alt: var(--ink-850); --surface-hi: var(--ink-800); --fg: var(--ink-50); --fg-strong: #FFFFFF; --fg-muted: var(--ink-300); --fg-subtle: var(--ink-400); --fg-on-accent: #04161A; --border: var(--ink-700); --border-subtle: var(--ink-800); --border-strong: var(--ink-600); --border-focus: var(--green-400); --accent: var(--green-400); --accent-strong: var(--green-300); --accent-hover: var(--green-300); --accent-pressed: var(--green-500); --accent-subtle: var(--green-800); --accent-fg: var(--green-100); --recovery: var(--green-400); --recovery-hover: var(--green-300); --recovery-subtle: var(--success-100); --recovery-fg: var(--green-100); /* ── Type ───────────────────────────────────────── */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace; --font: var(--font-sans); /* New px-based scale (handoff spec) */ --fs-xs: 12px; --lh-xs: 1.5; --fs-sm: 13px; --lh-sm: 1.55; --fs-base: 15px; --lh-base: 1.6; --fs-md: 17px; --lh-md: 1.55; --fs-lg: 21px; --lh-lg: 1.4; --fs-xl: 28px; --lh-xl: 1.25; --fs-2xl: 36px; --lh-2xl: 1.18; --fs-3xl: 48px; --lh-3xl: 1.1; --fs-4xl: 64px; --lh-4xl: 1.05; --fs-5xl: 80px; --lh-5xl: 1.0; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.14em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Spacing — 4px base ─────────────────────────── */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ── Radius ─────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; /* ── Shadow — dark-mode depth ───────────────────── */ --shadow-xs: 0 1px 0 0 rgba(255,255,255,0.02) inset; --shadow-sm: 0 1px 0 0 rgba(255,255,255,0.03) inset, 0 2px 4px 0 rgba(0,0,0,0.35); --shadow-md: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 8px 24px -8px rgba(0,0,0,0.55), 0 2px 6px -2px rgba(0,0,0,0.4); --shadow-lg: 0 1px 0 0 rgba(255,255,255,0.05) inset, 0 24px 56px -16px rgba(0,0,0,0.7), 0 6px 16px -6px rgba(0,0,0,0.45); --shadow-xl: 0 1px 0 0 rgba(255,255,255,0.06) inset, 0 40px 80px -24px rgba(0,0,0,0.8), 0 12px 28px -10px rgba(0,0,0,0.55); --shadow-focus: 0 0 0 3px rgba(63, 184, 114, 0.35); --shadow-glow-teal: 0 0 0 1px rgba(63, 184, 114, 0.25), 0 8px 32px -8px rgba(63, 184, 114, 0.45); --shadow-glow-green: 0 0 0 1px rgba(63, 184, 114, 0.25), 0 8px 32px -8px rgba(63, 184, 114, 0.45); --shadow-glow: var(--shadow-glow-green); --shadow-inset: inset 0 1px 2px 0 rgba(0,0,0,0.4); /* ── Motion ─────────────────────────────────────── */ --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ── Layout ─────────────────────────────────────── */ --container-sm: 640px; --container-md: 768px; --container-lg: 1040px; --container-xl: 1200px; --max-width: 1200px; --max-width-prose: 68ch; --max-width-wide: 1440px; --nav-height: 72px; --section-gap: var(--space-20); /* ── Z-layer ────────────────────────────────────── */ --z-base: 1; --z-raised: 10; --z-nav: 100; --z-overlay: 500; --z-modal: 1000; --z-toast: 2000; /* ============================================================ COMPAT LAYER — legacy --color-*, --bg-*, --text-* names used by base.css / components.css / landing.css mapped onto the new semantic tokens. NEW code should use the names above. ============================================================ */ --color-bg: var(--bg); --color-surface-1: var(--bg-subtle); --color-surface-2: var(--surface); --color-surface-3: var(--surface-alt); --color-border-subtle: var(--border-subtle); --color-border: var(--border); --color-border-strong: var(--border-strong); --color-text: var(--fg); --color-text-muted: var(--fg-muted); --color-text-dim: var(--fg-subtle); --color-accent: var(--accent); --color-accent-hover: var(--accent-hover); --color-accent-soft: rgba(63, 184, 114, 0.12); --color-accent-ring: rgba(63, 184, 114, 0.30); --color-success: var(--success-500); --color-success-soft: rgba(63, 184, 114, 0.12); --color-warning: var(--warn-500); --color-warning-soft: rgba(230, 181, 70, 0.12); --color-danger: var(--danger-500); --color-danger-soft: rgba(229, 85, 108, 0.12); --color-info: var(--info-500); --color-info-soft: rgba(63, 184, 114, 0.12); /* Older aliases */ --bg-body: var(--bg); --bg-tile: var(--surface); --bg-tile-hover: var(--surface-alt); --border-tile: var(--border-subtle); --border-tile-hover: var(--border); --accent-glow: rgba(63, 184, 114, 0.15); --accent-glow-strong: rgba(63, 184, 114, 0.25); --text-primary: var(--fg); --text-secondary: var(--fg-muted); --text-muted: var(--fg-subtle); /* Legacy app-CSS aliases (dashboard / settings / update-payment / referral were authored before the token system landed and used these short names. Mapped here so those stylesheets can drop their local :root re-declarations without a thousand find-replaces. New code should prefer the canonical tokens above.) */ --surface-2: var(--surface-alt); --text: var(--fg); --text-dim: var(--fg-muted); --green: var(--accent); --red: var(--danger-500); --orange: var(--warn-500); /* The dashboard used to use --blue as a fourth stoplight color. It now resolves to muted neutral so legacy references keep working but the dashboard reads as recovery-green-only — the brand color used across the marketing site. */ --blue: var(--fg-muted); --accent-soft: var(--color-accent-soft); --accent-hover: var(--accent-hover); /* rem-based type-scale aliases (used by components.css / landing.css) */ --text-xs: 0.75rem; --leading-xs: 1.33; --text-sm: 0.875rem; --leading-sm: 1.43; --text-base: 1rem; --leading-base: 1.6; --text-lg: 1.125rem; --leading-lg: 1.55; --text-xl: 1.25rem; --leading-xl: 1.5; --text-2xl: 1.5rem; --leading-2xl: 1.4; --text-3xl: 1.875rem; --leading-3xl: 1.25; --text-4xl: 2.25rem; --leading-4xl: 1.15; --text-5xl: 3rem; --leading-5xl: 1.08; --text-6xl: 3.75rem; --leading-6xl: 1.02; --text-7xl: 4.5rem; --leading-7xl: 1.0; --tracking-tighter: -0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.14em; --weight-black: 800; /* Card / radius legacy */ --radius-2xl: 28px; --card-radius: var(--radius-lg); --card-padding: var(--space-8); --card-gap: var(--space-4); --card-border: 1px solid var(--border-subtle); --card-bg: var(--surface); /* Focus rings */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); --focus-ring-soft: 0 0 0 2px var(--bg), 0 0 0 4px var(--color-accent-ring); } /* ============================================================ BASE ============================================================ */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); } ::selection { background: rgba(63, 184, 114, 0.30); color: var(--fg-strong); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } /* Subtle aurora wash for hero containers */ .bg-aurora { background: radial-gradient(60% 60% at 12% 0%, rgba(63,184,114,0.18) 0%, transparent 60%), radial-gradient(50% 50% at 95% 18%, rgba(78,216,136,0.12) 0%, transparent 65%), var(--bg); }