/*
 * LedCommerce design tokens.
 * Single source for color, type, spacing, radius, elevation and motion.
 * Components read semantic tokens (--lc-surface, --lc-text ...); surface themes
 * (.lc-theme-dark / .lc-theme-light) re-map them so the same component works on
 * both dark and light sections. See docs/ui/design-system.md.
 *
 * Breakpoints (media queries cannot read custom properties, keep in sync):
 *   sm 640px · md 768px · lg 1024px · xl 1280px
 */
:root {
  /* Palette — neutral graphite */
  --lc-graphite-990: #08090a;
  --lc-graphite-950: #0c0d0f;
  --lc-graphite-900: #121417;
  --lc-graphite-850: #171a1e;
  --lc-graphite-800: #1d2126;
  --lc-graphite-700: #2a2f36;
  --lc-graphite-600: #3a4049;
  --lc-graphite-500: #5b626c;
  --lc-graphite-400: #8a919b;
  --lc-graphite-300: #a9afb7;
  --lc-graphite-200: #cdd1d6;
  --lc-graphite-100: #e6e8eb;

  /* Palette — architectural paper */
  --lc-paper-0: #ffffff;
  --lc-paper-50: #f6f5f1;
  --lc-paper-100: #eeece6;
  --lc-paper-200: #e2dfd7;
  --lc-paper-300: #cfcbc1;

  /* Palette — signal accent (single accent system) */
  --lc-signal-300: #ffa36b;
  --lc-signal-400: #ff8442;
  --lc-signal-500: #ff6b1a;
  --lc-signal-600: #e2550b;
  --lc-signal-700: #b93f07;

  /* Status */
  --lc-ok-500: #3fb27f;
  --lc-ok-700: #1f7a52;
  --lc-warn-500: #e0a33a;
  --lc-warn-700: #8a5a06;
  --lc-danger-500: #ec5b5b;
  --lc-danger-700: #b42323;
  --lc-info-500: #6f9cf0;
  --lc-info-700: #2c5cc4;

  /* Typography */
  --lc-font-sans: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lc-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --lc-text-2xs: 0.6875rem;
  --lc-text-xs: 0.75rem;
  --lc-text-sm: 0.875rem;
  --lc-text-base: 1rem;
  --lc-text-md: 1.0625rem;
  --lc-text-lg: 1.1875rem;
  --lc-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --lc-text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --lc-text-3xl: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem);
  --lc-text-4xl: clamp(2.25rem, 1.45rem + 3.3vw, 3.75rem);
  --lc-text-display: clamp(2.5rem, 1.35rem + 4.6vw, 4.75rem);

  --lc-leading-tight: 1.08;
  --lc-leading-snug: 1.25;
  --lc-leading-normal: 1.55;
  --lc-tracking-tight: -0.018em;
  --lc-tracking-display: -0.032em;
  --lc-tracking-caps: 0.12em;

  --lc-weight-regular: 400;
  --lc-weight-medium: 500;
  --lc-weight-semibold: 600;
  --lc-weight-bold: 700;

  /* Spacing — 4px base */
  --lc-space-0: 0;
  --lc-space-1: 0.25rem;
  --lc-space-2: 0.5rem;
  --lc-space-3: 0.75rem;
  --lc-space-4: 1rem;
  --lc-space-5: 1.25rem;
  --lc-space-6: 1.5rem;
  --lc-space-8: 2rem;
  --lc-space-10: 2.5rem;
  --lc-space-12: 3rem;
  --lc-space-16: 4rem;
  --lc-space-20: 5rem;
  --lc-space-24: 6rem;
  --lc-section-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --lc-section-y-compact: clamp(2.75rem, 2rem + 3vw, 4.5rem);

  /* Layout */
  --lc-container: 1240px;
  --lc-container-narrow: 860px;
  --lc-gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --lc-header-h: 4.25rem;

  /* Radius — architectural, restrained */
  --lc-radius-xs: 3px;
  --lc-radius-sm: 6px;
  --lc-radius-md: 10px;
  --lc-radius-lg: 14px;
  --lc-radius-xl: 20px;
  --lc-radius-pill: 999px;

  /* Elevation */
  --lc-shadow-sm: 0 1px 2px rgba(8, 9, 10, 0.08), 0 1px 1px rgba(8, 9, 10, 0.04);
  --lc-shadow-md: 0 6px 18px -6px rgba(8, 9, 10, 0.18), 0 2px 6px rgba(8, 9, 10, 0.06);
  --lc-shadow-lg: 0 28px 60px -24px rgba(8, 9, 10, 0.45), 0 10px 24px -12px rgba(8, 9, 10, 0.2);

  /* Motion — short, decelerating, never bouncy. See motion.css. */
  --lc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --lc-dur-fast: 140ms;
  --lc-dur: 220ms;
  --lc-dur-slow: 520ms;
  --lc-dur-reveal: 760ms;
  --lc-dur-scene: 1200ms;
  --lc-stagger: 70ms;
  --lc-reveal-distance: 18px;

  /* Focus */
  --lc-focus-ring: 0 0 0 2px var(--lc-graphite-950), 0 0 0 4px var(--lc-signal-400);

  /* Z layers */
  --lc-z-header: 40;
  --lc-z-drawer: 60;
  --lc-z-skip: 100;
}

/* Semantic surface themes */
:root,
.lc-theme-dark {
  --lc-surface: var(--lc-graphite-950);
  --lc-surface-sunken: var(--lc-graphite-990);
  --lc-surface-raised: var(--lc-graphite-900);
  --lc-surface-overlay: var(--lc-graphite-850);
  --lc-surface-hover: var(--lc-graphite-800);
  --lc-text: #f2f3f4;
  --lc-text-muted: #a3aab3;
  --lc-text-subtle: #7f8791;
  --lc-border: rgba(255, 255, 255, 0.1);
  --lc-border-strong: rgba(255, 255, 255, 0.2);
  --lc-accent: var(--lc-signal-500);
  --lc-accent-hover: var(--lc-signal-400);
  --lc-accent-text: var(--lc-signal-400);
  --lc-on-accent: #120a05;
  --lc-btn-solid-bg: #f4f3ef;
  --lc-btn-solid-fg: var(--lc-graphite-950);
  --lc-pixel-dot: rgba(255, 255, 255, 0.07);
  --lc-ok-text: #6fd3a4;
  --lc-warn-text: #f0c26d;
  --lc-danger-text: #ff8f8f;
  --lc-info-text: #9fbdf6;
  /* Store-layer surfaces resolve to their dark equivalents inside dark sections of a store page. */
  --lc-store-canvas: var(--lc-graphite-900);
  --lc-store-media: var(--lc-graphite-990);
  --lc-store-line: rgba(255, 255, 255, 0.1);
  --lc-shadow-card: none;
  --lc-shadow-card-hover: var(--lc-shadow-md);
  color-scheme: dark;
}

.lc-theme-light {
  --lc-surface: var(--lc-paper-50);
  --lc-surface-sunken: var(--lc-paper-100);
  --lc-surface-raised: var(--lc-paper-0);
  --lc-surface-overlay: var(--lc-paper-0);
  --lc-surface-hover: var(--lc-paper-100);
  --lc-text: var(--lc-graphite-950);
  --lc-text-muted: #4d535c;
  --lc-text-subtle: #6a707a;
  --lc-border: rgba(12, 13, 15, 0.12);
  --lc-border-strong: rgba(12, 13, 15, 0.24);
  --lc-accent: var(--lc-signal-500);
  --lc-accent-hover: var(--lc-signal-600);
  --lc-accent-text: var(--lc-signal-700);
  --lc-on-accent: #120a05;
  --lc-btn-solid-bg: var(--lc-graphite-950);
  --lc-btn-solid-fg: #f6f5f1;
  --lc-pixel-dot: rgba(12, 13, 15, 0.08);
  --lc-ok-text: var(--lc-ok-700);
  --lc-warn-text: var(--lc-warn-700);
  --lc-danger-text: var(--lc-danger-700);
  --lc-info-text: var(--lc-info-700);
  --lc-focus-ring: 0 0 0 2px var(--lc-paper-50), 0 0 0 4px var(--lc-signal-600);
  color-scheme: light;
}

/* A themed block also sets its own text colour. `color` inherits as an already resolved value, so a
   .lc-theme-dark panel inside a light store page (installation plan, compare tray, home hero drawing) would
   otherwise keep the page's dark ink on its dark surface. Components that set their own colour still win. */
.lc-theme-dark,
.lc-theme-light {
  color: var(--lc-text);
}

.lc-theme-paper {
  --lc-surface: var(--lc-paper-100);
}

/*
 * Store theme — the light, neutral commerce surface of the shopping pages (home, catalog, product,
 * cart, checkout, account, solutions, support, control-system browsing) and of the site header.
 * A page opts in with ViewData["StoreTheme"] = true; the layout then puts this class on <body>.
 * Pages that do not opt in (configurator, solution designer, installation result, 3D viewer) keep the
 * dark :root theme untouched. Dark technical sections inside a store page say .lc-theme-dark.
 */
.lc-theme-store,
.lc-theme-store .lc-theme-light {
  --lc-store-canvas: #f4f5f7;
  --lc-store-media: #f2f3f5;
  --lc-store-line: #e3e5e9;
  --lc-store-ink: #0e1013;
  --lc-surface: #ffffff;
  --lc-surface-sunken: #f4f5f7;
  --lc-surface-raised: #ffffff;
  --lc-surface-overlay: #ffffff;
  --lc-surface-hover: #f1f2f4;
  --lc-text: #0e1013;
  --lc-text-muted: #474d56;
  --lc-text-subtle: #646a73;
  --lc-border: rgba(14, 16, 19, 0.11);
  --lc-border-strong: rgba(14, 16, 19, 0.22);
  --lc-accent: var(--lc-signal-500);
  --lc-accent-hover: var(--lc-signal-400);
  --lc-accent-text: var(--lc-signal-700);
  --lc-on-accent: #120a05;
  --lc-btn-solid-bg: #0e1013;
  --lc-btn-solid-fg: #ffffff;
  --lc-pixel-dot: rgba(14, 16, 19, 0.07);
  --lc-ok-text: #19704a;
  --lc-warn-text: var(--lc-warn-700);
  --lc-danger-text: var(--lc-danger-700);
  --lc-info-text: var(--lc-info-700);
  --lc-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--lc-signal-600);
  --lc-shadow-card: 0 1px 2px rgba(14, 16, 19, 0.05), 0 8px 24px -16px rgba(14, 16, 19, 0.18);
  --lc-shadow-card-hover: 0 2px 4px rgba(14, 16, 19, 0.06), 0 18px 40px -20px rgba(14, 16, 19, 0.28);
  color-scheme: light;
}

/* A neutral grey band between white store sections; the paper sections of the older pages become one. */
.lc-theme-store .lc-store-band,
.lc-store-band.lc-theme-store,
.lc-theme-store .lc-theme-paper { --lc-surface: var(--lc-store-canvas); }