/* Podaljšek brand layer — 8d (ink + one green) + 9c (extension rule). Load AFTER style.css: Overrides custom properties only; every selector below already exists in style.css. */ /* Fonts are self-hosted — see fonts.css, loaded before this file. */ :root { color-scheme: light; --bg: #f7f8fa; --card: #ffffff; --text: #0b0d12; --muted: #667085; --line: #e4e7ec; --fill: #f2f4f7; --accent: #0e8345; /* means one thing: time you gained */ --accent-soft: #e3f5eb; --accent-ink: #0b0d12; /* primary buttons and UI weight */ --red: #b42318; --red-soft: #fef3f2; --green: #0e8345; --green-soft: #e3f5eb; --yellow-soft: #f2f4f7; --shadow: 0 1px 2px rgba(16, 24, 40, 0.06); --radius-card: 10px; --radius-control: 8px; } /* Dark tokens apply when EITHER the OS asks for dark and the user hasn't forced light (Auto), OR the user forced dark. data-theme on is the override; its absence means Auto. Both blocks carry the same values by necessity — a media-conditional rule and a plain selector can't be merged. */ :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0d12; --card: #14171f; --text: #f5f6f8; --muted: #98a2b3; --line: #242833; --fill: #1b1f28; --accent: #22d07a; --accent-soft: rgba(34, 208, 122, 0.14); --accent-ink: #ffffff; --red: #f97066; --red-soft: rgba(249, 112, 102, 0.14); --green: #22d07a; --green-soft: rgba(34, 208, 122, 0.14); --yellow-soft: #1b1f28; --shadow: none; } } :root[data-theme="dark"] { --bg: #0b0d12; --card: #14171f; --text: #f5f6f8; --muted: #98a2b3; --line: #242833; --fill: #1b1f28; --accent: #22d07a; --accent-soft: rgba(34, 208, 122, 0.14); --accent-ink: #ffffff; --red: #f97066; --red-soft: rgba(249, 112, 102, 0.14); --green: #22d07a; --green-soft: rgba(34, 208, 122, 0.14); --yellow-soft: #1b1f28; --shadow: none; } body { font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif; } h1, h2, h3 { font-weight: 600; letter-spacing: -0.03em; } h1 { letter-spacing: -0.04em; } /* numbers stay aligned everywhere — no separate mono face */ .stat-value, .ratio, .streak-chip, .grid, .day, .dow, .controls input[type="number"], .controls input[type="date"] { font-variant-numeric: tabular-nums; } .tagline { font-size: 0.95rem; color: var(--muted); } .stat-label, .months-label, .legend, .controls label { font-size: 0.8rem; font-weight: 500; color: var(--muted); letter-spacing: 0; } /* surfaces: hairline + one soft shadow, never a hard offset */ .controls, .summary, .final, .month, .card, .export-menu { border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow); } button { border-radius: var(--radius-control); font-weight: 500; letter-spacing: 0; } /* rule 2: green is information, not emphasis — secondary actions stay neutral */ button.secondary { background: var(--fill); color: var(--text); } button.secondary.danger { background: var(--red-soft); color: var(--red); } #ignored-note button, .card-actions .btn-add { background: var(--fill); color: var(--text); } .card.added .btn-add { background: var(--accent); color: #fff; } #plan { background: var(--accent-ink); color: var(--card); border: none; box-shadow: none; } #plan:hover { filter: none; opacity: 0.9; transform: none; } #plan:active { transform: none; } /* text = the card surface, which is always the opposite of --accent-ink, so it stays readable in every theme (no raw dark media query — that would ignore a forced-light override and paint dark text on the light button). */ .mode { border-radius: var(--radius-control); padding: 3px; background: var(--fill); } .mode label { border-radius: 6px; } .mode label:has(input:checked) { background: var(--card); box-shadow: var(--shadow); border: none; } .months .chip, .streak-chip, .ratio, .main-badge { border-radius: 6px; } .months .chip:has(input:checked) { background: var(--accent-soft); color: var(--accent); } .ratio { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* no blue anywhere: focus, selection and native controls follow the accent */ .controls input:focus-visible, button:focus-visible, .day.clickable:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); } ::selection { background: var(--accent-soft); color: var(--text); } .style-control input[type="range"], .check-control input { accent-color: var(--accent); } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--text); } /* calendar */ .day { border-radius: 6px; } .day.vacation { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .day.confirmed { background: var(--accent); color: #fff; } .day[data-tip]:hover::after { border-radius: 6px; background: var(--text); color: var(--card); font-weight: 500; } .day[data-tip]:hover::before { border-top-color: var(--text); } /* 9c — the extension rule. Same shape in the logo and in every result bar. */ .brand { display: flex; align-items: center; gap: 0.65rem; } .brand h1 { display: flex; align-items: center; gap: 0.28em; margin: 0; } .brand h1::after { content: ""; width: 1.15em; height: 0.11em; border-radius: 0.06em; background: var(--accent); flex: none; } @media (max-width: 420px) { .brand h1::after { width: 0.8em; } } .ratio-bar { height: 0.35rem; border-radius: 0.18rem; background: var(--fill); overflow: hidden; } .ratio-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }