/* ============================================================================ Likidera — Design tokens (v5) Single source for both themes. Every color is declared once via light-dark(); `color-scheme` is the only switch. System preference applies by default, [data-theme] pins it (set pre-paint by theme.js). Light is the default: browsers without light-dark() fall back to the light theme (see bottom). ============================================================================ */ @font-face { font-family: "Inter var"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-latin.woff2?v=693b77d4f3") format("woff2"); } :root { color-scheme: light dark; /* ---- Brand constants (theme-invariant, from the logo lockup) ---------- */ --logo-navy: #14243E; --logo-teal: #2DD4BF; --ink: #0B1220; /* fixed dark — surfaces that never re-theme (CTA band) */ --paper: #F8FAFC; --white: #FFFFFF; /* The light theme's three text values as fixed entries: a surface that re-themes --text locally (the CTA plate) needs them by value. */ --ink-text: #0F172A; --ink-muted: #46586F; --ink-faint: #5C6E85; /* ---- Teal ramp --------------------------------------------------------- */ --teal-300: #5EEAD4; --teal-400: #2DD4BF; --teal-500: #14B8A6; --teal-700: #0F766E; --teal-800: #115E59; /* ---- Surfaces: three tonal steps, hairline borders --------------------- */ --bg: light-dark(#F8FAFC, #0B1220); --surface: light-dark(var(--white), #111C30); --surface-2: light-dark(#EEF2F6, #182642); /* Strengthened 2026-09-04: the derived mix separated from --bg by ~1.03, which read as no tint at all. Hard floor on the light value — --text-faint lands at 4.68 against #EFF3F7, so it must not go darker without re-checking that pair. */ --section-tint: light-dark(#EFF3F7, #101A2C); --border: light-dark(rgba(15, 35, 66, 0.12), rgba(170, 200, 235, 0.14)); --border-strong: light-dark(rgba(15, 35, 66, 0.24), rgba(170, 200, 235, 0.26)); --rule: light-dark(rgba(15, 35, 66, 0.08), rgba(170, 200, 235, 0.08)); /* ---- Text --------------------------------------------------------------- */ --text: light-dark(var(--ink-text), #E7EEF7); --text-muted: light-dark(var(--ink-muted), #9FB0C6); --text-faint: light-dark(var(--ink-faint), #7E90A8); /* AA at 12px+ on --bg */ /* ---- Brand accent — teal is punctuation, never a wash ------------------- */ --brand: light-dark(var(--teal-700), var(--teal-400)); --brand-hover: light-dark(var(--teal-800), var(--teal-300)); --on-brand: light-dark(#FFFFFF, #0B1220); --glow: light-dark(rgba(15, 118, 110, 0.07), rgba(45, 212, 191, 0.12)); /* ---- Cash direction (semantic, separate from brand) --------------------- */ --income: light-dark(#127A4B, #34C77B); --expense: light-dark(#B4423A, #E4776D); /* brick, not alarm red */ --warning: light-dark(#97621C, #E0A458); --pending: light-dark(#64748B, #93A6BC); /* ---- Chart roles — drawing law: realized solid, forecast dashed --------- */ --chart-grid: light-dark(rgba(15, 35, 66, 0.08), rgba(170, 200, 235, 0.10)); --chart-axis: light-dark(rgba(15, 35, 66, 0.30), rgba(170, 200, 235, 0.32)); --chart-today: light-dark(rgba(15, 35, 66, 0.38), rgba(170, 200, 235, 0.38)); --chart-realized: var(--brand); --chart-forecast: var(--brand); --chart-band: light-dark(rgba(15, 118, 110, 0.10), rgba(45, 212, 191, 0.13)); --chart-area: light-dark(rgba(15, 118, 110, 0.07), rgba(45, 212, 191, 0.09)); --chart-deviation: light-dark(rgba(15, 23, 42, 0.15), rgba(231, 238, 247, 0.16)); --chart-series-2: light-dark(#2F5BEA, #6B8AFF); --chart-series-3: light-dark(#6D5BC7, #9B8BE8); /* ---- Elevation: hairline + inner light in dark, soft drop in light ------ */ --edge-highlight: inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.05)); --shadow-card: 0 1px 2px light-dark(rgba(11, 18, 32, 0.05), rgba(0, 0, 0, 0.25)), 0 16px 40px light-dark(rgba(11, 18, 32, 0.08), rgba(0, 0, 0, 0.35)); --shadow-pop: 0 24px 60px light-dark(rgba(11, 18, 32, 0.18), rgba(0, 0, 0, 0.55)); --backdrop: light-dark(rgba(15, 23, 42, 0.48), rgba(4, 9, 18, 0.72)); /* ---- Typography --------------------------------------------------------- */ --font-sans: "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --weight-regular: 400; --weight-figure: 480; /* amounts only — between regular and medium */ --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --text-display: clamp(2.4rem, 1.6rem + 3.2vw, 3.6rem); --text-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem); --text-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem); /* A quiet section title, one step below --text-h2 (36px at 1440), for a page whose headings describe rather than claim. 30px at 1440. */ --text-h2-quiet: clamp(1.5rem, 1.2rem + 1.1vw, 1.875rem); --text-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem); --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --text-body: 1.0625rem; /* 17px */ --text-sm: 0.9375rem; /* 15px */ --text-xs: 0.8125rem; /* 13px */ --text-micro: 0.75rem; /* 12px — axis-label floor */ --text-amount: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem); --text-label: 0.8125rem; /* 13px — eyebrows, ticks, captions */ --leading-tight: 1.06; --leading-heading: 1.14; --leading-body: 1.6; --tracking-display: -0.032em; --tracking-heading: -0.022em; --tracking-body: 0; --tracking-amount: -0.01em; --tracking-data: 0.005em; /* Every uppercase label. 0.1em, not 0.14em: at 0.14em the budget plate's heads cannot fit its 452px record column at 1000 (product.css). */ --tracking-eyebrow: 0.1em; /* Tabular, slashed-zero, lining figures — every amount carries this. */ --numeric-figures: "tnum" 1, "zero" 1, "lnum" 1; /* ---- Spacing (8pt with a 4pt half-step) --------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem; /* ---- Layout ------------------------------------------------------------- */ --container: 1280px; --container-wide: 1440px; /* hero, screenshot bands, ERP timeline */ --container-narrow: 720px; --gutter: var(--space-5); --section-y: clamp(3.5rem, 2rem + 4vw, 5.5rem); /* v2: six sections, tighter ceiling */ --section-y-tight: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); /* strips */ --section-y-inner: clamp(3rem, 1.6rem + 2.6vw, 4.5rem); /* inner pages: one notch tighter */ /* A nine-block reference page sits its records closer together than an argument page sits its sections. 56px at 1440 (--section-y-inner is 72). */ --section-y-product: clamp(2.5rem, 1.4rem + 2vw, 3.5rem); --teaser-gap: clamp(3rem, 2rem + 3vw, 4.5rem); /* between teasers */ --header-h: 68px; /* The in-page index bar's own height, so the anchor offset is derived from it rather than hard-coded. Rendered height is 50px: 48 plus two hairlines. */ --index-h: 48px; /* Edge fade on a horizontal scroller (the index bar's row, the comparison table's middle): how far the content dissolves before the edge. */ --edge-fade: 24px; --drawer-w: 22.5rem; /* 360px */ /* ---- Radius ------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ---- Motion ------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 140ms; --duration-base: 240ms; --duration-slow: 400ms; --duration-draw: 900ms; /* ---- Horizon ruler ------------------------------------------------------ */ --ruler-line: light-dark(rgba(15, 35, 66, 0.22), rgba(170, 200, 235, 0.24)); --ruler-tick: light-dark(rgba(15, 35, 66, 0.30), rgba(170, 200, 235, 0.34)); --ruler-label: var(--text-faint); --ruler-today: var(--brand); --ruler-pitch: 56px; /* tick spacing; matches .grid-texture */ /* ---- Frames: screenshots, drawings, photographs ------------------------- */ --frame-radius: var(--radius-lg); --frame-border: var(--border); --shot-bg: light-dark(#E6EBF1, #152238); --shot-chrome: light-dark(#F3F6F9, #111C30); /* A real capture is dark in both themes: the application has one skin. Its frame therefore carries the app's own grounds rather than the page's — content #1A1A2E under the image, so a capture narrower than its frame meets no seam, and one step darker for the chrome so it reads as the window's title bar. Only the edge re-themes: a hairline drawn against the page it sits on, and a shadow that is soft on paper and deep on the dark ground. The label is the dark theme's --text-muted (7.6:1). */ --shot-real-bg: #1A1A2E; --shot-real-chrome: #12122A; --shot-real-rule: rgba(255, 255, 255, 0.07); --shot-real-label: #9FB0C6; --shot-real-edge: light-dark(rgba(15, 35, 66, 0.28), rgba(170, 200, 235, 0.20)); --shot-real-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06); --shadow-real: 0 1px 2px light-dark(rgba(11, 18, 32, 0.12), rgba(0, 0, 0, 0.40)), 0 24px 48px -12px light-dark(rgba(11, 18, 32, 0.32), rgba(0, 0, 0, 0.60)); /* Frame height budget: unbounded height, not width, is what made the first Forecasting build a column of grey. No inner-page frame exceeds 460px. */ --shot-illus-h: clamp(240px, 32vw, 460px); /* drawn diagrams */ /* 48vw, not 40: at 768 the guard bit the two tallest ratios (Daily Tasks in a 560px exhibit, the scenario table across 720) and left frame ground beside them. At 48vw they clear it by 26px and 40px. */ --shot-real-h: clamp(280px, 48vw, 560px); /* a real capture, at its own ratio */ /* ---- Treatments: how far a capture is from the reader ------------------- */ /* A crop that cut through the application's own content fades to the frame's ground on that edge, so it reads as part of a larger screen rather than a small one. The frame's existing 1px edge is the rule the fade sits behind. */ --shot-cut-fade: 24px; /* One step above --shadow-real for a page's first plate, and two for an object that sits in front of another (a detail on its plate, the front panel of the offset pair). Same geometry, deeper and longer. */ --shadow-real-lead: 0 1px 2px light-dark(rgba(11, 18, 32, 0.14), rgba(0, 0, 0, 0.44)), 0 36px 72px -16px light-dark(rgba(11, 18, 32, 0.38), rgba(0, 0, 0, 0.68)); --shadow-real-lift: 0 2px 4px light-dark(rgba(11, 18, 32, 0.16), rgba(0, 0, 0, 0.50)), 0 24px 44px -10px light-dark(rgba(11, 18, 32, 0.44), rgba(0, 0, 0, 0.74)); /* Under the hero frame's bottom edge only: a low, wide teal line, not a halo. */ --shot-underglow: light-dark(rgba(15, 118, 110, 0.38), rgba(45, 212, 191, 0.30)); /* ---- Photo treatment: one look for every photograph on the site --------- */ --photo-saturate: 0.72; --photo-contrast: 1.04; --photo-tint-a: light-dark(rgba(20, 36, 62, 0.26), rgba(20, 36, 62, 0.42)); /* logo navy */ --photo-tint-b: light-dark(rgba(15, 118, 110, 0.14), rgba(45, 212, 191, 0.10)); /* teal */ --photo-duotone-shadow: var(--logo-navy); --photo-duotone-light: var(--teal-300); /* ---- Header ------------------------------------------------------------- */ --header-bg-scrolled: light-dark(rgba(248, 250, 252, 0.86), rgba(11, 18, 32, 0.80)); /* ---- Product index bar -------------------------------------------------- --brand at 16% over --bg (raised from 8% on 2026-09-14: the owner found the bar too quiet — "biraz daha belli olsun"), laid down as a surface. A neutral half-step (--surface-2) separates from --bg by 1.08 in light, the ratio the 2026-09-04 tint note found reads as no tint; at a 50px height it is the hue shift, not the luminance step, that makes this read. Labels on it are --text-muted (6.22 light / 7.39 dark); --text-faint would land at 4.46 in light, under the floor. The scrolled value carries the header's own alphas so the two pinned bars frost as one. */ --index-bg: light-dark(#D6E7E8, #11323A); --index-bg-scrolled: light-dark(rgba(214, 231, 232, 0.9), rgba(17, 50, 58, 0.86)); --index-active-bg: light-dark(rgba(15, 118, 110, 0.12), rgba(45, 212, 191, 0.14)); /* ---- Layers ------------------------------------------------------------- */ --z-float: 90; /* pinned index bar, back-to-top: over content, under the header */ --z-header: 100; --z-sheet: 110; --z-modal: 200; } /* Wide desktops: the wide stage grows so 1920px screens keep no empty flanks. */ @media (min-width: 1680px) { :root { --container-wide: 1600px; } } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Reduced motion: durations zero at the token, so every transition and animation built on them stops without specificity fights. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0.001ms; --duration-base: 0.001ms; --duration-slow: 0.001ms; --duration-draw: 0.001ms; } } /* Browsers without light-dark(): pin the light theme so every color resolves. */ @supports not (color: light-dark(#000, #fff)) { :root { --bg: #F8FAFC; --surface: #FFFFFF; --surface-2: #EEF2F6; --section-tint: #EFF3F7; --border: rgba(15, 35, 66, 0.12); --border-strong: rgba(15, 35, 66, 0.24); --rule: rgba(15, 35, 66, 0.08); --text: #0F172A; --text-muted: #46586F; --text-faint: #5C6E85; --brand: var(--teal-700); --brand-hover: var(--teal-800); --on-brand: #FFFFFF; --glow: rgba(15, 118, 110, 0.07); --income: #127A4B; --expense: #B4423A; --warning: #97621C; --pending: #64748B; --chart-grid: rgba(15, 35, 66, 0.08); --chart-axis: rgba(15, 35, 66, 0.30); --chart-today: rgba(15, 35, 66, 0.38); --chart-band: rgba(15, 118, 110, 0.10); --chart-area: rgba(15, 118, 110, 0.07); --chart-deviation: rgba(15, 23, 42, 0.15); --chart-series-2: #2F5BEA; --chart-series-3: #6D5BC7; --edge-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8); --shadow-card: 0 1px 2px rgba(11, 18, 32, 0.05), 0 16px 40px rgba(11, 18, 32, 0.08); --shadow-pop: 0 24px 60px rgba(11, 18, 32, 0.18); --backdrop: rgba(15, 23, 42, 0.48); --ruler-line: rgba(15, 35, 66, 0.22); --ruler-tick: rgba(15, 35, 66, 0.30); --shot-bg: #E6EBF1; --shot-chrome: #F3F6F9; --shot-real-edge: rgba(15, 35, 66, 0.28); --shadow-real: 0 1px 2px rgba(11, 18, 32, 0.12), 0 24px 48px -12px rgba(11, 18, 32, 0.32); --shadow-real-lead: 0 1px 2px rgba(11, 18, 32, 0.14), 0 36px 72px -16px rgba(11, 18, 32, 0.38); --shadow-real-lift: 0 2px 4px rgba(11, 18, 32, 0.16), 0 24px 44px -10px rgba(11, 18, 32, 0.44); --shot-underglow: rgba(15, 118, 110, 0.38); --photo-tint-a: rgba(20, 36, 62, 0.26); --photo-tint-b: rgba(15, 118, 110, 0.14); --header-bg-scrolled: rgba(248, 250, 252, 0.86); --index-bg: #D6E7E8; --index-bg-scrolled: rgba(214, 231, 232, 0.9); --index-active-bg: rgba(15, 118, 110, 0.12); } }