/* Swiftener Platform — shared design tokens (light + dark) */ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;500&display=swap"); :root { color-scheme: light dark; --platform-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --platform-mono: "JetBrains Mono", ui-monospace, monospace; --platform-radius-sm: 0.5rem; --platform-radius: 0.75rem; --platform-radius-lg: 1rem; --platform-radius-full: 999px; --platform-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --platform-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.18); --platform-shadow-lg: 0 20px 40px -20px rgba(15, 23, 42, 0.25); --platform-accent: #0284c7; --platform-accent-hover: #0369a1; --platform-accent-soft: rgba(2, 132, 199, 0.12); --platform-bg: #f4f7fb; --platform-bg-elevated: #ffffff; --platform-surface: #ffffff; --platform-surface-muted: #f8fafc; --platform-border: #e2e8f0; --platform-text: #0f172a; --platform-text-muted: #64748b; --platform-text-subtle: #94a3b8; --platform-success: #059669; --platform-error: #dc2626; --platform-warning: #d97706; --platform-topbar-h: 3rem; --platform-content-max: 72rem; --platform-sidebar-w: 320px; --platform-focus: 0 0 0 3px var(--platform-accent-soft); --platform-transition: 0.18s ease; } :root[data-theme="dark"] { --platform-bg: #0b0d12; --platform-bg-elevated: #12151c; --platform-surface: #161a22; --platform-surface-muted: #1c212b; --platform-border: #2a3140; --platform-text: #e8eaef; --platform-text-muted: #94a3b8; --platform-text-subtle: #64748b; --platform-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --platform-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45); --platform-shadow-lg: 0 20px 40px -20px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --platform-bg: #0b0d12; --platform-bg-elevated: #12151c; --platform-surface: #161a22; --platform-surface-muted: #1c212b; --platform-border: #2a3140; --platform-text: #e8eaef; --platform-text-muted: #94a3b8; --platform-text-subtle: #64748b; } } /* Map legacy project variables to platform tokens */ :root { --bg: var(--platform-bg); --surface: var(--platform-surface); --surface-2: var(--platform-surface-muted); --surface-muted: var(--platform-surface-muted); --border: var(--platform-border); --text: var(--platform-text); --text-muted: var(--platform-text-muted); --muted: var(--platform-text-muted); --accent: var(--platform-accent); --accent-hover: var(--platform-accent-hover); --radius: var(--platform-radius); --font-sans: var(--platform-font); --color-bg: var(--platform-bg); --color-surface: var(--platform-surface); --color-border: var(--platform-border); --color-text: var(--platform-text); --color-muted: var(--platform-text-muted); --color-brand: var(--platform-accent); } /* Suite accent overrides via data-platform-accent on */ :root[data-platform-accent="rose"] { --platform-accent: #e11d48; --platform-accent-hover: #be123c; --platform-accent-soft: rgba(225, 29, 72, 0.14); } :root[data-platform-accent="emerald"] { --platform-accent: #059669; --platform-accent-hover: #047857; --platform-accent-soft: rgba(5, 150, 105, 0.14); } :root[data-platform-accent="orange"] { --platform-accent: #ea580c; --platform-accent-hover: #c2410c; --platform-accent-soft: rgba(234, 88, 12, 0.14); } :root[data-platform-accent="sky"] { --platform-accent: #0284c7; --platform-accent-hover: #0369a1; --platform-accent-soft: rgba(2, 132, 199, 0.14); } :root[data-platform-accent="purple"] { --platform-accent: #9333ea; --platform-accent-hover: #7e22ce; --platform-accent-soft: rgba(147, 51, 234, 0.14); } :root[data-platform-accent="blue"] { --platform-accent: #2563eb; --platform-accent-hover: #1d4ed8; --platform-accent-soft: rgba(37, 99, 235, 0.14); } :root[data-platform-accent="teal"] { --platform-accent: #0d9488; --platform-accent-hover: #0f766e; --platform-accent-soft: rgba(13, 148, 136, 0.14); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body.platform-body { margin: 0; min-height: 100vh; font-family: var(--platform-font); background: var(--platform-bg); color: var(--platform-text); line-height: 1.6; -webkit-font-smoothing: antialiased; } body.platform-body.has-platform-topbar { padding-top: var(--platform-topbar-h); } .platform-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 0.75rem 1rem; background: var(--platform-accent); color: #fff; text-decoration: none; border-radius: var(--platform-radius-sm); } .platform-skip-link:focus { left: 1rem; top: 1rem; }