/* ============================================================ Bedrok Labs — Design Tokens Dusk Duotone (mobile app system) extended for the web. Semantic tokens only — components must never use raw hex. Light theme is the site default; add .theme-dark to a section (or the ) to flip that scope to dark. ============================================================ */ :root { /* ---- Raw palette (referenced only inside this file) ---- */ --raw-teal-600: #1a7f71; --raw-teal-700: #14655a; --raw-teal-300: #35d4b2; --raw-teal-050: #e9f4f1; --raw-ink-900: #1f2937; --raw-ink-500: #6b7280; --raw-ink-400: #9ca3af; --raw-white: #ffffff; --raw-warm-050: #faf9f6; /* warm canvas */ --raw-gray-100: #f3f4f6; --raw-gray-200: #e5e7eb; --raw-night-000: #141414; --raw-night-100: #1c1c1c; --raw-pine-950: #0e1b18; /* deep-pine dark band */ --raw-pine-900: #132723; --raw-pine-800: #1a332e; --raw-navy-900: #050f24; /* app header/nav navy (deep, matches mobile app) */ --raw-navy-800: #0e2143; --raw-fog-100: #f5f5f5; --raw-fog-300: #aeaeae; --raw-fog-500: #777777; --raw-red-500: #ef4444; --raw-red-300: #d16172; --raw-green-500: #22c55e; --raw-green-300: #4ade80; --raw-amber-500: #d97706; --raw-blue-500: #3b5bdb; /* ---- Semantic: light (default) ---- */ --color-primary: var(--raw-teal-600); --color-primary-strong: var(--raw-teal-700); --color-primary-soft: var(--raw-teal-050); --color-on-primary: var(--raw-white); --color-text-primary: var(--raw-ink-900); --color-text-secondary: var(--raw-ink-500); --color-text-meta: var(--raw-ink-400); --color-canvas: var(--raw-warm-050); --color-surface: var(--raw-gray-100); --color-surface-elevated: var(--raw-white); --color-border: var(--raw-gray-200); --color-border-strong: var(--raw-ink-400); --color-urgent: var(--raw-red-500); --color-success: var(--raw-green-500); --color-warn: var(--raw-amber-500); --color-info: var(--raw-blue-500); --shadow-card: 0 1px 2px rgb(31 41 55 / 0.05), 0 4px 16px rgb(31 41 55 / 0.06); --shadow-card-hover: 0 2px 4px rgb(31 41 55 / 0.06), 0 10px 28px rgb(31 41 55 / 0.10); --focus-ring: 0 0 0 3px rgb(26 127 113 / 0.35); /* ---- Spacing scale ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-30: 120px; /* ---- Radii ---- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; /* ---- Type ---- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --text-display: clamp(3rem, 6vw, 5rem); --text-h1: clamp(2.5rem, 5vw, 4.25rem); --text-h2: clamp(2rem, 4vw, 3rem); --text-h3: clamp(1.35rem, 2vw, 1.75rem); --text-body-lg: 1.1875rem; /* 19px */ --text-body: 1rem; /* 16px */ --text-small: 0.875rem; /* 14px */ --text-meta: 0.8125rem; /* 13px */ /* ---- Layout ---- */ --container-max: 1240px; --container-narrow: 720px; --inset: 16px; --section-pad: 48px; /* mobile; scaled up in layout.css */ /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-med: 260ms; } @media (min-width: 768px) { :root { --inset: 24px; --section-pad: 72px; } } @media (min-width: 1024px) { :root { --inset: 32px; --section-pad: 100px; } } /* ---- Semantic: dark scope ---- Apply .theme-dark to any section/band that should render on the deep-pine dark surface. Components keep working unchanged because they only reference semantic tokens. */ .theme-dark { --color-primary: var(--raw-teal-300); --color-primary-strong: var(--raw-teal-300); --color-primary-soft: var(--raw-pine-800); --color-on-primary: var(--raw-pine-950); --color-text-primary: var(--raw-fog-100); --color-text-secondary: var(--raw-fog-300); --color-text-meta: var(--raw-fog-500); --color-canvas: var(--raw-pine-950); --color-surface: var(--raw-pine-900); --color-surface-elevated: var(--raw-pine-800); --color-border: rgb(255 255 255 / 0.12); --color-border-strong: rgb(255 255 255 / 0.3); --color-urgent: var(--raw-red-300); --color-success: var(--raw-green-300); --shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 20px rgb(0 0 0 / 0.35); --shadow-card-hover: 0 2px 4px rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.45); --focus-ring: 0 0 0 3px rgb(53 212 178 / 0.45); background-color: var(--color-canvas); color: var(--color-text-primary); } /* Neutral-dark variant (matches the app's #141414 night surface) — used for product-UI mockups that should feel like the mobile app. */ .theme-night { --color-primary: var(--raw-teal-300); --color-on-primary: var(--raw-night-000); --color-text-primary: var(--raw-fog-100); --color-text-secondary: var(--raw-fog-300); --color-text-meta: var(--raw-fog-500); --color-canvas: var(--raw-night-000); --color-surface: var(--raw-night-100); --color-surface-elevated: #242424; --color-border: rgb(255 255 255 / 0.12); --color-urgent: var(--raw-red-300); --color-success: var(--raw-green-300); background-color: var(--color-canvas); color: var(--color-text-primary); }