/* ============================================================ Atlas Design Tokens — single source of truth for the new foundation. Light is the default; dark cascades via [data-theme="dark"] on . Names use the --f-* prefix to guarantee zero overlap with the legacy unprefixed vars in common.css / theme.css / app.html. Migrate one component at a time; nothing here changes the legacy system. Mirrors: - memory/branding/general_color_use.md (canonical palette) - memory/branding/general_dos_and_donts.md (typography trio) ============================================================ */ :root { /* -------- Color: surfaces -------- */ --f-bg: #f4f6f9; /* Paper — default light page */ --f-bg-raised: #ffffff; /* Cards, raised panels */ --f-bg-sunken: #eef0f3; /* Sunken inputs, soft chrome */ --f-bg-hover: #ebecef; /* Hover fills on raised */ --f-bg-active: #e3e6eb; /* Pressed / active fills */ --f-bg-inverse: #0a0a0a; /* For inverted chips/badges on light */ /* -------- Color: text (ink) -------- */ --f-ink: #111827; --f-ink-soft: #525866; --f-ink-muted: #9ca3af; --f-ink-disabled: #c0c4cc; --f-ink-inverse: #ffffff; --f-ink-on-accent: #ffffff; /* -------- Color: borders -------- */ --f-border: #d4d4d8; --f-border-soft: #eef0f3; --f-border-strong: #9ca3af; --f-border-focus: #00b0f1; /* -------- Color: accent (Atlas Blue) -------- */ --f-accent: #00b0f1; --f-accent-hover: #009ad3; --f-accent-soft: rgba(0, 176, 241, 0.10); --f-accent-strong: #0085ba; --f-accent-on: #ffffff; /* -------- Color: tiers (post-rename: Premium→Gold, Ultra→Diamond) -------- */ --f-tier-gold: #d4a017; --f-tier-gold-soft: rgba(212, 160, 23, 0.12); --f-tier-gold-on: #ffffff; --f-tier-diamond: #00b0f1; /* alias of --f-accent post-rename */ --f-tier-diamond-soft: rgba(0, 176, 241, 0.12); --f-tier-diamond-on: #ffffff; /* -------- Color: semantic -------- */ --f-success: #22c55e; --f-success-soft: rgba(34, 197, 94, 0.12); --f-success-strong: #16a34a; --f-success-on: #ffffff; --f-error: #ef4444; --f-error-soft: rgba(239, 68, 68, 0.12); --f-error-strong: #dc2626; --f-error-on: #ffffff; --f-warning: #ffd93d; --f-warning-soft: rgba(255, 217, 61, 0.18); --f-warning-strong: #d97706; --f-warning-on: #111827; --f-like: #ff6b6b; /* hearts/reactions only — not generic error */ /* -------- Color: scrim (overlay backdrop) -------- */ --f-scrim: rgba(15, 23, 42, 0.40); --f-scrim-soft: rgba(15, 23, 42, 0.20); --f-scrim-strong: rgba(15, 23, 42, 0.60); /* -------- Spacing — 4px grid -------- */ --f-space-0: 0; --f-space-1: 4px; --f-space-2: 8px; --f-space-3: 12px; --f-space-4: 16px; --f-space-5: 20px; --f-space-6: 24px; --f-space-8: 32px; --f-space-10: 40px; --f-space-12: 48px; --f-space-16: 64px; --f-space-20: 80px; --f-space-24: 96px; /* -------- Border radius -------- */ --f-radius-xs: 4px; --f-radius-sm: 8px; --f-radius-md: 12px; --f-radius-lg: 16px; --f-radius-xl: 24px; --f-radius-2xl: 32px; --f-radius-pill: 9999px; /* -------- Typography: families -------- */ --f-font-display: 'Mona Sans', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --f-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --f-font-wordmark: 'Druk Wide', 'Mona Sans', sans-serif; /* wordmark only — see brand memory */ --f-font-mono: ui-monospace, SFMono-Regular, 'Menlo', 'Consolas', monospace; /* -------- Typography: size scale -------- */ --f-fs-xs: 12px; --f-fs-sm: 14px; --f-fs-md: 16px; --f-fs-lg: 18px; --f-fs-xl: 20px; --f-fs-2xl: 24px; --f-fs-3xl: 32px; --f-fs-4xl: 40px; --f-fs-5xl: 56px; --f-fs-6xl: 72px; /* -------- Typography: line height -------- */ --f-lh-tight: 1.15; --f-lh-snug: 1.30; --f-lh-normal: 1.50; --f-lh-relaxed: 1.70; /* -------- Typography: weight -------- */ --f-fw-regular: 400; --f-fw-medium: 500; --f-fw-semibold: 600; --f-fw-bold: 700; /* -------- Typography: letter spacing -------- */ --f-ls-tight: -0.02em; --f-ls-normal: 0; --f-ls-wide: 0.04em; --f-ls-wider: 0.08em; /* -------- Shadows / elevation — light mode -------- */ --f-shadow-0: none; --f-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06); --f-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08); --f-shadow-3: 0 8px 24px rgba(15, 23, 42, 0.10); --f-shadow-4: 0 24px 60px rgba(15, 23, 42, 0.18); --f-shadow-focus: 0 0 0 3px rgba(0, 176, 241, 0.25); --f-shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.25); /* -------- Z-index ladder — single source -------- */ --f-z-base: 0; --f-z-raised: 10; --f-z-sticky: 100; --f-z-header: 200; --f-z-overlay: 1000; /* overlay scrim baseline */ --f-z-dropdown: 1100; --f-z-popover: 1150; --f-z-modal: 1200; --f-z-sheet: 1200; --f-z-drawer: 1200; --f-z-toast: 1300; --f-z-popup: 1300; --f-z-tooltip: 1400; --f-z-pwa-safe: 99999; /* -------- Breakpoints — values for JS reads. @media literals must mirror these (CSS doesn't allow vars in @media). -------- */ --f-bp-sm: 480px; --f-bp-md: 768px; --f-bp-lg: 1024px; --f-bp-xl: 1280px; --f-bp-2xl: 1536px; /* -------- Motion: durations -------- */ --f-dur-instant: 0ms; --f-dur-fast: 120ms; --f-dur-base: 180ms; --f-dur-slow: 260ms; --f-dur-slower: 400ms; /* -------- Motion: easings -------- */ --f-ease-linear: linear; --f-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --f-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --f-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --f-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* -------- Layout primitives -------- */ --f-content-max: 1200px; --f-prose-max: 720px; --f-sidebar-w: 240px; --f-header-h: 70px; --f-mobile-nav-h: 64px; /* -------- Backdrop blur — for glass surfaces -------- */ --f-blur-soft: blur(8px); --f-blur: blur(16px); --f-blur-strong: blur(24px); } /* ============================================================ Dark mode overrides — applied when . The same --f-* variable names; only the values change. ============================================================ */ [data-theme="dark"] { /* surfaces */ --f-bg: #0a0a0a; /* Stage */ --f-bg-raised: #141414; /* Card */ --f-bg-sunken: #1a1a1a; /* Surface */ --f-bg-hover: #2a2a2a; --f-bg-active: #3a3a3a; --f-bg-inverse: #f4f6f9; /* ink */ --f-ink: #ffffff; --f-ink-soft: #a1a1aa; --f-ink-muted: #71717a; --f-ink-disabled: #52525b; --f-ink-inverse: #111827; --f-ink-on-accent: #ffffff; /* borders */ --f-border: #2a2a2a; --f-border-soft: #1f1f1f; --f-border-strong: #3a3a3a; --f-border-focus: #00b0f1; /* accent — same brand, slightly stronger soft tint on dark */ --f-accent-soft: rgba(0, 176, 241, 0.16); /* tiers — stronger soft tint on dark */ --f-tier-gold-soft: rgba(212, 160, 23, 0.18); --f-tier-diamond-soft: rgba(0, 176, 241, 0.18); /* semantic — stronger soft tints on dark */ --f-success-soft: rgba(34, 197, 94, 0.18); --f-error-soft: rgba(239, 68, 68, 0.18); --f-warning-soft: rgba(255, 217, 61, 0.22); /* scrim — heavier on dark */ --f-scrim: rgba(0, 0, 0, 0.55); --f-scrim-soft: rgba(0, 0, 0, 0.35); --f-scrim-strong: rgba(0, 0, 0, 0.75); /* shadows — recalibrated for dark backgrounds */ --f-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30); --f-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.35); --f-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.45); --f-shadow-4: 0 24px 60px rgba(0, 0, 0, 0.60); --f-shadow-focus: 0 0 0 3px rgba(0, 176, 241, 0.35); --f-shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.35); }