/* ========================================================================== APPS Architekten — Design Tokens -------------------------------------------------------------------------- Single source of truth for the visual identity. Components and base styles consume semantic tokens, never primitives directly. Two-tier system: 1. Primitives — raw values (color ramps, scales). Stable. 2. Semantic — meaningful aliases (--color-bg, --color-accent, etc). Theme: DM Sans, red brand (#8B0000), light mode only. ========================================================================== */ @layer reset, tokens, base, components, utilities; @layer tokens { :root { /* ---------------------------------------------------------------- 1. PRIMITIVES — raw values ---------------------------------------------------------------- */ /* Neutral ramp (zinc) */ --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7; --zinc-300: #d4d4d8; --zinc-400: #a1a1aa; --zinc-500: #71717a; --zinc-600: #52525b; --zinc-700: #3f3f46; --zinc-800: #27272a; --zinc-900: #18181b; --zinc-950: #09090b; /* Brand ramp (red) — anchored on #8B0000 at the 800 step. */ --red-50: #fdf2f2; --red-100: #fce4e4; --red-200: #f8c8c8; --red-300: #efa0a0; --red-400: #e16969; --red-500: #cc3a3a; --red-600: #b01f1f; --red-700: #960c0c; --red-800: #8b0000; --red-900: #6e0000; --red-950: #4a0000; --white: #ffffff; --black: #000000; /* Warm off-white — second neutral, dialled way back per Phase 12 Pass B. The earlier #f6f2ec was reading too "atelier"; outlines and decorative layer now do the structural work, so the warm tier becomes a quiet chord change rather than a different surface. Bone/sand, not greige. */ --bone-50: #fdfcf9; --bone-100: #fbf9f5; --bone-200: #f4eee3; /* Spacing — hybrid 4-then-doubling scale */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 12rem; /* 192px */ --space-12: 16rem; /* 256px */ /* Fluid type scale — clamp(min, fluid, max). Min hits ~360px viewport, max hits ~1280px viewport. Smooth ramp in between. */ --text-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.8125rem); /* 12 → 13px */ --text-sm: clamp(0.875rem, 0.83rem + 0.21vw, 0.9375rem); /* 14 → 15px */ --text-base: clamp(1rem, 0.95rem + 0.21vw, 1.0625rem); /* 16 → 17px */ --text-lg: clamp(1.125rem, 1.06rem + 0.30vw, 1.25rem); /* 18 → 20px */ --text-xl: clamp(1.25rem, 1.14rem + 0.54vw, 1.5rem); /* 20 → 24px */ --text-2xl: clamp(1.5rem, 1.32rem + 0.89vw, 2rem); /* 24 → 32px */ --text-3xl: clamp(1.875rem, 1.55rem + 1.61vw, 2.75rem); /* 30 → 44px */ --text-4xl: clamp(2.25rem, 1.71rem + 2.68vw, 3.75rem); /* 36 → 60px */ /* Line heights */ --leading-tight: 1.15; --leading-snug: 1.25; --leading-normal: 1.55; --leading-relaxed: 1.75; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; /* Font weights — DM Sans variable, range 300-500 vendored. */ --font-light: 300; --font-normal: 400; --font-medium: 500; /* Font families */ --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Radii */ --radius-none: 0; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Shadows — light-mode tuned. */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05); /* Motion */ --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); /* Layout containers */ --container-narrow: 38rem; /* 608px — prose */ --container-default: 82.5rem; /* 1320px — main */ --container-wide: 90rem; /* 1440px — hero/feature */ /* Breakpoints (reference only — @media uses literal values). --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; */ /* ---------------------------------------------------------------- 2. SEMANTIC — light theme ---------------------------------------------------------------- */ /* Surfaces */ --color-bg: var(--white); --color-bg-subtle: var(--zinc-50); --color-bg-muted: var(--zinc-100); --color-bg-inset: var(--white); --color-surface-warm: var(--bone-100); /* Text */ --color-text: var(--zinc-900); --color-text-muted: var(--zinc-600); --color-text-subtle: var(--zinc-500); --color-text-on-accent: var(--white); /* Borders */ --color-border: var(--zinc-200); --color-border-strong: var(--zinc-300); /* Accent — brand red */ --color-accent: var(--red-800); --color-accent-hover: var(--red-700); --color-accent-fg: var(--white); /* Feedback */ --color-focus-ring: var(--red-500); --color-selection-bg: var(--red-200); --color-selection-fg: var(--zinc-900); } /* ---------------------------------------------------------------- 3. WEB FONTS — self-hosted DM Sans variable (wght 300-500) ---------------------------------------------------------------- */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/assets/fonts/DM-Sans-Variable-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; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 300 500; font-display: swap; src: url("/assets/fonts/DM-Sans-Variable-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } }