/* ===== LedKoning Design System — tokens =====
   Vendored from the claude.ai/design project "LedKoning Design System"
   (tokens/colors, typography, spacing, shape, elevation, motion).
   Do not edit here: change the design system and re-import.
   Titillium Web is loaded via <link> in the templates (tokens/fonts.css). */

/* ── Colors ── */
:root{
/* Brand (Huisstijlhandboek 2024) */
--brand:#2C50B4;          /* logo blue, measured #2C4FB2 in the artwork */
--brand-deep:#085ADD;
--brand-medium:#1D6CEA;
--brand-soft:#4386F0;
--brand-light:#699EF4;
--brand-pale:#96BBF7;

/* Role-locked signal colours. Orange = "actie". Green = "nieuw". Never decorative. */
--cta:#FF6600;
--new:#00B900;

/* Site (measured from the LedstripKoning Magento 2 homepage) */
--site-blue:#2D59A6;      /* utility bar, nav links, all headings, footer base */
--site-blue-bright:#177AC4;/* footer gradient end (left → right) */
--site-orange:#FE6300;    /* CTA buttons */
--site-green:#58B73E;     /* "Op voorraad" and USP ticks */
--site-text:#3B3D3F;      /* body copy and prices */
--site-tint:#F2F5FC;      /* alternating section band, search field fill */
--site-border:#DEE2E6;    /* header rule, table and form borders */
--site-card-border:#E5E5E5;/* product card border */

/* Neutrals */
--canvas:#FFFFFF;
--canvas-soft:var(--site-tint);
--ink:var(--site-text);
--ink-soft:#5A5C5F;
--mute:#8A8D91;
--hairline:var(--site-border);
--on-brand:#FFFFFF;

/* Semantic */
--success:var(--site-green);
--error:#F05445;

/* Logo steunkleuren — the eight LED-bar segments in the crown */
--led-dark-blue:#2F5CAA;
--led-light-blue:#4C7DC0;
--led-turquoise:#2DBCA2;
--led-green:#82C55F;
--led-yellow:#F1EC51;
--led-orange:#F7982F;
--led-red:#F05445;
--led-purple:#A54D94;

/* Semantic aliases — prefer these in component code */
--text-body:var(--site-text);
--text-heading:var(--site-blue);
--text-secondary:var(--ink-soft);
--text-muted:var(--mute);
--text-on-brand:var(--on-brand);
--text-link:var(--site-blue);
--text-link-hover:var(--brand-deep);
--surface-page:var(--canvas);
--surface-section:var(--site-tint);
--surface-card:var(--canvas);
--surface-brand:var(--site-blue);
--surface-info:var(--site-tint);
--surface-footer:linear-gradient(100deg,var(--site-blue) 0%,#206CB7 55%,var(--site-blue-bright) 100%);
--border-default:var(--site-border);
--border-card:var(--site-card-border);
--border-strong:var(--site-blue);
--action-cta:var(--site-orange);
--action-cta-hover:#E55800;
--action-cta-press:#CC4E00;
--action-primary:var(--site-blue);
--action-primary-hover:#254A8C;
--action-primary-press:#1E3C73;
--badge-new:var(--new);
--badge-sale:var(--cta);
--focus-ring:var(--brand-medium);
}

/* ── Typography ── */
:root{
--font-display:"Titillium Web","Titilium Web",Helvetica,sans-serif;
--font-body:Arial,Helvetica,sans-serif;

--display-lg-size:48px;--display-lg-weight:700;--display-lg-lh:1.1;
--display-md-size:32px;--display-md-weight:700;--display-md-lh:1.15;
--heading-lg-size:24px;--heading-lg-weight:700;--heading-lg-lh:1.2;
--heading-md-size:20px;--heading-md-weight:600;--heading-md-lh:1.25;
--heading-sm-size:16px;--heading-sm-weight:600;--heading-sm-lh:1.3;
--slogan-size:20px;--slogan-weight:700;--slogan-lh:1.2;
--body-lg-size:18px;--body-lg-weight:400;--body-lg-lh:1.5;
--body-size:16px;--body-weight:400;--body-lh:1.5;
--body-sm-size:14px;--body-sm-weight:400;--body-sm-lh:1.5;
--caption-size:12px;--caption-weight:400;--caption-lh:1.4;
--button-size:16px;--button-weight:700;--button-lh:1.2;
}
.lk-display-lg{font-family:var(--font-display);font-size:var(--display-lg-size);font-weight:var(--display-lg-weight);line-height:var(--display-lg-lh)}
.lk-display-md{font-family:var(--font-display);font-size:var(--display-md-size);font-weight:var(--display-md-weight);line-height:var(--display-md-lh)}
.lk-heading-lg{font-family:var(--font-display);font-size:var(--heading-lg-size);font-weight:var(--heading-lg-weight);line-height:var(--heading-lg-lh)}
.lk-heading-md{font-family:var(--font-display);font-size:var(--heading-md-size);font-weight:var(--heading-md-weight);line-height:var(--heading-md-lh)}
.lk-heading-sm{font-family:var(--font-display);font-size:var(--heading-sm-size);font-weight:var(--heading-sm-weight);line-height:var(--heading-sm-lh)}
.lk-slogan{font-family:var(--font-display);font-size:var(--slogan-size);font-weight:var(--slogan-weight);line-height:var(--slogan-lh);color:var(--cta)}
.lk-body-lg{font-family:var(--font-body);font-size:var(--body-lg-size);line-height:var(--body-lg-lh)}
.lk-body{font-family:var(--font-body);font-size:var(--body-size);line-height:var(--body-lh)}
.lk-body-sm{font-family:var(--font-body);font-size:var(--body-sm-size);line-height:var(--body-sm-lh)}
.lk-caption{font-family:var(--font-body);font-size:var(--caption-size);line-height:var(--caption-lh)}

/* ── Spacing & layout ── */
:root{
--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-xxl:48px;--space-section:64px;

--container-max:1380px;   /* content column (4 product cards + 3 gaps) */
--container-wide:1655px;  /* header, utility bar and footer column */
--grid-gap:30px;          /* product grid gap */
--card-width:322px;       /* product card at 4-across */

--bp-lg:1200px;--bp-md:960px;--bp-sm:640px;--bp-xs:400px;

--control-height:44px;    /* CTA button height, measured */
--utility-height:30px;    /* top utility bar */
--header-height:65px;     /* logo + search row */
--nav-height:43px;        /* category link row */
}

/* ── Shape ── */
:root{
--radius-none:0px;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-full:9999px;
--border-width:1px;
--radius-control:4px;     /* buttons and inputs */
--radius-cta:4px;         /* CTA buttons are NOT pills on the new site */
--radius-card:8px;        /* product cards, photo tiles */
--radius-badge:var(--radius-sm);
}

/* ── Elevation ── */
:root{
--shadow-none:none;
--shadow-soft:0 2px 8px rgba(11,31,58,.08);
--shadow-lift:0 6px 20px rgba(11,31,58,.12);
--elev-card:var(--shadow-none);
--elev-card-hover:var(--shadow-soft);
--elev-dropdown:var(--shadow-soft);
--elev-dialog:var(--shadow-lift);
}

/* ── Motion ── */
:root{
--ease-standard:cubic-bezier(.2,.6,.3,1);
--dur-fast:120ms;
--dur-base:180ms;
--dur-slow:280ms;
--transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
--transition-card:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard);
}