/* WindBreak Security — design tokens Source: WindBreak Design System (tokens/colors.css, typography.css, spacing.css, effects.css, base.css). Keep this file in sync with the design system; put site-specific styles in site.css. */ /* Fonts: Sora (display) is loaded from Google Fonts in each page . Manrope (body) ships with the site. */ @font-face{font-family:"Manrope";src:url("../assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");font-weight:200 800;font-style:normal;font-display:swap} :root{ /* Brand (from brand sheet) */ --wb-evergreen:#0D2B24; --wb-mint:#3DDC97; --wb-pine:#1B9E6A; --wb-frost:#F1F5F3; --wb-slate:#52606D; /* Evergreen ramp */ --wb-evergreen-900:#07181A; --wb-evergreen-800:#0D2B24; --wb-evergreen-700:#143D33; --wb-evergreen-600:#1C5245; /* Pine / mint ramp */ --wb-pine-700:#157C53; --wb-pine-600:#1B9E6A; --wb-pine-500:#22B87B; --wb-mint-400:#3DDC97; --wb-mint-300:#7CE9B9; --wb-mint-200:#B9F3D8; --wb-mint-100:#E3FAEF; /* Neutrals (cool, green-tinted) */ --wb-white:#FFFFFF; --wb-neutral-50:#F7F9F8; --wb-neutral-100:#F1F5F3; --wb-neutral-200:#E2E8E5; --wb-neutral-300:#D5DFDA; --wb-neutral-400:#AEBAB5; --wb-neutral-500:#7C8891; --wb-neutral-600:#52606D; --wb-neutral-700:#3A4650; --wb-neutral-800:#1F2A31; /* Semantic status */ --wb-success:#1B9E6A; --wb-success-bg:#E3FAEF; --wb-warning:#D08A0B; --wb-warning-bg:#FFF4DC; --wb-danger:#D4483D; --wb-danger-bg:#FCE9E7; --wb-info:#2F6FD1; --wb-info-bg:#E8F0FC; /* Semantic aliases: light surface */ --bg-page:var(--wb-frost); --bg-card:var(--wb-white); --bg-sunken:var(--wb-neutral-100); --bg-inverse:var(--wb-evergreen); --bg-accent-soft:var(--wb-mint-100); --text-heading:var(--wb-evergreen); --text-body:var(--wb-slate); --text-muted:var(--wb-neutral-500); --text-on-dark:var(--wb-white); --text-on-dark-muted:rgba(255,255,255,.7); --text-on-accent:var(--wb-evergreen); --text-link:var(--wb-pine); --accent:var(--wb-pine); --accent-hover:var(--wb-pine-700); --accent-on-dark:var(--wb-mint); --accent-on-dark-hover:var(--wb-mint-300); --border-subtle:var(--wb-neutral-200); --border-default:var(--wb-neutral-300); --border-strong:var(--wb-neutral-400); --focus-ring:0 0 0 3px rgba(27,158,106,.35); --focus-ring-on-dark:0 0 0 3px rgba(61,220,151,.45); /* Typography */ --font-display:"Sora","Manrope",system-ui,sans-serif; --font-body:"Manrope",system-ui,sans-serif; --font-mono:ui-monospace,"SF Mono",Menlo,monospace; --weight-display:700; --weight-heading:600; --weight-body:500; --weight-strong:700; --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:17px; --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:48px; --text-5xl:60px; --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.6; --tracking-display:-0.02em; --tracking-heading:-0.01em; --tracking-body:0; --tracking-eyebrow:0.14em; /* Spacing (4px base) */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; /* Radii: rounded everywhere */ --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-2xl:28px; --radius-pill:999px; /* Layout */ --container-max:1200px; --container-narrow:760px; --control-h-sm:32px; --control-h-md:40px; --control-h-lg:48px; --sidebar-w:248px; --topbar-h:60px; /* Effects */ --shadow-xs:0 1px 2px rgba(13,43,36,.06); --shadow-sm:0 1px 3px rgba(13,43,36,.08),0 1px 2px rgba(13,43,36,.04); --shadow-md:0 4px 12px rgba(13,43,36,.08),0 1px 3px rgba(13,43,36,.05); --shadow-lg:0 12px 32px rgba(13,43,36,.12),0 2px 6px rgba(13,43,36,.06); --shadow-mint:0 8px 24px rgba(61,220,151,.28); --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --duration-fast:120ms; --duration-base:180ms; --duration-slow:280ms; --blur-glass:12px; } /* Base (from tokens/base.css) */ html{font-family:var(--font-body);font-weight:var(--weight-body);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-body);background:var(--bg-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body{margin:0} h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--weight-display);letter-spacing:var(--tracking-display);line-height:var(--leading-tight);margin:0} h4{font-weight:var(--weight-heading);letter-spacing:var(--tracking-heading)} p{margin:0} a{color:var(--text-link);text-decoration:none;text-underline-offset:3px;transition:color var(--duration-fast) var(--ease-out)} a:hover{color:var(--accent-hover);text-decoration:underline} strong,b{font-weight:var(--weight-strong);color:var(--text-heading)} ::selection{background:var(--wb-mint-200);color:var(--wb-evergreen)} :focus-visible{outline:none;box-shadow:var(--focus-ring)}