/*
 * Elysian Level 2 - Design System 2.0 (v5.20.0)
 * Canonical design tokens and compatibility aliases.
 * Loaded after main.css and Level 1 guardrails so legacy components inherit
 * a single source of truth without a visual rewrite.
 */
:root{
  /* Brand / interface colour system */
  --ely-color-bg:#fff;
  --ely-color-section:#f5f5f5;
  --ely-color-surface:#fff;
  --ely-color-surface-soft:#f8f8f8;
  --ely-color-image-bg:#f4f4f4;
  --ely-color-ink:#111;
  --ely-color-ink-soft:#333;
  --ely-color-muted:#666;
  --ely-color-accent:#000;
  --ely-color-action:#000;
  --ely-color-footer:#000;
  --ely-color-on-dark:#fff;
  --ely-color-line:rgba(0,0,0,.12);
  --ely-color-line-strong:rgba(0,0,0,.24);

  /* Typography */
  --ely-font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --ely-font-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ely-text-xs:.75rem;
  --ely-text-sm:.8125rem;
  --ely-text-md:.96875rem;
  --ely-text-lg:1.125rem;
  --ely-text-xl:1.375rem;
  --ely-leading-tight:1.15;
  --ely-leading-copy:1.62;
  --ely-weight-regular:400;
  --ely-weight-medium:500;
  --ely-weight-semibold:600;
  --ely-weight-bold:700;

  /* Spacing - 4px based scale */
  --ely-space-1:4px;
  --ely-space-2:8px;
  --ely-space-3:12px;
  --ely-space-4:16px;
  --ely-space-5:20px;
  --ely-space-6:24px;
  --ely-space-7:28px;
  --ely-space-8:32px;
  --ely-space-10:40px;
  --ely-space-12:48px;
  --ely-space-14:56px;
  --ely-space-16:64px;
  --ely-space-20:80px;
  --ely-space-24:96px;

  /* Shape */
  --ely-radius-xs:6px;
  --ely-radius-sm:10px;
  --ely-radius-md:14px;
  --ely-radius-lg:18px;
  --ely-radius-xl:30px;
  --ely-radius-pill:999px;

  /* Elevation */
  --ely-shadow-sm:0 8px 24px rgba(0,0,0,.06);
  --ely-shadow-md:0 14px 36px rgba(0,0,0,.08);
  --ely-shadow-lg:0 20px 55px rgba(0,0,0,.08);

  /* Layout and controls */
  --ely-layout-max:1240px;
  --ely-layout-gutter:24px;
  --ely-layout-gutter-mobile:15px;
  --ely-layout-gutter-tight:13px;
  --ely-control-height-sm:40px;
  --ely-control-height:44px;
  --ely-control-height-lg:50px;
  --ely-motion-fast:160ms ease;
  --ely-motion-standard:220ms ease;

  /* Compatibility bridge: current selectors keep their approved appearance. */
  --ely-bg:var(--ely-color-bg);
  --ely-section:var(--ely-color-section);
  --ely-surface:var(--ely-color-surface);
  --ely-surface-soft:var(--ely-color-surface-soft);
  --ely-image-bg:var(--ely-color-image-bg);
  --ely-ink:var(--ely-color-ink);
  --ely-ink-soft:var(--ely-color-ink-soft);
  --ely-muted:var(--ely-color-muted);
  --ely-accent:var(--ely-color-accent);
  --ely-cta:var(--ely-color-action);
  --ely-line:var(--ely-color-line);
  --ely-line-strong:var(--ely-color-line-strong);
  --ely-footer:var(--ely-color-footer);
  --ely-on-dark:var(--ely-color-on-dark);
  --ely-shadow:var(--ely-shadow-md);
  --elysian-layout-max:var(--ely-layout-max);
  --elysian-layout-gutter:var(--ely-layout-gutter);
  --elysian-page-gutter:var(--ely-layout-gutter);
  --elysian-page-gutter-mobile:var(--ely-layout-gutter-mobile);
  --elysian-page-gutter-tight:var(--ely-layout-gutter-tight);
  --elysian-control-min:var(--ely-control-height);
  --elysian-ui-transition:var(--ely-motion-fast);
  --ely-ui-ink:var(--ely-color-ink);
  --ely-ui-muted:var(--ely-color-muted);
  --ely-ui-radius-md:var(--ely-radius-md);
  --ink:var(--ely-color-ink);
  --ink-soft:var(--ely-color-ink-soft);
  --muted:var(--ely-color-muted);
  --paper:var(--ely-color-bg);
  --surface-2:var(--ely-color-surface);
  --rose:var(--ely-color-accent);
  --rose-dark:var(--ely-color-action);
  --line:var(--ely-color-line);
  --radius-sm:var(--ely-radius-sm);
  --radius:var(--ely-radius-lg);
  --radius-lg:var(--ely-radius-xl);
  --shadow:var(--ely-shadow-lg);
  --sans:var(--ely-font-sans);
  --serif:var(--ely-font-serif);

  /* Historical token families remain supported through the canonical system. */
  --v35-ink:var(--ely-color-ink);
  --v35-ink-soft:var(--ely-color-ink-soft);
  --v35-paper:var(--ely-color-bg);
  --v35-blush:var(--ely-color-surface);
  --v35-rose:var(--ely-color-accent);
  --v35-line:var(--ely-color-line);
  --v35-dark:var(--ely-color-action);
  --v4-ink:var(--ely-color-ink);
  --v4-cream:var(--ely-color-section);
  --v4-clay:var(--ely-color-accent);
  --v4-line:var(--ely-color-line);
  --v4-muted:var(--ely-color-muted);
  --v4-dark:var(--ely-color-action);
  --v48-ink:var(--ely-color-ink);
  --v48-muted:var(--ely-color-muted);
  --v48-paper:var(--ely-color-bg);
  --v48-blush:var(--ely-color-section);
  --v48-rose-dark:var(--ely-color-action);
  --v48-line:var(--ely-color-line);
  --v48-deep:var(--ely-color-footer);
  --v50-ink:var(--ely-color-ink);
  --v50-muted:var(--ely-color-muted);
  --v50-soft:var(--ely-color-section);
  --v50-line:var(--ely-color-line);
  --v50-dark:var(--ely-color-footer);
}

/* Shared primitives: intentionally limited to properties already standardized in the theme. */
body.elysian-level2-design-system{
  font-family:var(--ely-font-sans)!important;
  color:var(--ely-color-ink)!important;
  line-height:var(--ely-leading-copy)!important;
}

body.elysian-level2-design-system :where(h1,h2,h3,h4,h5,h6){
  text-wrap:balance;
}

body.elysian-level2-design-system :where(p,li,dd){
  text-wrap:pretty;
}

body.elysian-level2-design-system :where(.shell,.elysian-shell){
  width:min(100% - (2 * var(--ely-layout-gutter)),var(--ely-layout-max));
}

/* Do not change local component heights; unify the repeated pill/control language only. */
body.elysian-level2-design-system :where(
  .button-primary,
  .button-secondary,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .wc-block-components-button
){
  font-family:var(--ely-font-sans);
  border-radius:var(--ely-radius-pill);
}

body.elysian-level2-design-system :where(input,select,textarea,button){
  font-family:var(--ely-font-sans);
}

/* Semantic utility hooks for subsequent levels and template work. */
.ely-ds-surface{background:var(--ely-color-surface);color:var(--ely-color-ink);}
.ely-ds-muted{color:var(--ely-color-muted);}
.ely-ds-divider{border-color:var(--ely-color-line);}
.ely-ds-elevated{box-shadow:var(--ely-shadow-md);}
.ely-ds-container{width:min(100% - (2 * var(--ely-layout-gutter)),var(--ely-layout-max));margin-inline:auto;}

@media(max-width:1000px){
  :root{--ely-layout-gutter:20px;}
}
@media(max-width:800px){
  :root{--ely-layout-gutter:16px;}
}