:root {
  /* ── Color Palette ── */
  --sd-primary: #155e52;
  --sd-primary-strong: #0f4b42;
  --sd-primary-soft: #e8f4f1;
  --sd-secondary: #1e7a6e;
  --sd-accent: #d4a94f;
  --sd-accent-soft: #fbf2dd;
  --sd-bg: #f4efe6;
  --sd-surface: #ffffff;
  --sd-surface-soft: #faf8f3;
  --sd-heading: #14231f;
  --sd-text: #5f6f69;
  --sd-muted: #80918b;
  --sd-border: #d7e1dc;
  --sd-border-strong: #c1d0c8;
  --sd-success: #237a5c;
  --sd-warning: #c1841f;
  --sd-danger: #b94a48;
  --sd-info: #1E7A6E;

  /* ── Shadows ── */
  --sd-shadow-sm: 0 6px 18px rgba(20, 35, 31, 0.06);
  --sd-shadow-md: 0 14px 34px rgba(20, 35, 31, 0.08);
  --sd-shadow-lg: 0 24px 54px rgba(20, 35, 31, 0.12);

  /* ── Border Radius ── */
  --sd-radius-sm: 10px;
  --sd-radius: 16px;
  --sd-radius-lg: 22px;

  /* ── Spacing Scale ── */
  --sd-space-1: 0.25rem;
  --sd-space-2: 0.5rem;
  --sd-space-3: 0.75rem;
  --sd-space-4: 1rem;
  --sd-space-5: 1.25rem;
  --sd-space-6: 1.5rem;
  --sd-space-8: 2rem;
  --sd-space-10: 2.5rem;

  /* ── Layout: Sidebars & Topbars ── */
  --sd-admin-sidebar-w: clamp(220px, 16vw, 284px);
  --sd-admin-topbar-h: 72px;
  --sd-app-sidebar-w: clamp(220px, 16vw, 270px);
  --sd-app-topbar-h: 62px;
  --sd-bottomnav-h: 68px;

  /* ── Typography ── */
  --sd-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Motion ── */
  --sd-transition: 0.22s ease;

  /* ── Content Max-Widths ── */
  --sd-page-max: 1160px;       /* Store storefronts & public pages */
  --sd-content-max: 1400px;    /* Admin & seller dashboards */

  /* ── Floating Button Stack ── */
  --sd-float-bottom: 104px;    /* Base offset from bottom for floating buttons */
  --sd-float-wa-right: 20px;   /* WhatsApp button right offset */
  --sd-float-btt-right: 82px;  /* Back-to-top button right offset */
  --sd-float-btt-size: 44px;   /* Back-to-top button size */

  /* ── Breakpoint Reference Tokens ──
       Use these as documentation + for calc() where needed.
       NOTE: CSS vars inside @media queries require modern browsers
       (Chrome 105+, Firefox 101+, Safari 16+). For older targets,
       use literal values in media queries but keep these for reference. */
  --bp-xl: 1400px;
  --bp-lg: 992px;
  --bp-md: 860px;
  --bp-sm: 640px;
  --bp-xs: 480px;
  --bp-2xs: 400px;
}

/* ── Reverse aliases: public → app bridge ──
   Allows public pages that use --s-* tokens to also have --sd-* available. */
:root {
  --s-p: var(--sd-primary);
  --s-ph: var(--sd-primary-strong);
  --s-ps: var(--sd-primary-soft);
  --s-s: var(--sd-secondary);
  --s-a: var(--sd-accent);
  --s-h: var(--sd-heading);
  --s-t: var(--sd-text);
  --s-m: var(--sd-muted);
  --s-bg: var(--sd-bg);
  --s-sf: var(--sd-surface);
  --s-bd: var(--sd-border);
}