/* ======================================================================= Frontier Security · Design Tokens ----------------------------------------------------------------------- Canonical tokens from the Frontier Security platform design system. Two themes (light / dark) ship in lockstep. Toggle via .dark on . - 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 — Inter for display + body, JetBrains Mono for code. */ --font-display: "Inter", "Inter Tight", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; --font-body: "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; --shadow-card-dark: 0 20px 48px rgba(0, 0, 0, 0.40), 0 1px 0 rgba(255, 255, 255, 0.04) 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 — page surface white, faint card lift. ---------------------------------------------------------------------- */ :root { --background: #ffffff; --foreground: oklch(0.145 0 0); --card: oklch(0.985 0 0); --card-foreground: oklch(0.145 0 0); --popover: #ffffff; --popover-foreground: oklch(0.145 0 0); /* Primary — Frontier teal. Calm, restrained, mid-light. */ --primary: oklch(0.60 0.11 195); --primary-foreground: #ffffff; --accent-glow: oklch(0.60 0.11 195 / 0.10); /* Neutrals */ --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); /* Semantic — reserved for status surfaces, not decoration. */ --success: oklch(0.60 0.13 155); --success-foreground: #ffffff; --success-glow: oklch(0.60 0.13 155 / 0.12); --warning: oklch(0.74 0.14 75); --warning-foreground: oklch(0.205 0 0); --warning-glow: oklch(0.74 0.14 75 / 0.14); --destructive: oklch(0.55 0.22 25); --destructive-foreground: #ffffff; --destructive-glow: oklch(0.55 0.22 25 / 0.10); /* Lines & rings — translucent black so they ride any surface. */ --border: oklch(0 0 0 / 0.08); --input: oklch(0 0 0 / 0.08); --ring: oklch(0.60 0.11 195 / 0.35); /* Chart palette — chart-1 = brand teal, others distinct hues. */ --chart-1: oklch(0.60 0.11 195); --chart-2: oklch(0.60 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.72 0.16 155); --chart-5: oklch(0.78 0.14 80); /* Sidebar surface — slightly off-white. */ --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.60 0.11 195); --sidebar-primary-foreground: #ffffff; --sidebar-accent: oklch(0.94 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0 0 0 / 0.08); --sidebar-ring: oklch(0.60 0.11 195 / 0.35); --shadow-card: var(--shadow-card-light); } /* ---------------------------------------------------------------------- 4. Dark theme — deep cool near-black background. ---------------------------------------------------------------------- */ .dark { --background: oklch(0.145 0.003 270); --foreground: oklch(0.985 0 0); --card: oklch(0.18 0.003 270); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.18 0.003 270); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.60 0.11 195); --primary-foreground: #ffffff; --accent-glow: oklch(0.60 0.11 195 / 0.12); --secondary: oklch(0.21 0.003 270); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.21 0.003 270); --muted-foreground: oklch(0.62 0 0); --accent: oklch(0.21 0.003 270); --accent-foreground: oklch(0.985 0 0); --success: oklch(0.70 0.15 155); --success-foreground: #0a0a0a; --success-glow: oklch(0.70 0.15 155 / 0.14); --warning: oklch(0.80 0.16 75); --warning-foreground: oklch(0.145 0 0); --warning-glow: oklch(0.80 0.16 75 / 0.16); --destructive: oklch(0.66 0.21 25); --destructive-foreground: #ffffff; --destructive-glow: oklch(0.66 0.21 25 / 0.14); --border: oklch(1 0 0 / 0.08); --input: oklch(1 0 0 / 0.10); --ring: oklch(0.60 0.11 195 / 0.35); --chart-1: oklch(0.60 0.11 195); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.72 0.16 155); --chart-5: oklch(0.78 0.14 80); --sidebar: oklch(0.165 0.003 270); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.60 0.11 195); --sidebar-primary-foreground: #ffffff; --sidebar-accent: oklch(0.21 0.003 270); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 0.08); --sidebar-ring: oklch(0.60 0.11 195 / 0.35); --shadow-card: var(--shadow-card-dark); } /* ---------------------------------------------------------------------- 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); }