/* ============================================================ Webnet design tokens — LINEAR dark-SaaS identity (worldclass.md) Canvas #08090a (never #000), warm-white #f7f8f8, 4-step gray ladder, hairline rings, glass cards — brand accent #BA006F. Raycast glow techniques for accent moments. DARK IS THE BRAND DEFAULT. Light remains a full first-class theme via html[data-theme="light"] (manual choice) or the prefers-color-scheme: light fallback. theme.js manages it. ============================================================ */ :root { color-scheme: dark; /* --- Linear gray ladder --- */ --gray-1000: #f7f8f8; /* text (warm white, never #fff) */ --gray-700: #b4bcd0; /* body */ --gray-500: #8a8f98; /* muted / labels */ --gray-300: #2a2b31; /* strong hairline */ --gray-100: #141516; /* tinted panels */ --panel: #0f1011; /* Linear bg-panel */ --bg: #08090a; /* Linear bg — canvas is never #000 */ --wash: #1c1c1f; /* hover fill (Linear bg-secondary) */ /* --- hairline separators --- */ --line: rgba(255, 255, 255, .08); /* --- semantic --- */ --ok: #3ecf8e; --err: #f87171; --grid-line: rgba(255, 255, 255, .04); --bloom: rgba(255, 255, 255, .04); --hover-wash: rgba(255, 255, 255, .05); --bar-bg: rgba(14, 15, 18, .9); --bar-shadow: 0 10px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); /* --- accent (brand magenta) --- */ --accent: #BA006F; --accent-hover: #e6198f; --accent-press: #d40781; --accent-tint: rgba(186, 0, 111, .16); --glow-accent: 0 0 24px rgba(186, 0, 111, .35), 0 0 64px rgba(186, 0, 111, .18); /* --- rings (hairlines never shift layout) --- */ --ring: 0 0 0 1px rgba(255, 255, 255, .08); --ring-strong: 0 0 0 1px rgba(255, 255, 255, .22); /* --- cards: glass over the canvas --- */ --card-bg: rgba(255, 255, 255, .04); --card-bg-hover: rgba(255, 255, 255, .06); --shadow-card: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 32px rgba(0, 0, 0, .35); /* --- buttons: white primary, glass secondary (Linear CTA recipe) --- */ --btn1-bg: #e5e5e6; --btn1-fg: #08090a; --btn2-bg: rgba(255, 255, 255, .05); --btn2-ring: inset 0 0 0 1px rgba(255, 255, 255, .12); /* --- chrome --- */ --footer-bg: #0a0b0d; --pill-bg: rgba(255, 255, 255, .04); --pill-ring: 0 0 0 1px rgba(255, 255, 255, .1), 0 12px 32px rgba(0, 0, 0, .4); /* --- dark surfaces that stay dark in BOTH themes --- */ --surface-ink: #171717; --surface-ink-2: #111217; /* --- radii --- */ --r-sm: 6px; --r-md: 12px; --r-lg: 16px; --r-pill: 9999px; /* --- the one motion contract --- */ --ease: cubic-bezier(.4, 0, .2, 1); --dur: 150ms; /* --- type --- */ --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* --- layout --- */ --container: 1120px; --gutter: 24px; --section: clamp(72px, 10vw, 128px); /* --- device layer --- */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --mobilenav-h: 66px; --nav-space: calc(var(--mobilenav-h) + 32px + var(--safe-b)); /* --- header --- */ --header-h: 64px; --header-glass: rgba(8, 9, 10, .72); } /* ---- light theme: explicit choice ---- */ :root[data-theme="light"] { color-scheme: light; --gray-1000: #171717; --gray-700: #4d4d4d; --gray-500: #737373; --gray-300: #d4d4d4; --gray-100: #fafafa; --panel: #fafafa; --bg: #ffffff; --wash: #f2f2f2; --line: rgba(0, 0, 0, .07); --ok: #157347; --err: #c01818; --grid-line: rgba(0, 0, 0, .045); --bloom: rgba(0, 0, 0, .03); --hover-wash: rgba(0, 0, 0, .05); --bar-bg: rgba(255, 255, 255, .92); --bar-shadow: 0 10px 34px rgba(23, 23, 23, .16), 0 0 0 1px rgba(0, 0, 0, .06); --accent-tint: rgba(186, 0, 111, .08); --glow-accent: 0 0 20px rgba(186, 0, 111, .22); --ring: 0 0 0 1px rgba(0, 0, 0, .08); --ring-strong: 0 0 0 1px #2e2e2e; --shadow-card: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 2px rgba(0, 0, 0, .04), 0 0 0 1px #fafafa; --card-bg: #ffffff; --card-bg-hover: #ffffff; --btn1-bg: #171717; --btn1-fg: #ffffff; --btn2-bg: #ffffff; --btn2-ring: inset 0 0 0 1px #2e2e2e; --footer-bg: #fafafa; --pill-bg: #ffffff; --pill-ring: 0 0 0 1px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .06); --header-glass: rgba(255, 255, 255, .72); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --gray-1000: #171717; --gray-700: #4d4d4d; --gray-500: #737373; --gray-300: #d4d4d4; --gray-100: #fafafa; --panel: #fafafa; --bg: #ffffff; --wash: #f2f2f2; --line: rgba(0, 0, 0, .07); --ok: #157347; --err: #c01818; --grid-line: rgba(0, 0, 0, .045); --bloom: rgba(0, 0, 0, .03); --hover-wash: rgba(0, 0, 0, .05); --bar-bg: rgba(255, 255, 255, .92); --bar-shadow: 0 10px 34px rgba(23, 23, 23, .16), 0 0 0 1px rgba(0, 0, 0, .06); --accent-tint: rgba(186, 0, 111, .08); --glow-accent: 0 0 20px rgba(186, 0, 111, .22); --ring: 0 0 0 1px rgba(0, 0, 0, .08); --ring-strong: 0 0 0 1px #2e2e2e; --shadow-card: 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 2px rgba(0, 0, 0, .04), 0 0 0 1px #fafafa; --card-bg: #ffffff; --card-bg-hover: #ffffff; --btn1-bg: #171717; --btn1-fg: #ffffff; --btn2-bg: #ffffff; --btn2-ring: inset 0 0 0 1px #2e2e2e; --footer-bg: #fafafa; --pill-bg: #ffffff; --pill-ring: 0 0 0 1px rgba(0, 0, 0, .08), 0 12px 32px rgba(0, 0, 0, .06); --header-glass: rgba(255, 255, 255, .72); } } /* --- forced contrast --- */ @media (prefers-contrast: more) { :root { --gray-500: var(--gray-700); --line: rgba(255, 255, 255, .2); --ring: 0 0 0 1px rgba(255, 255, 255, .26); } :root[data-theme="light"] { --gray-500: var(--gray-700); --line: rgba(0, 0, 0, .18); --ring: 0 0 0 1px rgba(0, 0, 0, .22); } }