/** * SayMore Design System — light theme. * * Extracted from the design bundle at .design-bundle/saymore/project/ * (SayMore Design System.html + components/shared.jsx). This is the * single source of truth for all redesigned pages on app.saymore.ai * and the landing page at saymore.ai. * * Usage: any page in the redesign links this file in and then * extends with page-specific rules using the tokens below. * * Legacy dark-theme tokens previously lived here; they've been inlined * into longform-preview.html while that page awaits its Phase 4 * restyle. Nothing else references the old palette. */ :root { /* ── Color · surfaces ──────────────────────────────────── */ --sm-bg: #FAFAF7; /* cream page bg */ --sm-bg-deep: #F5F5F0; /* subtle recess / active-nav tint */ --sm-surface: #FFFFFF; /* cards, inputs */ --sm-surface-hover: #F5F5F0; /* ── Color · borders ──────────────────────────────────── */ --sm-border: rgba(10, 10, 11, 0.08); --sm-border-strong: rgba(10, 10, 11, 0.14); --sm-border-accent: rgba(124, 58, 237, 0.35); /* ── Color · ink (text) ──────────────────────────────── */ --sm-text: #0A0A0B; --sm-text-2: rgba(10, 10, 11, 0.65); --sm-text-3: rgba(10, 10, 11, 0.45); --sm-text-4: rgba(10, 10, 11, 0.28); /* ── Color · accents ─────────────────────────────────── */ --sm-purple: #7C3AED; --sm-purple-lt: #A855F7; --sm-pink: #EC4899; --sm-gradient: linear-gradient(135deg, #A855F7 0%, #EC4899 100%); --sm-success: #10B981; --sm-success-bg: rgba(16, 185, 129, 0.12); --sm-danger: #DC2626; --sm-danger-bg: rgba(220, 38, 38, 0.08); /* ── Elevation ───────────────────────────────────────── */ --sm-shadow-xs: 0 1px 2px rgba(10, 10, 11, 0.04); --sm-shadow-sm: 0 4px 12px rgba(10, 10, 11, 0.06); --sm-shadow-md: 0 8px 24px rgba(10, 10, 11, 0.06); --sm-shadow-lg: 0 12px 40px rgba(10, 10, 11, 0.08); --sm-shadow-cta: 0 4px 14px rgba(168, 85, 247, 0.25); --sm-shadow-cta-strong: 0 10px 28px rgba(168, 85, 247, 0.3); /* ── Radius ──────────────────────────────────────────── */ --sm-radius-sm: 6px; --sm-radius-md: 8px; --sm-radius-lg: 10px; --sm-radius-xl: 12px; --sm-radius-2xl: 16px; --sm-radius-pill: 100px; /* ── Spacing scale (4px base) ────────────────────────── */ --sm-space-1: 4px; --sm-space-2: 8px; --sm-space-3: 12px; --sm-space-4: 16px; --sm-space-5: 20px; --sm-space-6: 24px; --sm-space-8: 32px; --sm-space-10: 40px; --sm-space-12: 48px; --sm-space-16: 64px; /* ── Typography ──────────────────────────────────────── */ --sm-font-sans: 'Inter', -apple-system, system-ui, sans-serif; --sm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Display scale */ --sm-size-hero: clamp(48px, 6vw, 78px); --sm-size-h1: 38px; --sm-size-h2: 24px; --sm-size-h3: 18px; --sm-size-body: 14px; --sm-size-body-lg: 15px; --sm-size-caption: 12px; --sm-size-kicker: 10px; --sm-weight-regular: 400; --sm-weight-medium: 500; --sm-weight-semibold: 600; --sm-weight-bold: 700; --sm-weight-extra: 800; --sm-weight-black: 900; --sm-tracking-tight: -0.035em; --sm-tracking-snug: -0.02em; --sm-tracking-normal: -0.01em; --sm-tracking-wide: 0.08em; --sm-tracking-wider: 0.14em; --sm-tracking-widest: 0.18em; /* ── Layout ──────────────────────────────────────────── */ --sm-sidebar-w: 240px; --sm-content-max: 1100px; --sm-content-narrow: 980px; } /* ── Base reset + body defaults ────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--sm-bg); color: var(--sm-text); font-family: var(--sm-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; } /* ── Shared primitives ─────────────────────────────────── */ /* Purple → pink gradient text */ .sm-gradient-text { background: var(--sm-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Kicker — mono eyebrow used above almost every heading */ .sm-kicker { font-family: var(--sm-font-mono); font-size: var(--sm-size-kicker); font-weight: var(--sm-weight-semibold); text-transform: uppercase; letter-spacing: var(--sm-tracking-widest); color: var(--sm-text-3); } /* Gradient kicker pill — purple bg + dot, used on PageHeader */ .sm-kicker-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; background: rgba(124, 58, 237, 0.08); border: 1px solid rgba(124, 58, 237, 0.2); border-radius: var(--sm-radius-pill); font-family: var(--sm-font-mono); font-size: var(--sm-size-kicker); font-weight: var(--sm-weight-semibold); text-transform: uppercase; letter-spacing: var(--sm-tracking-widest); color: var(--sm-purple); } .sm-kicker-pill::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--sm-success); box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); } /* Page title (h1 in workflow pages) */ .sm-page-title { font-size: var(--sm-size-h1); line-height: 1; letter-spacing: var(--sm-tracking-tight); font-weight: var(--sm-weight-extra); color: var(--sm-text); margin: 0; } /* Hero title (landing page) */ .sm-hero-title { font-size: var(--sm-size-hero); line-height: 0.95; letter-spacing: -0.05em; font-weight: var(--sm-weight-black); margin: 0; } /* Card primitive */ .sm-card { background: var(--sm-surface); border: 1px solid var(--sm-border); border-radius: var(--sm-radius-xl); box-shadow: var(--sm-shadow-xs); } /* Button */ .sm-btn { font-family: var(--sm-font-sans); font-size: var(--sm-size-body); font-weight: var(--sm-weight-bold); letter-spacing: var(--sm-tracking-normal); border: none; border-radius: var(--sm-radius-lg); padding: 10px 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .sm-btn-sm { font-size: var(--sm-size-caption); padding: 7px 12px; border-radius: var(--sm-radius-md); } .sm-btn-lg { font-size: var(--sm-size-body-lg); padding: 14px 24px; border-radius: var(--sm-radius-xl); } .sm-btn-primary { background: var(--sm-gradient); color: #fff; box-shadow: var(--sm-shadow-cta); } .sm-btn-primary:hover:not(:disabled) { box-shadow: var(--sm-shadow-cta-strong); transform: translateY(-1px); } .sm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .sm-btn-ghost { background: var(--sm-surface); color: var(--sm-text); border: 1px solid var(--sm-border); box-shadow: var(--sm-shadow-xs); } .sm-btn-ghost:hover:not(:disabled) { background: var(--sm-surface-hover); } .sm-btn-dark { background: var(--sm-text); color: #fff; } .sm-btn-dark:hover:not(:disabled) { transform: translateY(-1px); } .sm-btn-link { background: transparent; color: var(--sm-purple); padding: 0; } /* Spinner */ .sm-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(124, 58, 237, 0.25); border-top-color: var(--sm-purple); border-radius: 50%; animation: sm-spin 0.7s linear infinite; vertical-align: -2px; } @keyframes sm-spin { to { transform: rotate(360deg); } } /* Mono input font utility (URL inputs, codes) */ .sm-mono { font-family: var(--sm-font-mono); }