/* ============================================================================ Penioza UI — design tokens (Rose / floral) — SINGLE SOURCE for ai.penioza.ru portal. Canonical source: Penioza Funnel Builder/design-system/penioza-ui-tokens.css Full docs: DESIGN.md (repo root) + /design-system styleguide page. Rule: style everything through these tokens, never hardcode colors. ============================================================================ */ /* ============================================================ Penioza UI — design tokens (Rose / floral) Drop-in: import this file, then style everything through the custom properties below. Theme = auto (prefers-color-scheme) + override via . ============================================================ */ :root{ /* ── Neutrals (warm, mauve-biased — chosen, not pure grey) ── */ --bg:#f4f1f3; /* app background */ --surface:#ffffff; /* cards, panels */ --surface-2:#efe8ed; /* insets, chips */ --raise:#fbf8fa; /* inputs, subtle raise */ --ink:#241f2b; /* primary text (near-black, violet bias) */ --ink-soft:#6c6474; /* secondary text */ --ink-faint:#9a91a2; /* tertiary text, hairlines-on-text */ --line:#e4dbe3; /* borders, dividers */ /* ── Accent (deep rose — the one bold voice) ── */ --accent:#b0567a; --accent-ink:#8d3d60; /* accent text on light */ --accent-soft:#f4e2ec;/* accent tint bg, focus ring */ /* ── Semantic · element categories (separate from accent) ── */ --cat-trigger:#b0567a; /* entry / trigger */ --cat-message:#4b5563; /* message / step */ --cat-action:#7d7f4e; /* action / passive */ /* ── Semantic · status & rules ── */ --s-delay:#b07327; /* time delay (amber) */ --s-schedule:#5f5fce; /* absolute schedule (violet-blue) */ --s-branch:#2f8f82; /* branch / condition (teal) */ --s-link:#2f7fae; /* link (blue) */ --s-override:#a24bb0; /* per-variant override (purple) */ --s-good:#2f8f6a; --s-warn:#b07327; --s-crit:#bb4a4a; /* ── Type ── */ --font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --fs-eyebrow:10px; --fs-label:11px; --fs-cap:12px; --fs-body:14px; --fs-title:17px; --fs-h1:19px; --ls-eyebrow:.14em; --ls-label:.08em; --lh-body:1.5; /* ── Radius ── */ --r-badge:6px; --r-field:9px; --r-card:14px; --r-pill:999px; /* ── Space (4pt rhythm) ── */ --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:12px; --sp-5:14px; --sp-6:18px; /* ── Elevation & focus ── */ --shadow:0 1px 2px rgba(30,20,35,.06),0 8px 24px rgba(30,20,35,.07); --ring:0 0 0 2px var(--accent),0 10px 28px rgba(176,86,122,.22); --focus:0 0 0 3px var(--accent-soft); /* ── Motion (subtle) ── */ --dur:.12s; --ease:ease; /* ── On-accent text · soft status tints · platform sub-palette (added 2026-07-22 — dashboard need) ── */ --on-accent:#ffffff; --s-good-soft:color-mix(in srgb,var(--s-good) 15%,var(--surface)); --s-warn-soft:color-mix(in srgb,var(--s-warn) 15%,var(--surface)); --s-crit-soft:color-mix(in srgb,var(--s-crit) 15%,var(--surface)); --s-link-soft:color-mix(in srgb,var(--s-link) 15%,var(--surface)); --s-schedule-soft:color-mix(in srgb,var(--s-schedule) 15%,var(--surface)); --s-branch-soft:color-mix(in srgb,var(--s-branch) 15%,var(--surface)); --s-override-soft:color-mix(in srgb,var(--s-override) 15%,var(--surface)); --pf-instagram:#c13584; --pf-telegram:#2f7fae; --pf-vk:#4a76a8; --pf-max:#7d5ec4; --scrim:rgba(24,20,30,.55); } /* ── Dark theme: redefine ONLY the tokens ── */ @media (prefers-color-scheme:dark){ :root{ --bg:#161219; --surface:#201b26; --surface-2:#2a2431; --raise:#262029; --ink:#ece6ef; --ink-soft:#a79eb2; --ink-faint:#797084; --line:#332c3a; --accent:#e18cac; --accent-ink:#eaa6c0; --accent-soft:#3a2531; --cat-trigger:#e18cac; --cat-message:#aeb4c0; --cat-action:#c3c68a; --s-delay:#d99a4e; --s-schedule:#9a9aef; --s-branch:#57bcaf; --s-link:#5aa6d0; --s-override:#c884d4; --s-good:#5cc39a; --s-warn:#d99a4e; --s-crit:#e08a8a; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35); --ring:0 0 0 2px var(--accent),0 12px 30px rgba(225,140,172,.2); } } /* Manual override wins over the media query in both directions */ :root[data-theme="light"]{ --bg:#f4f1f3; --surface:#ffffff; --surface-2:#efe8ed; --raise:#fbf8fa; --ink:#241f2b; --ink-soft:#6c6474; --ink-faint:#9a91a2; --line:#e4dbe3; --accent:#b0567a; --accent-ink:#8d3d60; --accent-soft:#f4e2ec; --cat-trigger:#b0567a; --cat-message:#4b5563; --cat-action:#7d7f4e; --s-delay:#b07327; --s-schedule:#5f5fce; --s-branch:#2f8f82; --s-link:#2f7fae; --s-override:#a24bb0; --s-good:#2f8f6a; --s-warn:#b07327; --s-crit:#bb4a4a; --shadow:0 1px 2px rgba(30,20,35,.06),0 8px 24px rgba(30,20,35,.07); } :root[data-theme="dark"]{ --bg:#161219; --surface:#201b26; --surface-2:#2a2431; --raise:#262029; --ink:#ece6ef; --ink-soft:#a79eb2; --ink-faint:#797084; --line:#332c3a; --accent:#e18cac; --accent-ink:#eaa6c0; --accent-soft:#3a2531; --cat-trigger:#e18cac; --cat-message:#aeb4c0; --cat-action:#c3c68a; --s-delay:#d99a4e; --s-schedule:#9a9aef; --s-branch:#57bcaf; --s-link:#5aa6d0; --s-override:#c884d4; --s-good:#5cc39a; --s-warn:#d99a4e; --s-crit:#e08a8a; --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35); } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* portal-only layout token */ :root{ --sidebar-w:240px; } /* ============================================================================ COMPATIBILITY ALIASES — map legacy per-page variable names onto Penioza tokens. A page migrates by REMOVING its local :root block; then it inherits these. Temporary shim — remove a page's aliases once it uses Penioza tokens directly. ============================================================================ */ :root{ /* legacy: dark inline-page schema (competitors/reels/posev/reklama) */ --text: var(--ink); --title: var(--ink); --muted: var(--ink-soft); --muted-2: var(--ink-faint); --border: var(--line); --accent-strong: var(--accent-ink); --accent-2: var(--accent); --surface-3: var(--surface-2); --green: var(--s-good); --blue: var(--s-link); --orange: var(--s-warn); --yellow: var(--s-warn); --danger: var(--s-crit); /* legacy: styles.css Foxclab-peachy schema (crm/utm/rc/scenarios/broadcasts) */ --bg-primary: var(--surface); --bg-secondary: var(--bg); --bg-card: var(--surface); --bg-card-hover: var(--surface-2); --text-primary: var(--ink); --text-secondary: var(--ink-soft); --text-muted: var(--ink-faint); --border-light: var(--line); --border-medium: var(--line); --border-dark: var(--ink-faint); --accent-peachy: var(--accent-soft); --accent-peachy-hover: var(--accent-soft); --accent-peachy-light: var(--accent-soft); --accent-cyan: var(--s-link); --accent-pink: var(--accent-soft); --accent-green: var(--s-good); --accent-red: var(--s-crit); } /* Плашка свежести данных. Обязательна везде, где раздел рисует из кеша (docs/CONTRACT.md §A11): без неё устаревшие данные неотличимы от свежих. Живёт в канон-стилях, а не в CSS раздела, чтобы у всех выглядела одинаково. */ .pz-freshness { display: inline-block; margin-left: 0.6em; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.01em; color: var(--text-muted); vertical-align: middle; white-space: nowrap; }