/* Design tokens extracted from https://deltahundeskole.no/ (front page, 2026-10-16).
   Values are computed/declared values actually in use, not Divi defaults left unused. */
:root {
	/* Colors — brand */
	--color-primary: #fe8119;        /* orange: logo, CTA button, "Følg oss" heading */
	--color-primary-hover: #cc8d66;  /* primary button hover */
	--color-accent: #e09900;         /* amber/gold section background */
	--color-accent-contrast: #ffffff;

	/* Colors — neutrals */
	--color-bg: #ffffff;
	--color-bg-dark: #232220;        /* social section, warm near-black */
	--color-bg-footer: #222222;
	--color-footer-bar: rgba(0, 0, 0, .32);
	--color-text: #666666;           /* body text */
	--color-text-heading: #333333;
	--color-text-muted: rgba(0, 0, 0, .4);   /* eyebrow h5 */
	--color-text-on-dark: #ffffff;
	--color-footer-text: #9a9a9a;      /* lightened from #666 for contrast on #222 */
	--color-on-accent: #232220;      /* text on amber; original used white (2.2:1), this is 6:1 */
	--color-hero-bg: #000000;        /* behind hero photo */
	--color-border: #dddddd;
	--color-header-line: rgba(0, 0, 0, .1);

	/* Colors — interactive */
	--color-nav: rgba(0, 0, 0, .6);
	--color-link: #2ea3f2;           /* nav hover/active (Divi default blue; only used there) */
	--color-btn-ghost: rgba(255, 255, 255, .35);   /* secondary button on photo */
	--color-btn-ghost-hover: #d29f68;
	--color-social-bg: rgba(255, 255, 255, .1);

	/* Fonts (Google Fonts: Oswald 500, Lora 500/700, Open Sans 500/600/700) */
	--font-heading: 'Oswald', Helvetica, Arial, sans-serif;  /* uppercase, tracked labels/buttons/h3-h5 */
	--font-display: 'Lora', Georgia, 'Times New Roman', serif; /* h2 and body copy */
	--font-body: 'Lora', Georgia, 'Times New Roman', serif;
	--font-ui: 'Open Sans', Arial, sans-serif;               /* nav, footer, base */

	--weight-regular: 500;           /* site-wide body weight is 500, not 400 */
	--weight-semibold: 600;
	--weight-bold: 700;

	/* Type scale (desktop) */
	--text-h2: 50px;                 /* 36px on phone */
	--text-h2-mobile: 36px;
	--text-h3: 20px;                 /* Oswald, uppercase, 3px tracking */
	--text-h4: 16px;                 /* Oswald, uppercase, 2px tracking */
	--text-h5: 20px;
	--text-lead: 22px;               /* hero paragraph */
	--text-body-lg: 18px;            /* course list intro */
	--text-body: 16px;
	--text-ui: 14px;                 /* nav, footer */
	--text-btn: 16px;

	/* Line heights */
	--lh-h2: 1.5;
	--lh-lead: 2;                    /* 44px on 22px */
	--lh-body: 1.9;                  /* staff blurbs */
	--lh-body-loose: 2;              /* course blurbs */
	--lh-ui: 1.7;                    /* 23.8px on 14px */
	--lh-label: 1.7;

	/* Letter spacing */
	--tracking-btn: 3px;
	--tracking-h3: 3px;
	--tracking-h4: 2px;

	/* Spacing */
	--space-xs: 10px;
	--space-sm: 16px;
	--space-md: 27px;                /* row padding top/bottom */
	--space-lg: 40px;                /* blurb vertical margin */
	--space-xl: 80px;                /* section padding-top */
	--space-section-bottom: 300px;   /* big bottom padding for curved dividers (400px on course section) */
	--gutter: 5.5%;                  /* column gap */
	--gutter-page-mobile: 39px;      /* side margin at 390px (10% of width) */

	/* Layout */
	--container-max: 1080px;
	--container-width: 80%;          /* 1080 at 1440; ~312px at 390 */
	--header-height: 85px;           /* 80px on phone */
	--logo-height: 46px;             /* 39px on phone */
	--divider-height: 100px;         /* curved SVG section dividers */

	/* Shape & depth */
	--radius-btn: 100px;             /* pill */
	--radius-img: 8px;
	--radius-input: 3px;
	--radius-round: 50px;            /* social icon circles */
	--shadow-header: 0 1px 0 rgba(0, 0, 0, .1);
	--shadow-img: 0 40px 60px -35px rgba(0, 0, 0, .3);

	/* Buttons */
	--btn-padding: 4.8px 16px;       /* plus a 15px transparent border → ~ 20px / 31px visual */
	--btn-border-transparent: 15px;
	--btn-transition: background-color 300ms ease;

	/* Social icons */
	--social-size: 72px;             /* 32px glyph box + 20px padding */
}