/* Enkel Natur designtokens. Genererad ur 04-dev-room/Enkel-Natur/Design-System/tokens/. */
:root{
/* Base — warm neutrals (linen, birch, charcoal) */
--en-linen-50:#FBF9F6;
--en-linen-100:#F6F3EE;
--en-linen-200:#EFEAE2;
--en-linen-300:#E4DED3;
--en-linen-400:#CFC7BA;
--en-stone-500:#9A958B;
--en-stone-600:#6F6C64;
--en-charcoal-700:#4A4C45;
--en-charcoal-800:#2B2D28;
--en-charcoal-900:#1E201B;
--en-white:#FFFFFF;
/* Primary — sage (from the logo's watercolour flower + script) */
--en-sage-50:#F1F4EC;
--en-sage-100:#E3EAD9;
--en-sage-200:#C9D6B8;
--en-sage-300:#A8BC8F;
--en-sage-400:#88A26D;
--en-sage-500:#6B8A52;
--en-sage-600:#587442;
--en-sage-700:#465D35;
--en-sage-800:#34462A;
/* Accent — terracotta / amber (amber glass bottles, warm light) */
--en-terra-100:#F4E5DD;
--en-terra-300:#DDAE97;
--en-terra-500:#B5654A;
--en-terra-600:#9A523A;
--en-terra-700:#7C412E;
/* Semantic status */
--en-ochre-500:#C08A3E;
--en-ochre-100:#F6EBD8;
--en-red-500:#A8442E;
--en-red-100:#F5E1DA;
--en-slate-500:#5B7C8A;
--en-slate-100:#E1EAEE;

/* Semantic aliases */
--bg-page:var(--en-linen-100);
--bg-page-alt:var(--en-linen-50);
--surface-card:var(--en-white);
--surface-muted:var(--en-linen-200);
--surface-sage:var(--en-sage-50);
--surface-inverse:var(--en-charcoal-900);

--text-heading:var(--en-charcoal-900);
--text-body:var(--en-charcoal-700);
--text-muted:var(--en-stone-600);
--text-subtle:var(--en-stone-500);
--text-inverse:var(--en-linen-50);
--text-brand:var(--en-sage-600);
--text-accent:var(--en-terra-600);
--text-link:var(--en-sage-700);

--border-default:var(--en-linen-300);
--border-strong:var(--en-linen-400);
--border-focus:var(--en-sage-500);

--brand-primary:var(--en-sage-600);
--brand-primary-hover:var(--en-sage-700);
--brand-primary-active:var(--en-sage-800);
--brand-primary-soft:var(--en-sage-100);
--brand-accent:var(--en-terra-500);
--brand-accent-hover:var(--en-terra-600);
--brand-accent-soft:var(--en-terra-100);

--status-success:var(--en-sage-600);
--status-success-soft:var(--en-sage-100);
--status-warning:var(--en-ochre-500);
--status-warning-soft:var(--en-ochre-100);
--status-error:var(--en-red-500);
--status-error-soft:var(--en-red-100);
--status-info:var(--en-slate-500);
--status-info-soft:var(--en-slate-100);
--status-sale:var(--en-terra-500);
}

:root{
--font-serif-display:"Newsreader",Georgia,"Times New Roman",serif;
--font-sans-body:"Manrope","Helvetica Neue",Arial,sans-serif;
/* Type scale (px) */
--text-display-xl:64px;
--text-display-lg:48px;
--text-display-md:36px;
--text-display-sm:28px;
--text-title:22px;
--text-lead:18px;
--text-base:16px;
--text-small:14px;
--text-caption:12px;
--text-eyebrow:11px;
/* Line heights */
--leading-display:1.08;
--leading-heading:1.2;
--leading-body:1.6;
--leading-tight:1.3;
/* Tracking */
--tracking-display:-0.01em;
--tracking-eyebrow:0.14em;
--tracking-button:0.06em;
/* Weights */
--weight-display:300;
--weight-display-strong:400;
--weight-body:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
}

:root{
/* 4px base scale */
--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;
--space-32:128px;
/* Layout */
--container-max:1280px;
--container-narrow:720px;
--gutter:var(--space-6);
--gutter-desktop:var(--space-12);
--section-gap:var(--space-24);
--nav-height:72px;
/* Radii — near-sharp; the brand is calm and architectural, not bubbly */
--radius-xs:2px;
--radius-sm:4px;
--radius-md:6px;
--radius-pill:999px;
--radius-none:0;
}

:root{
/* Shadows — barely there; elevation mostly via tone, not shadow */
--shadow-xs:0 1px 2px rgba(30,32,27,0.06);
--shadow-sm:0 2px 8px rgba(30,32,27,0.06);
--shadow-md:0 8px 24px rgba(30,32,27,0.08);
--shadow-lg:0 24px 48px rgba(30,32,27,0.12);
/* Image protection gradient (for text on photos) */
--gradient-protect:linear-gradient(180deg,rgba(30,32,27,0) 30%,rgba(30,32,27,0.55) 100%);/* @kind other */
--gradient-protect-left:linear-gradient(90deg,rgba(30,32,27,0.5) 0%,rgba(30,32,27,0) 60%);/* @kind other */
/* Motion */
--ease-out:cubic-bezier(0.2,0.7,0.2,1);/* @kind other */
--ease-in-out:cubic-bezier(0.65,0,0.35,1);/* @kind other */
--duration-fast:150ms;/* @kind other */
--duration-base:250ms;/* @kind other */
--duration-slow:450ms;/* @kind other */
/* Interaction */
--hover-opacity:0.8;/* @kind other */
--image-hover-scale:1.03;/* @kind other */
--focus-ring:0 0 0 3px rgba(107,138,82,0.35);
--backdrop-blur:blur(12px);/* @kind other */
--overlay-scrim:rgba(30,32,27,0.4);
}