/* ============================================================
   PUSTAKONE DESIGN TOKENS — variables.css
   SOURCE OF TRUTH for all visual values in this theme.
   Do not override these in component files — change here only.
   Values are CLIENT APPROVED per 00-SOURCE-OF-TRUTH/ARCHITECTURE
   documents. Any change requires an Architecture Change Request
   (see IMPLEMENTATION-GATE.md Rule 6).
   ============================================================ */

:root {

  /* ── COLOURS ─────────────────────────────────────────── */
  --color-primary:      #0057C8;   /* Bright blue — buttons, links, active states */
  --color-primary-dark: #0044A0;   /* Hover state for primary */
  --color-accent:       #FF8A00;   /* Orange — badges, highlights, savings */
  --color-dark:         #111827;   /* Near-black — footer, strong headings */
  --color-text:         #4B5563;   /* Body text — paragraphs, labels */
  --color-text-light:   #9CA3AF;   /* Muted text — secondary labels, placeholders (never as body text) */
  --color-bg:           #F8FAFC;   /* Page background */
  --color-white:        #FFFFFF;   /* Pure white */
  --color-border:       #E5E7EB;   /* Dividers, input borders */
  --color-success:      #16A34A;   /* In stock, success messages */
  --color-error:        #DC2626;   /* Errors, out of stock */
  --color-warning:      #D97706;   /* Low stock warnings */

  /* ── SHADOWS ─────────────────────────────────────────── */
  --shadow-sm:   0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 8px 25px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 16px 40px rgba(0, 0, 0, 0.12);

  /* ── BORDER RADIUS ───────────────────────────────────── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 50px;
  --radius-full: 9999px;

  /* ── TYPOGRAPHY ──────────────────────────────────────── */
  --font-primary:  Inter, 'Segoe UI', Arial, sans-serif; /* Delivery method: pending — see PROJECT-EXECUTION-STATE.md Active Blockers */
  --font-size-xs:  0.75rem;    /* 12px */
  --font-size-sm:  0.875rem;   /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md:  1.125rem;   /* 18px */
  --font-size-lg:  1.25rem;    /* 20px */
  --font-size-xl:  1.5rem;     /* 24px */
  --font-size-2xl: 2rem;       /* 32px */
  --font-size-3xl: 2.5rem;     /* 40px */
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* ── SPACING ─────────────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* ── LAYOUT ──────────────────────────────────────────── */
  --container:       1280px;
  --container-sm:    960px;
  --header-height:   100px;

  /* ── TRANSITIONS ─────────────────────────────────────── */
  --transition:       all 0.3s ease;
  --transition-fast:  all 0.15s ease;
  --transition-slow:  all 0.5s ease;

  /* ── ICONS (client-specified sizes) ─────────────────── */
  --icon-hci:   1.25rem;   /* Homepage Category Icon */
  --icon-cat:   2rem;      /* Category Card Icon */
  --icon-sm:    1rem;
  --icon-md:    1.5rem;
  --icon-lg:    2rem;
}