/* ============================================================================
 TRYGG KI i produksjon, GLOBAL BRAND TOKENS
 ----------------------------------------------------------------------------
 Single source of truth for the brand. Every color, font, radius, shadow and
 spacing value used across the site is defined here as a CSS custom property.
 Change a value here and it cascades everywhere. Do not hard-code brand
 colors in styles.css, always reference a token from this file.
 ============================================================================ */

:root {
 /* ---- Brand colors, primary palette ---------------------------------- */
 --brand-green: #2E7D47; /* primary brand / CTA / checkmarks */
 --brand-green-deep: #1F5E37; /* deeper forest (secondary buttons) */
 --brand-green-hover: #25683A; /* CTA hover */
 --brand-blue: #0F5B7E; /* secondary accent (implementation/steps) */
 --brand-gold: #A47B2C; /* tertiary accent (governance) */

 /* ---- Buttons ----------------------------------------------------------
 On DARK surfaces -> mint fill + dark navy ink (pops on navy).
 On LIGHT surfaces -> solid brand green + white ink. */
 --btn-mint: #A9D9AB; /* mint CTA on dark (nav/hero) */
 --btn-mint-hover: #BCE5BE;
 --btn-mint-ink: #06152B; /* dark navy label + arrow on mint */

 /* ---- Brand colors, neutrals / surfaces ------------------------------ */
 --navy-950: #00081A; /* deepest navy (gradient floor) */
 --navy-900: #020F27; /* dark sections base (hero, nav, trust) */
 --navy-850: #051730; /* raised navy panel / trust-bar band */
 --navy-700: #16314f; /* hairline borders on dark */

 --ink: #0E2440; /* primary heading text on light */
 --ink-soft: #1B2A41; /* strong body text on light */
 --slate: #51607A; /* body text on light */
 --muted: #8EA0B9; /* muted labels, outline icons */
 --muted-on-dark: #A9B7CC; /* body text on dark */
 --faint-on-dark: #7E8EA8; /* muted labels on dark */

 --white: #FFFFFF;
 --offwhite: #F6F9FF; /* near-white used in icons/on-dark text */
 --paper: #F6F9FC; /* light section background */
 --line: #E5EBF2; /* hairline borders on light */

 /* ---- Tinted surfaces (pillar cards / soft panels) -------------------- */
 --tint-green: #EDF5EE;
 --tint-green-line: #D9E9DD;
 --tint-blue: #EEF5FA;
 --tint-blue-line: #DCEAF2;
 --tint-gold: #F8F1E4;
 --tint-gold-line: #ECDFC8;

 /* Icon chips (small rounded squares behind pillar icons) */
 --chip-green: #E1ECE0;
 --chip-blue: #E5ECF4;
 --chip-gold: #F3EBD9;

 /* Sage panel (continuous governance banner) */
 --tint-sage: #E9F0E9;
 --tint-sage-line: #D7E5D7;

 /* Card surfaces */
 --card-line: #E7ECF3; /* thin card borders on white */
 --navy-banner-line: #21456e; /* hairline inside dark banners */

 /* ---- Microsoft brand (Copilot block) --------------------------------- */
 --ms-red: #F25022;
 --ms-green: #7FBA00;
 --ms-blue: #00A4EF;
 --ms-yellow: #FFB900;

 /* ---- Typography ------------------------------------------------------- */
 --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 Helvetica, Arial, sans-serif;
 /* Elegant serif used for all display headings (hero + section titles) */
 --font-display: "Playfair Display", Georgia, "Times New Roman", serif;

 --fw-regular: 400;
 --fw-medium: 500;
 --fw-semibold: 600;
 --fw-bold: 700;
 --fw-extrabold: 800;

 /* Fluid type scale */
 --fs-eyebrow: 0.78rem; /* uppercase labels */
 --fs-small: 0.86rem;
 --fs-body: 1rem;
 --fs-lead: 1.12rem;
 --fs-h3: 1.18rem;
 --fs-h2: clamp(1.6rem, 1.05rem + 1.75vw, 2.1rem);
 --fs-hero: clamp(2.5rem, 1.45rem + 4.25vw, 4.25rem);

 --lh-tight: 1.06;
 --lh-snug: 1.28;
 --lh-body: 1.62;
 --tracking-eyebrow: 0.14em;
 --tracking-wide: 0.04em;

 /* ---- Radii ------------------------------------------------------------ */
 --r-sm: 8px;
 --r-md: 12px;
 --r-lg: 16px;
 --r-xl: 22px;
 --r-pill: 999px;

 /* ---- Shadows ---------------------------------------------------------- */
 --shadow-sm: 0 1px 2px rgba(6, 21, 43, 0.06);
 --shadow-md: 0 10px 30px rgba(6, 21, 43, 0.08);
 --shadow-lg: 0 24px 60px rgba(6, 21, 43, 0.14);
 --shadow-btn: 0 8px 22px rgba(46, 125, 71, 0.28);

 /* ---- Layout ----------------------------------------------------------- */
 --container: 1200px;
 --container-narrow: 1140px;
 --gutter: clamp(20px, 4.6vw, 52px);
 --section-y: clamp(20px, 2vw, 32px);

 /* ---- Motion ----------------------------------------------------------- */
 --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
 --dur: 0.2s;
}