/* ────────────────────────────────────────────────────────────────────── Akis Design Tokens — SINGLE SSOT (ADR-0051). One vocabulary (legacy short-names), one file. app.css holds component styles only; reset.css + system.css consume these names. Light = base (:root); dark derived via [data-theme="dark"] (theme.js sets , coercing 'auto' → prefers-color-scheme). Density via [data-density]. Per-workspace recolour: theme.js sets inline style on for --primary/--accent/--bg/--surface/--text/--muted/--radius. Faz 1 (token consolidation) keeps every value at its previously-resolved runtime value → ZERO visual diff. Faz 2 retunes the value table to the neutral+accent identity. ────────────────────────────────────────────────────────────────────── */ /* ── Inter (app-wide default UI font) ─────────────────────────────────── Self-hosted variable font (weight axis 100–900). Self-host is mandatory: CSP is `font-src 'self'` (no CDN), KVKK (no third-party requests) and the PWA must render offline. Two subsets so Turkish glyphs (ç ğ ı İ ö ş ü) come from latin-ext. font-display: swap → system fallback paints first, Inter swaps in (no FOIT). Provenance: vendor/fonts/SOURCE.md. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../vendor/fonts/inter-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../vendor/fonts/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Allow width/height transitions to/from intrinsic keywords (auto, max-content) — keeps topbar sync/health chips from snapping on resize. */ interpolate-size: allow-keywords; /* ── Breakpoint SSOT ────────────────────────────────────── Canonical adaptive breakpoints — every new @media query should use one of these widths. CSS custom properties cannot appear inside @media (..); these tokens are for JS reads (matchMedia) + documentation only. xs <480 · sm 480-639 · md 640-767 · lg 768-1023 · xl 1024-1439 · 2xl >=1440 Documented legacy exceptions (container-query candidates): 860/900/901 (ContactPanel dock cutoff) · 1100 (topbar compact) · 1280 (brand show). */ --bp-xs: 480px; --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px; --topbar-h: 56px; --status-bar-h: 0px; /* dynamic; status-bar.js toggles */ /* ── Z-index scale (SSOT, ADR layering) ─────────────────── The ONLY place global stacking is defined. Overlays sit ABOVE the topbar so a modal/sheet/drawer fully covers the header — this kills the class of "modal top hidden under the topbar" bugs at the root. Ordering invariants: topbar > tour (its dropdowns beat tour tips) and overlay > topbar (modals cover the header). Purely-local stacking inside a card/table/grid stays a small scoped integer and never joins this scale. New global layer? Add a token here — never a magic number (enforced by `npm run audit:zindex`). */ --z-sticky: 10; /* in-content sticky headers/toolbars/table heads */ --z-raised: 50; /* status bar, sub-navs, settings tabbar, save-bar */ --z-nav: 900; /* bottom-nav, mobile menu drawer (below topbar) */ --z-tour: 1500; /* feature-tour highlight / tip */ --z-topbar: 2000; /* fixed app topbar (beats tour for its dropdowns) */ --z-overlay:3000; /* modal / sheet / drawer host — covers the topbar */ --z-toast: 4000; /* toasts above modals */ --z-tooltip:5000; /* tooltips above all transient UI */ --z-skip: 9000; /* skip link (keyboard a11y) */ --z-block: 9999; /* duplicate-tab singleton block — absolute top */ /* ── Gray scale (Radix slate) — neutral primitives ────── */ --gray-50: hsl(220 14% 96%); --gray-100: hsl(220 13% 91%); --gray-200: hsl(220 13% 84%); --gray-300: hsl(216 12% 70%); --gray-400: hsl(218 11% 56%); --gray-500: hsl(220 9% 46%); --gray-600: hsl(215 14% 34%); --gray-700: hsl(217 19% 27%); --gray-800: hsl(215 28% 17%); --gray-900: hsl(221 39% 11%); --gray-950: hsl(224 71% 4%); /* ── Typography ───────────────────────────────────────── */ /* Inter is the app-wide default (self-hosted, @font-face above); the system stack stays as fallback for first paint + offline + any glyph Inter lacks. */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Per-element families/sizes are emitted by Theme.apply() as --font--* and consumed by app.css; --font-body/--font-heading are the static fallbacks. */ --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; /* ── Spacing (4px base) ───────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 48px; --space-8: 32px; --space-10: 40px; /* ── Radius (neutral identity — tight 8-14) ───────────── */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius: 12px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ── Elevation — minimal, neutral (light) ─────────────── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 2px rgba(0,0,0,0.05), 0 1px 1px rgba(0,0,0,0.03); --shadow-md: 0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --shadow: 0 4px 16px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.03); --shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.04); --shadow-xl: 0 24px 56px rgba(0,0,0,0.14), 0 8px 18px rgba(0,0,0,0.06); /* ── Motion ───────────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --t-fast: 0.15s; --t-base: 0.22s; --t-slow: 0.4s; --dur-instant: 80ms; --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; /* ── Density (default: comfortable) ───────────────────── */ --row-h: 44px; --input-h: 36px; --btn-h: 36px; --btn-pad-x: 14px; --field-pad: var(--space-3); /* ── Page shell tokens ────────────────────────────────── */ --page-max-wide: 1400px; --page-max: 1120px; --page-max-narrow: 880px; --page-pad-x: clamp(16px, 3vw, 32px); --page-pad-y: 24px; --page-pad-top: 24px; --page-pad-bottom: 60px; --page-title-size: clamp(22px, 2.6vw, 28px); --page-title-weight: 700; --page-title-tracking: -0.01em; --page-subtitle-size: 13px; --page-header-mb: 20px; --page-header-gap: 14px; /* ── Brand (light) — neutral identity: accent = indigo, overridable per workspace (theme.js sets --primary on ) ─── */ --primary: #4F46E5; /* indigo-600 */ --primary-dark: #4338CA; /* indigo-700 */ --primary-light: #818CF8; /* indigo-400 */ --primary-50: #EEF2FF; /* indigo-50 tint */ --accent: #6366F1; /* indigo-500 secondary */ --accent-light: #818CF8; --accent-50: #EEF2FF; --fg-on-accent: #FFFFFF; /* ── Surfaces (light) — cool zinc neutral ─────────────── */ --bg: #FAFAFA; --bg-warm: #F4F4F5; /* zinc-100 */ --surface: #FFFFFF; --surface-2: rgba(255,255,255,0.82); --surface-glass: rgba(255,255,255,0.7); --surface-elevated: #FFFFFF; --bg-hover: rgba(24,24,27,0.04); --bg-active: rgba(24,24,27,0.08); --bg-overlay: rgba(0,0,0,0.45); /* ── Text + neutrals (light) — zinc ───────────────────── */ --text: #18181B; /* zinc-900 */ --text-secondary: #3F3F46; /* zinc-700 */ --muted: #52525B; /* zinc-600 — 7:1 on white, AA */ --muted-light: #A1A1AA; /* zinc-400 */ --border: #E4E4E7; /* zinc-200 hairline */ --border-strong: #D4D4D8; /* zinc-300 */ --border-strong-2: #A1A1AA; /* zinc-400 */ /* ── Semantic ─────────────────────────────────────────── */ --danger: #DC2626; --danger-bg: rgba(220,38,38,0.10); --warning: #D97706; --warning-bg: rgba(217,119,6,0.12); --success: #16A34A; --success-bg: rgba(22,163,74,0.10); --info: #2563EB; --info-bg: rgba(37,99,235,0.10); /* ── Focus + selection ────────────────────────────────── */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary); --selection-bg: rgba(79,70,229,0.18); /* ── Tooltip (high-contrast inverse) ──────────────────── */ --tooltip-bg: #18181B; --tooltip-fg: #FFFFFF; --tooltip-border: rgba(255,255,255,0.10); --tooltip-shadow: 0 6px 18px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.12); color-scheme: light; } /* ── Dark theme (derived) ─────────────────────────────────── */ [data-theme="dark"] { --bg: #0A0A0B; /* near-black */ --bg-warm: #18181B; --surface: #18181B; /* zinc-900 */ --surface-2: rgba(24,24,27,0.85); --surface-glass: rgba(24,24,27,0.72); --surface-elevated: #27272A; /* zinc-800 */ --bg-hover: rgba(255,255,255,0.06); --bg-active: rgba(255,255,255,0.10); --bg-overlay: rgba(0,0,0,0.65); --text: #FAFAFA; --text-secondary: #D4D4D8; /* zinc-300 */ --muted: #A1A1AA; /* zinc-400 */ --muted-light: #71717A; /* zinc-500 */ --border: #27272A; /* zinc-800 hairline */ --border-strong: #3F3F46; /* zinc-700 */ --border-strong-2: #52525B; /* zinc-600 */ /* --primary stays at the :root value so a workspace's inline accent override (theme.js sets --primary on ) survives in dark too. */ --primary-50: rgba(99,102,241,0.16); --accent-50: rgba(99,102,241,0.12); --shadow-xs: 0 1px 2px rgba(0,0,0,0.4); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 6px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3); --shadow: 0 6px 20px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3); --shadow-lg: 0 18px 48px rgba(0,0,0,0.6); --shadow-xl: 0 32px 80px rgba(0,0,0,0.7); /* Dark: near-white tooltip with dark text for the inverse pop. */ --tooltip-bg: #FAFAFA; --tooltip-fg: #18181B; --tooltip-border: rgba(0,0,0,0.18); --tooltip-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.4); color-scheme: dark; } /* ── Compact density ──────────────────────────────────────── */ [data-density="compact"] { --row-h: 36px; --input-h: 30px; --btn-h: 30px; --btn-pad-x: 10px; --field-pad: var(--space-2); } /* ── Spacious density — kiosk / breathable forms ──────────── */ [data-density="spacious"] { --row-h: 52px; --input-h: 48px; --btn-h: 44px; --btn-pad-x: 18px; --field-pad: var(--space-4); } /* ── Mobile: WCAG 2.5.5 touch targets ≥44px ──────────────── */ @media (max-width: 768px) { :root { --row-h: 48px; --input-h: 44px; --btn-h: 44px; } [data-density="compact"] { --row-h: 44px; --input-h: 40px; --btn-h: 40px; } } /* ── Reduced motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }