/* ======================================================================= Frontier Security · Design Tokens ----------------------------------------------------------------------- Canonical tokens from the Frontier Security platform design system. Light only — both outward-facing sites set `color-scheme: light` and neither has a theme toggle. Re-sync from the platform if dark is ever needed; a stale local copy is worse than none. - Brand face: Inter (variable, opsz) + JetBrains Mono. - Brand primary: Frontier teal — oklch(0.60 0.11 195). - Translucent borders so they ride any surface. - Engineered card shadow with inset highlight (lit, not flat). ====================================================================== */ /* ---------------------------------------------------------------------- 1. Webfonts — Inter (variable + opsz) + JetBrains Mono, from Google. ---------------------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..800&family=JetBrains+Mono:wght@400;500&display=swap"); /* ---------------------------------------------------------------------- 2. Token primitives — radius, type families, shadow, motion. ---------------------------------------------------------------------- */ :root { /* Brand · the only true literals — used in the SVG marks. */ --brand-ink: #0A0A0A; --brand-paper: #FAFAF7; /* Radius scale */ --radius: 0.5rem; /* base — md (8px) */ --radius-sm: calc(var(--radius) - 4px); /* 4px */ --radius-md: calc(var(--radius) - 2px); /* 6px */ --radius-lg: var(--radius); /* 8px */ --radius-xl: calc(var(--radius) + 4px); /* 12px */ --radius-full: 9999px; /* Type families — synced with the platform (frontend/src/styles/theme.css). "Inter Variable" is the self-hosted @fontsource name used in-product; the Google Fonts import above serves plain "Inter". One stack covers both. */ --font-display: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; --font-body: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-sans: var(--font-body); /* Shadow primitives — engineered, not Tailwind defaults. */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(15, 23, 42, 0.04); --shadow-card-light: 0 4px 24px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset; /* Motion — short, utilitarian, default ease. */ --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --motion-base: 180ms cubic-bezier(0.4, 0, 0.2, 1); --motion-slow: 240ms cubic-bezier(0.4, 0, 0.2, 1); } /* ---------------------------------------------------------------------- 3. Light theme — synced with the platform's light mode. Source of truth: platform/frontend/src/styles/theme.css (the light `:root` block). Values below are copied verbatim from it, with hex comments kept, so the outward-facing sites and the product share one palette. One deliberate divergence: the product reserves --primary for Workbench Indigo (#5B4DD1), its interactive colour, and --accent for Frontier teal. These sites are brand surfaces rather than app chrome, so --primary here carries the product's teal instead. ---------------------------------------------------------------------- */ :root { --background: oklch(0.979 0.003 264.5); /* #F7F8FA */ --foreground: oklch(0.233 0.024 273.6); /* #1A1D29 */ --card: oklch(1 0 0); /* #FFFFFF */ --card-foreground: oklch(0.233 0.024 273.6); --popover: oklch(1 0 0); --popover-foreground: oklch(0.233 0.024 273.6); /* Primary — Frontier teal, the product's --accent. */ --primary: oklch(0.623 0.123 165.5); /* #1D9E75 */ --primary-foreground: #ffffff; --accent-glow: oklch(0.623 0.123 165.5 / 0.10); /* Accent — same teal, matching the product's naming. */ --accent: oklch(0.623 0.123 165.5); /* #1D9E75 */ --accent-foreground: #ffffff; /* Neutrals */ --secondary: oklch(0.972 0.005 258.3); /* #F4F6F9 */ --secondary-foreground: oklch(0.233 0.024 273.6); --muted: oklch(0.972 0.005 258.3); /* #F4F6F9 */ --muted-foreground: oklch(0.551 0.023 264.4); /* #6B7280 */ /* Semantic — reserved for status surfaces, not decoration. */ --success: oklch(0.6 0.13 155); --success-foreground: #ffffff; --success-glow: oklch(0.6 0.13 155 / 0.12); --warning: oklch(0.74 0.14 75); --warning-foreground: oklch(0.22 0.05 75); --warning-glow: oklch(0.74 0.14 75 / 0.18); --destructive: oklch(0.623 0.188 24.7); /* #E24B4A */ --destructive-foreground: #ffffff; --destructive-glow: oklch(0.623 0.188 24.7 / 0.1); /* Lines & rings */ --border: oklch(0.928 0.006 264.5); /* #E5E7EB */ --input: oklch(0.928 0.006 264.5); --input-background: oklch(1 0 0); /* #FFFFFF */ --ring: oklch(0.623 0.123 165.5 / 0.35); /* Chart palette */ --chart-1: oklch(0.623 0.123 165.5); /* #1D9E75 */ --chart-2: oklch(0.784 0.159 73); /* #F5A623 */ --chart-3: oklch(0.623 0.188 24.7); /* #E24B4A */ --chart-4: oklch(0.513 0.195 281.8); /* #5B4DD1 */ --chart-5: oklch(0.714 0.019 261.3); /* #9CA3AF */ /* The product's app-chrome tokens (--sidebar-*, --severity-*) are deliberately not mirrored here: there is no nav rail and no severity badge on a marketing page. Pull them from the platform if that changes. */ --shadow-card: var(--shadow-card-light); } /* ---------------------------------------------------------------------- 5. Base typography — Inter, 14px body, ss01/cv11, antialiased. ---------------------------------------------------------------------- */ html, body { background: var(--background); color: var(--foreground); } body { font-family: var(--font-body); font-size: 14px; line-height: 1.5; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01" on, "cv11" on; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.022em; color: var(--foreground); margin: 0; } /* Semantic type scale — matches the platform's Tailwind output. */ .fs-display { font-family: var(--font-display); font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.024em; } .fs-h1 { font-family: var(--font-display); font-size: 24px; line-height: 1.20; font-weight: 700; letter-spacing: -0.022em; } .fs-h2 { font-family: var(--font-display); font-size: 18px; line-height: 1.30; font-weight: 600; letter-spacing: -0.018em; } .fs-h3 { font-family: var(--font-display); font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; } .fs-body { font-family: var(--font-body); font-size: 14px; line-height: 1.50; font-weight: 400; letter-spacing: -0.005em; } .fs-body-md { font-family: var(--font-body); font-size: 14px; line-height: 1.50; font-weight: 500; letter-spacing: -0.005em; } .fs-small { font-family: var(--font-body); font-size: 13px; line-height: 1.45; font-weight: 400; letter-spacing: -0.003em; } .fs-xs { font-family: var(--font-body); font-size: 12px; line-height: 1.40; font-weight: 500; letter-spacing: 0.000em; } .fs-mono { font-family: var(--font-mono); font-size: 13px; line-height: 1.45; font-weight: 400; letter-spacing: 0.000em; } .fs-mono-xs { font-family: var(--font-mono); font-size: 12px; line-height: 1.40; font-weight: 400; letter-spacing: 0.000em; } /* Foreground helpers */ .fg-muted { color: var(--muted-foreground); } .fg-primary { color: var(--primary); } .fg-destructive { color: var(--destructive); } .fg-success { color: var(--success); } .fg-warning { color: var(--warning); }