/* ========================================================================= SEQUEL Knowledge Base — design tokens + base + components Theming is driven by attributes on ========================================================================= */ :root { /* brand — overridden by [data-accent]; default = SEQUEL azure */ --brand: #0085d1; --brand-2: #2ba6e8; --accent: #a9d8f3; /* neutrals (cool) — light theme defaults */ --bg: #ffffff; --surface: #f1f7fc; --panel: #ffffff; --panel-2: #f4f8fb; --text: #0e1b27; --text-muted: #4a5a68; --text-faint: #7c8b98; --border: #e3eaf1; --border-strong: #cfdae3; --code-bg: #0d1825; --code-text: #e8eef4; --shadow-color: 210deg 38% 32%; --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .07); --shadow-md: 0 4px 14px -4px hsl(var(--shadow-color) / .14), 0 2px 5px -3px hsl(var(--shadow-color) / .10); --shadow-lg: 0 18px 48px -16px hsl(var(--shadow-color) / .26), 0 6px 16px -8px hsl(var(--shadow-color) / .14); /* derived brand tints — adapt to theme via var(--bg) */ --brand-ink: color-mix(in oklab, var(--brand), black 16%); --brand-soft: color-mix(in oklab, var(--brand), var(--bg) 90%); --brand-soft-2: color-mix(in oklab, var(--brand), var(--bg) 82%); --brand-line: color-mix(in oklab, var(--brand), var(--border) 55%); --on-brand: #ffffff; /* status hues (no orange) */ --green: #15a34a; --amber: #9c8400; --red: #e11d48; --blue: #2563eb; /* density — overridden by [data-density] */ --base-size: 15.5px; --card-pad: 20px; --gap: 16px; --sec-py: 76px; --radius: 14px; --radius-sm: 9px; --radius-lg: 22px; --maxw: 1200px; --header-h: 60px; /* Match the main product (sequel.id): Inter for sans, system mono. */ --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } /* ---- accent presets (all cool / non-orange) ---- */ :root[data-accent="blue"] { --brand: #0085d1; --brand-2: #2ba6e8; --accent: #a9d8f3; } :root[data-accent="sky"] { --brand: #0ea5e9; --brand-2: #38bdf8; --accent: #bae6fd; } :root[data-accent="indigo"] { --brand: #4f46e5; --brand-2: #6366f1; --accent: #c7d2fe; } :root[data-accent="teal"] { --brand: #0d9488; --brand-2: #14b8a6; --accent: #99f6e4; } /* PRD palette (orange) available as an alternative theme token */ :root[data-accent="orange"] { --brand: #f97316; --brand-2: #fb923c; --accent: #fdba74; } /* ---- dark theme ---- */ :root[data-theme="dark"] { --bg: #0a1019; --surface: #0e1722; --panel: #111c29; --panel-2: #16212e; --text: #e9f1f8; --text-muted: #a7b6c4; --text-faint: #738694; --border: #213140; --border-strong: #324456; --code-bg: #070d15; --code-text: #e9eff5; --shadow-color: 210deg 60% 3%; --shadow-md: 0 4px 14px -4px hsl(var(--shadow-color) / .5), 0 2px 5px -3px hsl(var(--shadow-color) / .4); --shadow-lg: 0 22px 50px -18px hsl(var(--shadow-color) / .7), 0 8px 18px -8px hsl(var(--shadow-color) / .5); --brand-soft: color-mix(in oklab, var(--brand), var(--bg) 84%); --brand-soft-2: color-mix(in oklab, var(--brand), var(--bg) 72%); --brand-line: color-mix(in oklab, var(--brand), var(--border) 45%); } /* ---- density ---- */ :root[data-density="compact"] { --base-size: 14.5px; --card-pad: 14px; --gap: 12px; --sec-py: 52px; --radius: 11px; --radius-sm: 8px; --radius-lg: 18px; } /* =========================== base =========================== */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--base-size); line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.011em; } h1, h2, h3, h4 { letter-spacing: -0.025em; line-height: 1.12; margin: 0; font-weight: 650; } p { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } img { max-width: 100%; display: block; } ::selection { background: color-mix(in oklab, var(--brand), transparent 70%); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } .mono { font-family: var(--mono); } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } /* scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 20px; border: 3px solid var(--bg); } /* =========================== eyebrow / section heads =========================== */ .eyebrow { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-ink); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; } .eyebrow::before { content: ""; width: 14px; height: 1.5px; background: var(--brand); } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; } .sec-head h2 { font-size: clamp(22px, 2.4vw, 30px); } .sec-head .sub { color: var(--text-muted); margin-top: 6px; font-size: 14.5px; max-width: 52ch; } /* =========================== buttons =========================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 560; font-size: 14.5px; white-space: nowrap; transition: background .15s, border-color .15s, transform .08s, box-shadow .15s, color .15s; } .btn:active { transform: translateY(1px); } .btn svg { width: 17px; height: 17px; } .btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--brand-ink); } .btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); } .btn-ghost:hover { background: var(--panel-2); border-color: var(--text-faint); } .btn-soft { background: var(--brand-soft); color: var(--brand-ink); } .btn-soft:hover { background: var(--brand-soft-2); } .btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; } .btn-block { width: 100%; } /* =========================== chips / tags / badges =========================== */ .tag { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-muted); font-size: 13px; font-weight: 500; transition: background .14s, color .14s, border-color .14s, transform .08s; } .tag::before { content: "#"; color: var(--text-faint); font-family: var(--mono); } .tag:hover { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-line); } .tag:active { transform: translateY(1px); } .badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; height: 22px; padding: 0 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; font-family: var(--mono); letter-spacing: .02em; text-transform: uppercase; background: var(--panel-2); color: var(--text-muted); border: 1px solid var(--border); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge.is-publish { color: var(--green); background: color-mix(in oklab, var(--green), var(--bg) 88%); border-color: color-mix(in oklab, var(--green), var(--bg) 70%); } .badge.is-draft { color: var(--text-faint); } .badge.is-review { color: var(--amber); background: color-mix(in oklab, var(--amber), var(--bg) 88%); border-color: color-mix(in oklab, var(--amber), var(--bg) 70%); } .badge.is-archive{ color: var(--text-faint); background: var(--panel-2); } /* =========================== cards =========================== */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color .16s, box-shadow .16s, transform .16s, background .16s; } .card-link { display: block; } .card-link:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); transform: translateY(-2px); } /* icon tile */ .icon-tile { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--brand-line); flex: none; } .icon-tile svg { width: 23px; height: 23px; } .icon-tile.neutral { background: var(--panel-2); color: var(--text-muted); border-color: var(--border); } /* image / illustration placeholder */ .ph { position: relative; border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, var(--panel-2) 0 11px, transparent 11px 22px), var(--surface); border: 1px dashed var(--border-strong); display: grid; place-items: center; overflow: hidden; } .ph span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--text-faint); text-transform: uppercase; background: var(--bg); padding: 4px 9px; border-radius: 6px; border: 1px solid var(--border); } /* divider */ .hr { height: 1px; background: var(--border); border: 0; margin: 0; } /* kbd */ kbd { font-family: var(--mono); font-size: 11px; line-height: 1; white-space: nowrap; padding: 3px 6px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; color: var(--text-muted); } /* section background helper */ .sec { padding-block: var(--sec-py); } .sec-surface { background: var(--surface); border-block: 1px solid var(--border); } /* utility */ .grid { display: grid; gap: var(--gap); } .row { display: flex; gap: var(--gap); } .between { justify-content: space-between; } .center { align-items: center; } .wrap-flex { flex-wrap: wrap; } .stack { display: flex; flex-direction: column; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }