/* ========================================================================== SinFos Systems — Design Tokens Structure, scale and rhythm inherited from the "AI for Business" style (styles.refero.design, brutalist editorial showroom). Every colour is replaced by the SinFos official brand guide palette; nothing else changes. Secondary influence (Auros): tracked uppercase labels, recessed footer well, 32px arrow icon buttons. ========================================================================== */ :root { /* ---- Brand palette (official brand guide — the only colours allowed) --- */ --brand-navy: #050B18; /* Brand Navy — page canvas */ --brand-blue: #2563EB; /* Brand Blue — the single chromatic accent */ --brand-sky-400: #60A5FA; /* light blue — highlight word, links */ --brand-sky-300: #93C5FD; /* light blue — secondary text */ --brand-sky-200: #BFDBFE; /* pale blue — tag pills, ice surface */ /* ---- Neutral derivatives of navy (no new hues) ------------------------- */ --navy-void: #000000; /* heavy sections (replaces Carbon Black blocks) */ --navy-950: #050B18; /* canvas */ --navy-900: #0B0F1C; /* raised section panel (replaces Mist Gray) */ --navy-800: #111827; /* card surface (replaces Paper White) */ --navy-700: #1E293B; /* hairlines, disabled, dividers (replaces Ash) */ --ink: #F5F7FA; /* primary text (replaces Carbon Black text) */ /* ---- Semantic colour roles ---------------------------------------------- */ /* Site palette locked 14 Sep 2026: Dayos greys + logo blue (see palette.md) */ --canvas: #E5E5E5; /* Warm Canvas */ --paper: #FFFFFF; /* Paper White */ --mist: #F3F3F3; /* Mist Gray */ --carbon: #000000; /* Carbon Black */ --graphite: #2F2F2F; /* object metal */ --slate: #444444; /* secondary text */ --smoke: #979797; /* meta only */ --ash: #C6C6C6; /* hairlines */ --mint: #D1FFCA; /* Mint Chip */ --bg-base: var(--canvas); --bg-heavy: var(--carbon); --bg-raised: var(--mist); --surface-card: var(--paper); --surface-ice: var(--mint); /* the one accent block */ --surface-accent: var(--brand-blue); --text-primary: var(--carbon); --text-secondary: var(--slate); --text-muted: var(--smoke); /* labels and captions only */ --text-on-accent: #FFFFFF; --text-on-ice: var(--carbon); --text-on-heavy: #FFFFFF; --text-highlight: var(--brand-blue); /* "That": white text on a blue block */ --line-hairline: var(--ash); --line-brand: var(--brand-blue); /* the header rule */ --line-ghost: var(--slate); /* ghost button border */ --accent: var(--brand-blue); --accent-hover: #1D4ED8; --accent-active: #1E40AF; --focus-ring: var(--brand-blue); --accent-soft: var(--paper); /* arrow icon button fill */ --btn-primary-bg: var(--carbon); /* filled CTA on light ground */ --btn-primary-fg: #FFFFFF; --btn-heavy-bg: var(--brand-blue); /* filled CTA on black ground */ --btn-heavy-fg: #FFFFFF; /* ---- Typography — families ------------------------------------------- */ /* SITE-WIDE TYPE, decided by Maor in the font lab on 19 Sep 2026. English and Hebrew are chosen separately on purpose: English: DM Sans for display and body (800 for display, 400/500 for text) Hebrew: Varela Round for every role. It ships ONE weight (400): never fake a bold (font-synthesis: none below), build Hebrew hierarchy from size and colour. Mono: Space Mono for labels and indices (Latin only). The logo and the typed hero headline stay English in both languages. Load: family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,800&family=Varela+Round&family=Space+Mono:wght@400;700 The previous set (Space Grotesk / Inter / Rubik) lives on in tokens-v1.css for the frozen P1 V1 page. */ --font-display: "DM Sans", "Varela Round", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --font-body: "DM Sans", "Varela Round", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; --font-mono: "Space Mono", ui-monospace, "JetBrains Mono", "IBM Plex Mono", Consolas, monospace; --font-hebrew: "Varela Round", "DM Sans", "Arial Hebrew", Arial, sans-serif; --weight-regular: 400; --weight-w450: 450; --weight-medium: 500; --weight-bold: 700; --weight-black: 900; /* Rubik display weight for Hebrew headlines */ /* ---- Typography — scale (identical to reference: Minor Third, 20px base) */ --text-caption: 12px; --leading-caption: 1.6; --tracking-caption: -0.36px; --text-body-sm: 14px; --leading-body-sm: 1.3; --tracking-body-sm: -0.154px; --text-body: 16px; --leading-body: 1.25; --tracking-body: 0; --text-body-reading: 16px; --leading-body-reading: 1.5; /* long-form copy, ≥1.5 */ --text-subheading: 18px; --leading-subheading: 1.33; --text-subheading-lg: 20px; --leading-subheading-lg: 1.2; --text-heading-sm: 28px; --leading-heading-sm: 1.3; --tracking-heading-sm: -0.84px; --text-heading: clamp(1.75rem, 3.2vw, 2.5rem); --leading-heading: 1.1; --tracking-heading: -0.02em; --text-heading-lg: clamp(2rem, 4vw, 3rem); --leading-heading-lg: 0.9; --tracking-heading-lg: -0.02em; --text-display: clamp(2.75rem, 6.6vw, 5rem); --leading-display: 0.9; --tracking-display: -0.02em; --text-display-xl: clamp(3.5rem, 10.4vw, 8.125rem); --leading-display-xl: 0.9; --tracking-display-xl: -0.025em; --tracking-label: 0.15em; /* Auros-style wide tracking on uppercase mono labels */ /* ---- Spacing (8px base, comfortable density) -------------------------- */ --space-unit: 8px; --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-40: 40px; --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-120: 120px; /* recessed footer well (Auros) */ /* ---- Layout ------------------------------------------------------------ */ --page-max-width: 1200px; --page-gutter: clamp(16px, 4vw, 40px); --section-gap: clamp(64px, 8vw, 80px); --card-padding: 24px; --element-gap: 16px; --element-gap-lg: 24px; --nav-height: 8rem; --nav-height-mobile: 5rem; --measure: 65ch; /* ---- Radius ------------------------------------------------------------ */ --radius-button: 8px; --radius-button-sm: 4px; --radius-icon: 6px; --radius-input: 8px; --radius-card: 24px; --radius-card-lg: 32px; --radius-nav-pill: 48px; --radius-tag: 64px; --radius-arc: 64px; --radius-full: 9999px; /* ---- Elevation: none. Depth comes from surface steps, never shadow. ---- */ --shadow: none; /* ---- Motion ------------------------------------------------------------ */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 480ms; --dur-reveal: 720ms; /* ---- Borders ----------------------------------------------------------- */ --border-ghost: 1.5px; --border-rule: 3px; /* header brand rule */ /* ---- Component: language direction switch ----------------------------- */ --text-align-start: left; } /* Hebrew: swap every role to Varela Round and mirror alignment. Applied by or any subtree with lang="he". */ :lang(he) { --font-display: var(--font-hebrew); --font-body: var(--font-hebrew); --weight-bold: 400; /* Varela Round has a single weight */ font-synthesis: none; /* and the browser must not smear a fake bold */ --tracking-display-xl: 0; /* Hebrew is never tracked negative */ --tracking-display: 0; --tracking-heading-lg: 0; --tracking-heading: 0; --tracking-heading-sm: 0; --text-align-start: right; } /* Section tones — every section declares exactly one. */ [data-tone="base"] { --tone-bg: var(--bg-base); --tone-card: var(--surface-card); --tone-fg: var(--text-primary); --tone-fg2: var(--text-secondary); } [data-tone="heavy"] { --tone-bg: var(--bg-heavy); --tone-card: #1A1A1A; --tone-fg: #FFFFFF; --tone-fg2: var(--smoke); } [data-tone="raised"] { --tone-bg: var(--bg-raised); --tone-card: var(--surface-card); --tone-fg: var(--text-primary); --tone-fg2: var(--text-secondary); } [data-tone="ice"] { --tone-bg: var(--surface-ice); --tone-card: #FFFFFF; --tone-fg: var(--carbon); --tone-fg2: var(--slate); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; } }