:root{
  /* ===== PALETTE ===== */
  --color-brand-600:#51ac5d;
  --color-brand-500:#61CE70;   /* primary action */
  --color-brand-400:#89da94;
  --color-brand-100:#effaf1;

  --gray-900:#283654;          /* headings */
  --gray-700:#535E76;          /* strong body text */
  --gray-600:#7E8698;          /* body text */
  --gray-400:#A9AFBB;          /* muted text/icons */
  --gray-200:#D4D7DD;          /* borders */
  --gray-100:#EAEBEE;          /* dividers/inputs bg */
  --gray-50:#F4F5F6;           /* alt surfaces */
  --white:#FFFFFF;

  --color-success:#0a875a;
  --color-info:#2563eb;
  --color-warning:#f59e0b;
  --color-danger:#dc2626;

  /* Semantic aliases */
  --color-primary:var(--color-brand-500);
  --color-primary-strong:var(--color-brand-600);
  --color-text:var(--gray-600);
  --color-text-strong:var(--gray-700);
  --color-heading:var(--gray-900);
  --color-border:var(--gray-200);
  --color-surface:var(--white);
  --color-surface-alt:var(--gray-50);

  /* ===== TYPOGRAPHY ===== */
  --font-sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;

  --fs-h1:clamp(34px,3.2vw,43px);
  --fs-h2:clamp(27px,2.4vw,34px);
  --fs-h3:clamp(22px,1.8vw,27px);
  --fs-h4:clamp(18px,1.4vw,22px);
  --fs-h5:16px;
  --fs-body:14px;
  --fs-small:13px;
  --lh-tight:1.2;
  --lh-normal:1.5;

  /* ===== SPACING (hybrid: fixed small, fluid large) ===== */
  --space-1:4px;   /* XS */
  --space-2:8px;   /* S */
  --space-3:12px;  /* SM */

  --space-4:clamp(16px,2vw,20px);   /* M */
  --space-5:clamp(24px,3vw,32px);   /* L */
  --space-6:clamp(32px,4vw,48px);   /* XL */
  --space-7:clamp(40px,5vw,64px);   /* XXL */
  --space-8:clamp(56px,7vw,80px);   /* XXXL */

  /* ===== RADII ===== */
  --radius-0:0;
  --radius-sm:8px;            /* inner media (images) */
  --radius-md:12px;           /* inputs/buttons */
  --radius-lg:16px;           /* cards/dialogs */
  --radius-xl:24px;           /* hero/large surfaces */
  --radius-pill:999px;        /* pills/chips */
  --radius-round:50%;         /* avatars */

  /* Component-specific */
  --radius-card:var(--radius-lg);       /* product card outer */
  --radius-card-media:var(--radius-sm); /* product card image */
  --radius-input:var(--radius-md);
  --radius-button:var(--radius-md);
  --radius-badge:var(--radius-pill);

  /* ===== SHADOWS ===== */
  --shadow-sm:0 1px 3px rgba(0,0,0,.06), 0 0 12px -6px rgba(0,0,0,.10);
  --shadow-md:0 2px 8px rgba(0,0,0,.08), 0 0 20px -6px rgba(0,0,0,.12);
  --shadow-lg:0 6px 16px rgba(0,0,0,.10), 0 0 28px -10px rgba(0,0,0,.14);

  
  /* ===== CONTROLS ===== */
  --control-min-height:42px;
/* ===== BORDERS ===== */
  --border-width-1:1px;
  --border-width-2:2px;

  /* ===== FOCUS RING ===== */
  --focus-ring-color:rgba(37,99,235,.6);
  --focus-ring:0 0 0 3px var(--focus-ring-color);

  /* ===== MOTION ===== */
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --duration-100:120ms;
  --duration-200:200ms;

  /* ===== LAYOUT / GRID ===== */
  --container-max:1200px;
  --container-padding:clamp(16px,3vw,32px);
  --grid-gap:var(--space-5);
  --bp-sm:480px;
  --bp-md:768px;
  --bp-lg:1024px;
  --bp-xl:1280px;

  /* ===== COMPONENT TOKENS ===== */
  /* Buttons */
  --btn-bg:var(--color-primary);
  --btn-bg-hover:var(--color-primary-strong);
  --btn-text:#fff;
  --btn-padding-y:10px;
  --btn-padding-x:16px;

  /* Inputs */
  --input-bg:var(--color-surface);
  --input-border:var(--color-border);
  --input-text:var(--color-text);
  --input-placeholder:var(--gray-400);
  --input-padding-y:10px;
  --input-padding-x:12px;

  /* Cards */
  --card-bg:var(--color-surface);
  --card-padding:var(--space-4);
  --card-gap:var(--space-3);
  --card-shadow:var(--shadow-sm);
  --card-border:var(--color-border);
  --card-media-ratio:4/3;

  /* Badges */
  --badge-sale-bg:#45a54b;
  --badge-sale-text:#fff;
  --badge-new-bg:#2563eb;
  --badge-new-text:#fff;
  --badge-lowstock-bg:#f59e0b;
  --badge-lowstock-text:#0c0d0e;

  /* Price */
  --price-main:var(--color-heading);
  --price-sale:var(--color-danger);
  --price-compare:var(--gray-400);

  /* Rating */
  --rating-star:#f59e0b;

  /* Skeleton loader */
  --skeleton-base:var(--gray-100);
  --skeleton-shine:var(--gray-50);

  /* Z-layers */
  --z-dropdown:1000;
  --z-sticky:1020;
  --z-overlay:1050;
  --z-modal:1100;
  --z-toast:1200;
}