/* ===================================================================== 1SWISS1 Design Tokens --------------------------------------------------------------------- Single source of truth for the client-area theme. Every component CSS and any hand-written rule should read its colours, sizes and easings from these custom properties. Naming convention: --1s1-{category}-{role}-{variant?} ===================================================================== */ /* ---- Self-hosted Inter (variable) ---- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter/InterVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('../fonts/inter/InterVariable-Italic.woff2') format('woff2-variations'); } :root { /* ============== BRAND ============== The 1SWISS1 red is the only signature accent. Everything else is neutral; brand showing up too often is a smell. ================================= */ --1s1-brand: #ff5756; --1s1-brand-hover: #f24241; --1s1-brand-active: #d93333; --1s1-brand-soft: #fff1f0; /* Faint tinted backgrounds (badges, alerts) */ --1s1-brand-on: #ffffff; /* Foreground on solid brand surfaces */ /* ============== NEUTRALS ============== Cool greys with a hint of warmth. Calibrated so that text on bg hits WCAG AA at body sizes. ===================================== */ --1s1-bg: #fafafa; /* Page background */ --1s1-surface: #ffffff; /* Cards, panels */ --1s1-surface-raised: #ffffff; /* Modals, dropdowns (with stronger shadow) */ --1s1-surface-sunken: #f4f4f4; /* Section bands, inactive areas */ --1s1-border: #e8e8e8; /* Default rule */ --1s1-border-strong: #cfcfcf; /* Inputs, focus-adjacent */ --1s1-text: #1a1a1a; /* Primary copy */ --1s1-text-muted: #5b5e62; /* Secondary / metadata */ --1s1-text-subtle: #8b8e93; /* Placeholders, disabled */ --1s1-text-on-dark: #ffffff; --1s1-text-link: var(--1s1-brand); --1s1-text-link-hover: var(--1s1-brand-hover); --1s1-dark: #222222; /* Brand dark surfaces (footer, hero overlays) */ --1s1-dark-soft: #464949; /* ============== STATE ============== Used by alerts, badges, status pills. ================================== */ --1s1-success: #10b981; --1s1-success-soft: #ecfdf5; --1s1-warning: #f59e0b; --1s1-warning-soft: #fffbeb; --1s1-danger: #ef4444; --1s1-danger-soft: #fef2f2; --1s1-info: #3b82f6; --1s1-info-soft: #eff6ff; /* ============== TYPOGRAPHY ============== */ --1s1-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --1s1-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Size scale — 1.125 ratio (modular). Set --1s1-text-base then everything follows. */ --1s1-text-base: 16px; --1s1-text-xs: 12px; /* meta, captions */ --1s1-text-sm: 14px; /* labels, secondary text */ --1s1-text-md: 16px; /* body */ --1s1-text-lg: 18px; /* lead paragraphs */ --1s1-text-xl: 20px; /* small section titles */ --1s1-text-2xl: 24px; /* card / page subtitles */ --1s1-text-3xl: 30px; /* page titles */ --1s1-text-4xl: 36px; /* big section headings */ --1s1-text-5xl: 48px; /* hero on inner pages */ --1s1-text-display: 60px; /* homepage hero */ --1s1-weight-regular: 400; --1s1-weight-medium: 500; --1s1-weight-semibold: 600; --1s1-weight-bold: 700; --1s1-leading-tight: 1.15; --1s1-leading-snug: 1.3; --1s1-leading-normal: 1.55; --1s1-leading-relaxed: 1.75; --1s1-tracking-tight: -0.02em; --1s1-tracking-normal: 0; --1s1-tracking-wide: 0.04em; /* Tabular figures helper for invoice/price columns */ --1s1-numeric-tabular: tabular-nums; /* ============== SPACING ============== 4-px grid. Use these instead of magic numbers. ===================================== */ --1s1-space-1: 4px; --1s1-space-2: 8px; --1s1-space-3: 12px; --1s1-space-4: 16px; --1s1-space-5: 20px; --1s1-space-6: 24px; --1s1-space-8: 32px; --1s1-space-10: 40px; --1s1-space-12: 48px; --1s1-space-16: 64px; --1s1-space-20: 80px; --1s1-space-24: 96px; --1s1-space-32: 128px; /* Page-level horizontal max-widths */ --1s1-container-sm: 640px; --1s1-container-md: 840px; --1s1-container-lg: 1080px; --1s1-container-xl: 1280px; --1s1-container-2xl: 1440px; /* ============== RADII ============== */ --1s1-radius-xs: 4px; --1s1-radius-sm: 6px; --1s1-radius-md: 10px; --1s1-radius-lg: 14px; --1s1-radius-xl: 20px; --1s1-radius-2xl: 28px; --1s1-radius-pill: 9999px; /* ============== SHADOWS ============== Linear/Cloudflare style: soft, layered, not heavy. Each one is a composite (small ambient + slightly larger directional). ===================================== */ --1s1-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04); --1s1-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.06); --1s1-shadow-md: 0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 4px 8px -2px rgba(15, 23, 42, 0.08); --1s1-shadow-lg: 0 4px 6px -2px rgba(15, 23, 42, 0.05), 0 12px 24px -6px rgba(15, 23, 42, 0.10); --1s1-shadow-xl: 0 8px 12px -4px rgba(15, 23, 42, 0.06), 0 24px 48px -12px rgba(15, 23, 42, 0.18); --1s1-shadow-focus: 0 0 0 4px rgba(255, 87, 86, 0.18); --1s1-shadow-focus-soft: 0 0 0 4px rgba(59, 130, 246, 0.18); /* ============== MOTION ============== */ --1s1-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --1s1-transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1); --1s1-transition-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1); --1s1-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ============== Z-INDEX SCALE ============== */ --1s1-z-dropdown: 50; --1s1-z-sticky: 100; --1s1-z-overlay: 200; --1s1-z-modal: 300; --1s1-z-popover: 400; --1s1-z-toast: 500; } /* Reduce motion when the user asks for it */ @media (prefers-reduced-motion: reduce) { :root { --1s1-transition-fast: 0ms; --1s1-transition-base: 0ms; --1s1-transition-slow: 0ms; } } /* ==================================================================== Base resets that the design system relies on. Kept here on purpose so the theme always renders with Inter + correct rendering hints once _design-tokens.css is loaded. ==================================================================== */ html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { font-family: var(--1s1-font-sans); font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--1s1-text); background: var(--1s1-bg); }