/* ========================================================================= Rutic Design System — Tokens (shared ru.tc + rutic.online) SSOT: scope colors with [data-brand="ru-tc"] | [data-brand="rutic"] on . Structural scale aligned with site-evo/tokens.css; brand values per TASK-RUTIC-001. ========================================================================= */ @layer tokens { /* ---------- Structural (shared) ---------- */ :root { --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, monospace; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --fs-display: clamp(36px, 5.6vw, 56px); --fs-h2: clamp(28px, 3.4vw, 40px); --fs-h3: 22px; --fs-body: 17px; --fs-small: 15px; --fs-micro: 13px; --lh-tight: 1.05; --lh-body: 1.55; --ease-out: cubic-bezier(.2, .8, .2, 1); --dur-base: 180ms; --z-nav: 40; --z-modal: 100; } /* ---------- DARK — ru.tc (performance) ---------- */ [data-brand="ru-tc"] { color-scheme: dark; --primary: hsl(152 62% 40%); --primary-2: hsl(152 55% 50%); --primary-3: hsl(152 45% 28%); --primary-ink: #ffffff; --bg: #0e0e13; --bg-2: #0a0a0f; --card: #151519; --card-2: #1c1c22; --elevated: #1f1f26; --text: #ededed; --text-strong: #ffffff; --muted: #9d9da8; --muted-2: #6e6e78; --border: #272729; --border-2: #34343a; --border-strong: #40404a; --destructive: #e85858; --danger: #e85858; --success: #6ed4a4; --warning: #e8c86a; --info: #6aafe8; --primary-fill: hsla(152, 62%, 40%, 0.14); --primary-fill-2: hsla(152, 62%, 40%, 0.22); --primary-border: hsla(152, 62%, 40%, 0.3); --primary-border-2: hsla(152, 62%, 40%, 0.55); --info-fill: rgba(106, 175, 232, 0.12); --info-border: rgba(106, 175, 232, 0.25); --success-fill: rgba(110, 212, 164, 0.12); --success-border: rgba(110, 212, 164, 0.25); --warning-fill: rgba(232, 200, 106, 0.12); --warning-border: rgba(232, 200, 106, 0.25); --destructive-fill: rgba(232, 88, 88, 0.12); --destructive-border: rgba(232, 88, 88, 0.28); --glow-primary: 0 0 24px hsla(152, 62%, 40%, 0.35); --glow-btn: 0 0 20px hsla(152, 62%, 40%, 0.4); --glow-card: 0 0 20px hsla(152, 62%, 40%, 0.2); --bg-halo-1: radial-gradient(1200px 600px at 80% -10%, hsla(152, 62%, 40%, 0.1), transparent 60%); --bg-halo-2: radial-gradient(900px 500px at -10% 110%, hsla(152, 62%, 40%, 0.06), transparent 60%); --btn-primary-bg: color-mix(in oklab, var(--primary) 94%, var(--bg)); --btn-primary-text: var(--primary-ink); --btn-primary-border: var(--primary); --btn-outline-border: var(--border-2); --btn-outline-text: var(--text); --btn-ghost-bg: color-mix(in oklab, var(--primary) 18%, transparent); --btn-destructive-bg: var(--destructive); --btn-destructive-text: var(--text-strong); --input-bg: var(--bg-2); --input-border: var(--border); --input-text: var(--text); --input-placeholder: var(--muted-2); --input-focus-ring: color-mix(in oklab, var(--primary) 24%, transparent); --card-surface-bg: var(--card); --card-surface-border: var(--border); --card-featured-glow: 0 0 20px color-mix(in oklab, var(--primary) 22%, transparent); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); } /* ---------- LIGHT — rutic.online (editorial) ---------- */ [data-brand="rutic"] { color-scheme: light; --primary: hsl(152 55% 42%); --primary-2: hsl(152 48% 52%); --primary-3: hsl(152 40% 30%); --primary-ink: #ffffff; --bg: #f7f4ef; --bg-2: #eee9e0; --card: #ffffff; --card-2: #f3efe7; --elevated: #ffffff; --text: #1a1714; --text-strong: #000000; --muted: #6b6158; --muted-2: #9a9086; --border: #e3dac9; --border-2: #d3c9b5; --border-strong: #b9ae97; --destructive: #c94a4a; --danger: #c94a4a; --success: #3d9a6b; --warning: #b8892c; --info: #3f7bb8; --primary-fill: hsla(152, 55%, 42%, 0.1); --primary-fill-2: hsla(152, 55%, 42%, 0.18); --primary-border: hsla(152, 55%, 42%, 0.3); --primary-border-2: hsla(152, 55%, 42%, 0.55); --info-fill: rgba(63, 123, 184, 0.08); --info-border: rgba(63, 123, 184, 0.25); --success-fill: rgba(61, 154, 107, 0.1); --success-border: rgba(61, 154, 107, 0.25); --warning-fill: rgba(184, 137, 44, 0.1); --warning-border: rgba(184, 137, 44, 0.25); --destructive-fill: rgba(201, 74, 74, 0.1); --destructive-border: rgba(201, 74, 74, 0.28); --glow-primary: 0 6px 24px hsla(152, 55%, 42%, 0.18); --glow-btn: 0 8px 20px hsla(152, 55%, 42%, 0.22); --glow-card: 0 10px 24px hsla(152, 55%, 42%, 0.12); --bg-halo-1: radial-gradient(1200px 600px at 80% -10%, hsla(152, 55%, 42%, 0.08), transparent 60%); --bg-halo-2: radial-gradient(900px 500px at -10% 110%, hsla(152, 55%, 42%, 0.05), transparent 60%); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --btn-primary-bg: color-mix(in oklab, var(--primary) 88%, var(--text)); --btn-primary-text: var(--primary-ink); --btn-primary-border: var(--primary); --btn-outline-border: var(--border-2); --btn-outline-text: var(--text); --btn-ghost-bg: color-mix(in oklab, var(--primary) 14%, transparent); --btn-destructive-bg: var(--destructive); --btn-destructive-text: var(--text-strong); --input-bg: var(--card); --input-border: var(--border); --input-text: var(--text); --input-placeholder: var(--muted-2); --input-focus-ring: color-mix(in oklab, var(--primary) 22%, transparent); --card-surface-bg: var(--card); --card-surface-border: var(--border); --card-featured-glow: 0 10px 24px color-mix(in oklab, var(--primary) 15%, transparent); } }