/* * Nadav newsroom app: design tokens (step 1). Source of truth: prototype/index.html (decision 11). * Values marked "proto" are copied 1:1 from the prototype. Everything else is new and documented in docs/APP_DESIGN.md. * Single dark theme on purpose: the app lives next to Nadav's dark carousels. No light mode. */ /* Heebo, variable 300–900, served locally (OFL, fonts/OFL.txt). Same files Google serves (v28). */ @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('fonts/heebo-var-hebrew.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('fonts/heebo-var-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Heebo'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('fonts/heebo-var-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: dark; /* ---- colour: surfaces (proto) ---- */ --bg: #090C0B; /* app background */ --surface: #101614; /* cards, list rows, inputs */ --surface-2: #161E1B; /* buttons, bubbles, raised */ --surface-3: #1F2925; /* chips, score tile, pressed */ /* ---- colour: lines ---- */ --line: #22302B; /* dividers, card borders (decorative) (proto) */ --line-2: #33443E; /* stronger dividers (proto) */ --line-ctl: #637770; /* NEW: edges of interactive controls (inputs, switch-off, checkbox, chip outline). ≥3:1 on every surface (WCAG 1.4.11) */ /* ---- colour: text (proto) ---- */ --fg: #EEF4F1; /* 17.6:1 on bg */ --fg-2: #BAC8C3; /* 11.4:1 */ --muted: #7E918A; /* 5.9:1 on bg, 4.5:1 on surface-3 (use fg-2 for small text on surface-3) */ /* ---- colour: brand mint (proto; the carousel mint is #66F8CD, the app uses the prototype's #64F7CB) ---- */ --mint: #64F7CB; --mint-press: #43DDB0; --mint-soft: rgba(100, 247, 203, .11); --mint-line: rgba(100, 247, 203, .38); --mint-ink: #03251B; /* text on mint: 12.2:1 */ /* ---- colour: semantic (proto) ---- */ --warn: #FFC861; --warn-soft: rgba(255, 200, 97, .12); /* ⚠️, score 4–6, "מוכן" */ --bad: #FF7E70; --bad-soft: rgba(255, 126, 112, .12); /* NEW soft: 🚫, errors, failed jobs */ --warn-ink: #2B1D00; --bad-ink: #2A0904; /* text on warn / bad fills */ --info: #93BBFF; --info-soft: rgba(147, 187, 255, .12); /* queue notes, "במחקר" */ --violet: #C9AEFF; --violet-soft: rgba(201, 174, 255, .13); /* "בעיצוב", Yotam's avatar */ /* ---- colour: overlays (proto) ---- */ --scrim: rgba(3, 6, 5, .64); --glass: rgba(30, 38, 35, .88); --glass-line: rgba(255, 255, 255, .08); --overlay: rgba(0, 0, 0, .6); --media-bg: #000; /* behind slides and video while they load */ --slide-navy: #121F2B; /* the carousel's navy (fallback slide) */ /* ---- status → colour (proto: .st-*) ---- */ --st-new: var(--mint); --st-research: var(--info); --st-design: var(--violet); --st-ready: var(--warn); --st-published: var(--fg); --st-rejected: var(--muted); --st-failed: var(--bad); /* NEW: job failed, post "לא עלה" */ /* ---- type (proto scale) ---- */ --font: "Heebo", "Arial Hebrew", "Noto Sans Hebrew", "Segoe UI", system-ui, sans-serif; --t-xs: 12px; /* meta, timestamps, badges */ --t-sm: 13.5px; /* secondary text, buttons, bubbles */ --t-md: 15px; /* body, card titles */ --t-lg: 17px; /* brand, detail title, angle */ --t-xl: 20px; /* sheet title, empty-state title */ --t-2xl: 26px; /* view title (h1) */ --t-input: 16px; /* NEW: inputs must be ≥16px or iOS zooms on focus */ --lh-tight: 1.15; --lh: 1.5; --lh-prose: 1.8; --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-xbold: 800; --w-black: 900; /* ---- spacing (NEW: the prototype's recurring values, named) ---- */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 14px; --sp-7: 16px; --sp-8: 18px; --sp-9: 22px; --sp-10: 26px; --sp-11: 30px; --gutter: 16px; /* side gutter; never less, plus safe-area (see .gut) */ /* ---- radii (proto values, named) ---- */ --r-xs: 4px; /* slide frame, bubble tail */ --r-sm: 10px; /* small buttons, links */ --r-md: 12px; /* buttons, inputs, notes */ --r-lg: 14px; /* score tile, choices, think boxes */ --r-xl: 16px; /* cards, lists */ --r-2xl: 22px; /* sheets */ --r-pill: 999px; /* ---- sizes ---- */ --tap: 44px; /* NEW: minimum touch target (Apple HIG). Smaller visuals get an invisible hit area (.hit) */ --tabh: 62px; /* bottom tab bar (proto) */ --headh: 58px; /* top bar */ --rail: 96px; /* desktop nav rail (proto) */ --list-w: 420px; /* desktop list pane max (proto: minmax(340px, 420px)) */ --read: 760px; /* reading column (proto) */ --fab: 58px; /* ---- elevation (proto) ---- */ --shadow: 0 12px 36px rgba(0, 0, 0, .5); --shadow-fab: 0 8px 24px rgba(100, 247, 203, .22), 0 4px 12px rgba(0, 0, 0, .5); --ring-sel: 0 0 0 3px var(--mint-soft); /* ---- layers (NEW: named z-index) ---- */ --z-sticky: 4; --z-fab: 5; --z-sheet: 20; --z-toast: 30; --z-push: 40; /* ---- motion (proto) ---- */ --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.2, .9, .25, 1.08); --dur-1: .15s; --dur-2: .22s; --dur-3: .38s; /* ---- safe areas (iPhone) ---- */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } /* breakpoints (use in media queries; CSS can't read vars there): phone < 600 · tablet 600–959 · desktop ≥ 960 (3 panes) · wide ≥ 1280 */ @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0s; --dur-2: 0s; --dur-3: 0s; } }