/* ============================================================ MEDIEGRUPPEN — Design Tokens v2 Inspirasjon: Cure.no / Aleap.no ───────────────────────────────────────────────────────── Bakgrunn: #f7f5f0 cream (ALDRI hvit som base) Primær: #22c55e grønn (aksent/CTA — IKKE bakgrunn) Sekundær: #0f172a deep navy Tekst: #111a12 nesten svart, grønn undertone Nøytraler: varme, cream-baserte — IKKE kalde grå ============================================================ */ :root { /* ─── PRIMÆR — Grønn (aksent/CTA) ─────────────────────── */ --green-50: #f0fdf4; --green-100: #dcfce7; --green-200: #bbf7d0; --green-300: #86efac; --green-400: #4ade80; --green-500: #22c55e; /* Brand CTA */ --green-600: #16a34a; --green-700: #15803d; --green-800: #166534; --green-900: #14532d; --green-950: #052e16; /* ─── SEKUNDÆR — Deep Navy ─────────────────────────────── */ --navy-50: #f0f4ff; --navy-100: #dce8ff; --navy-200: #bad3ff; --navy-300: #85b3ff; --navy-400: #4d8cff; --navy-500: #1d5fff; --navy-600: #0f3fd4; --navy-700: #0a2fa3; --navy-800: #0a2070; --navy-900: #0f172a; /* Brand navy — mørk anker */ --navy-950: #060c1a; /* ─── NØYTRALER — Varm cream-skala ────────────────────── */ --neutral-50: #f7f5f0; /* Cream — base bakgrunn */ --neutral-100: #ede9e2; --neutral-200: #d5cfc6; --neutral-300: #b4ada3; --neutral-400: #908880; --neutral-500: #6e6760; --neutral-600: #524c46; --neutral-700: #3a352f; --neutral-800: #24201b; --neutral-900: #111a12; /* Tekst — nesten svart, grønn undertone */ --neutral-950: #0a0806; /* ─── SEMANTISKE BAKGRUNNER ────────────────────────────── */ --bg-base: #f7f5f0; /* Cream — all sidebakgrunn */ --bg-surface: #ffffff; /* Kort, paneler, modaler */ --bg-surface-alt: #ede9e2; /* Sekundær overflate */ --bg-dark: #0f172a; /* Navy — footer, hero-mørk */ --bg-dark-soft: #1e2d45; /* Litt lysere navy */ --bg-brand-soft: #f0fdf4; /* Lys grønn bakgrunn (badge, tag) */ /* ─── SEMANTISK TEKST ─────────────────────────────────── */ --text-primary: #111a12; /* Nær-svart, grønn undertone */ --text-secondary: #524c46; /* Ingress, meta */ --text-tertiary: #908880; /* Label, placeholder */ --text-inverse: #f7f5f0; /* På navy/mørk bakgrunn */ --text-brand: #15803d; /* Grønn tekst (links, highlights) */ --text-on-brand: #ffffff; /* På grønn knapp */ --text-navy: #0f172a; /* Navy tekst (heading-alternativ) */ /* ─── BRAND / CTA ─────────────────────────────────────── */ --brand: #22c55e; --brand-hover: #16a34a; --brand-active: #15803d; --brand-soft: #f0fdf4; --brand-border: #bbf7d0; /* ─── NAVY ────────────────────────────────────────────── */ --secondary: #0f172a; --secondary-hover: #1e2d45; --secondary-soft: #f0f4ff; --secondary-border: #bad3ff; /* ─── BORDER ──────────────────────────────────────────── */ --border-subtle: #ede9e2; /* Svakest — separatorer */ --border-default: #d5cfc6; /* Standard */ --border-strong: #b4ada3; /* Fremhevet */ --border-brand: #22c55e; --border-dark: #1e2d45; /* ─── TILSTANDSFARGER ─────────────────────────────────── */ --success: #22c55e; --success-soft: #f0fdf4; --success-border: #bbf7d0; --warning: #ca8a04; --warning-soft: #fefce8; --warning-border: #fde047; --error: #dc2626; --error-soft: #fef2f2; --error-border: #fecaca; --info: #1d5fff; --info-soft: #f0f4ff; --info-border: #bad3ff; /* ─── TYPOGRAFI ───────────────────────────────────────── */ --font-display: 'Panchang', serif; --font-heading: 'General Sans', 'Inter', sans-serif; --font-body: 'General Sans', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-widest: 0.1em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ─── MELLOMROM (4px base) ────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ─── BORDER RADIUS ───────────────────────────────────── */ --radius-xs: 0.125rem; /* 2px */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* ─── SKYGGER (varm, navy-basert) ────────────────────── */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.04); --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.10), 0 8px 10px rgba(15, 23, 42, 0.04); --shadow-brand: 0 4px 14px rgba(34, 197, 94, 0.28); --shadow-navy: 0 4px 14px rgba(15, 23, 42, 0.20); /* ─── ANIMASJON ───────────────────────────────────────── */ --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ─── Z-INDEKS ────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 20; --z-sticky: 40; --z-modal: 100; --z-toast: 1000; }