/* ============================================================
   tokens.css — Logitech Pakistan design system
   Single source of truth for all design tokens.
   See DESIGN_SYSTEM.md for the constitution.
   ============================================================ */

:root {
  /* === Colors: Backgrounds ============================== */
  --color-bg-page:        #FFFFFF;
  --color-bg-subtle:      #FCFCFD;
  --color-bg-surface:     #F9FAFB;
  --color-bg-inverse:     #000000;
  --color-bg-inverse-soft:#1A1A1A;

  /* === Colors: Borders ================================== */
  --color-border-subtle:  #E5E5E5;
  --color-border-strong:  #CCCCCC;

  /* === Colors: Text ===================================== */
  --color-text-primary:   #000000;
  --color-text-secondary: #5A5A5A;
  --color-text-tertiary:  #999999;
  --color-text-inverse:   #FFFFFF;

  /* === Colors: CTA ====================================== */
  --color-cta-primary-bg:        #000000;
  --color-cta-primary-bg-hover:  #1A1A1A;
  --color-cta-primary-text:      #FFFFFF;
  --color-cta-secondary-border:  #000000;
  --color-cta-secondary-bg-hover:#F7F7F7;

  /* === Colors: Brand accents ============================ */
  --color-accent-mint:      #00ECC2; /* Logi sub-brand */
  --color-accent-mint-dark: #00B89E;
  --color-accent-lime:      #D5F23F; /* COD-only */
  --color-accent-g-blue:    #00B8FC; /* Gaming sections only */

  /* === Colors: Semantic ================================= */
  --color-success: #16A34A;
  --color-warning: #D97706;
  --color-error:   #D63638;
  --color-info:    #2563EB;

  /* === Colors: WhatsApp brand =========================== */
  --color-whatsapp: #25D366;

  /* === Type: Family ===================================== */
  --font-heading: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                  Monaco, Consolas, monospace;

  /* === Type: Sizes (mobile-first; @media adjusts) ======= */
  --fs-display:  2.5rem;   /* 40px mobile / 64px desktop */
  --fs-h1:       2rem;     /* 32 / 48 */
  --fs-h2:       1.75rem;  /* 28 / 36 */
  --fs-h3:       1.375rem; /* 22 / 24 */
  --fs-h4:       1.125rem; /* 18 / 20 */
  --fs-h5:       1rem;     /* 16 / 18 */
  --fs-h6:       0.875rem; /* 14 / 16 */
  --fs-body-lg:  1.0625rem;/* 17 / 18 */
  --fs-body:     1rem;     /* 16 */
  --fs-body-sm:  0.875rem; /* 14 */
  --fs-caption:  0.75rem;  /* 12 */
  --fs-button:   1rem;     /* 16 */
  --fs-overline: 0.75rem;  /* 12 caps */

  /* === Type: Line-heights =============================== */
  --lh-display: 1.05;
  --lh-h1:      1.1;
  --lh-h2:      1.15;
  --lh-h3:      1.2;
  --lh-h4:      1.3;
  --lh-h5:      1.35;
  --lh-h6:      1.4;
  --lh-body:    1.6;
  --lh-tight:   1;

  /* === Type: Letter-spacing ============================= */
  --ls-display: -0.02em;
  --ls-h1:      -0.02em;
  --ls-h2:      -0.015em;
  --ls-h3:      -0.01em;
  --ls-h4:      0;
  --ls-overline:0.08em;
  --ls-button:  0.02em;
  --ls-caps:    0.05em;

  /* === Type: Weights ==================================== */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-xbold:    800;

  /* === Spacing scale (4px base) ========================= */
  --space-0:    0;
  --space-1:    0.25rem;  /* 4 */
  --space-2:    0.5rem;   /* 8 */
  --space-3:    0.75rem;  /* 12 */
  --space-4:    1rem;     /* 16 */
  --space-5:    1.25rem;  /* 20 */
  --space-6:    1.5rem;   /* 24 */
  --space-7:    1.75rem;  /* 28 */
  --space-8:    2rem;     /* 32 */
  --space-9:    2.25rem;  /* 36 */
  --space-10:   2.5rem;   /* 40 */
  --space-11:   2.75rem;  /* 44 */
  --space-12:   3rem;     /* 48 */
  --space-16:   4rem;     /* 64 */
  --space-20:   5rem;     /* 80 */
  --space-24:   6rem;     /* 96 */
  --space-32:   8rem;     /* 128 */

  /* === Containers ======================================= */
  --container-narrow:  720px;
  --container-default: 1280px;
  --container-wide:    1440px;

  /* === Gutter (mobile default) ========================== */
  --gutter: var(--space-4);

  /* === Radii ============================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* === Shadows ========================================== */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.16);

  /* === Motion =========================================== */
  --motion-fast:  100ms ease-out;
  --motion-base:  200ms ease-out;
  --motion-slow:  300ms ease-out;
  --motion-slower:500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* === Z-index scale ==================================== */
  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

  /* === Layout dimensions ================================= */
  --header-height-mobile:  56px;
  --header-height-desktop: 72px;
  --announcement-height:   36px;
  --touch-target-min:      48px;

  /* === Focus ring ======================================= */
  --focus-ring-color:  var(--color-accent-mint);
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;
}

/* === Tablet =========================================== */
@media (min-width: 768px) {
  :root {
    --gutter: var(--space-6);
    --fs-h6: 1rem;          /* 16 */
    --fs-body-lg: 1.125rem; /* 18 */
  }
}

/* === Desktop ========================================== */
@media (min-width: 1024px) {
  :root {
    --gutter: var(--space-10);
    --fs-display:1rem;
    --fs-display: 4rem;     /* 64 */
    --fs-h1:      3rem;     /* 48 */
    --fs-h2:      2.25rem;  /* 36 */
    --fs-h3:      1.5rem;   /* 24 */
    --fs-h4:      1.25rem;  /* 20 */
    --fs-h5:      1.125rem; /* 18 */
  }
}

/* === Wide ============================================= */
@media (min-width: 1440px) {
  :root {
    --gutter: var(--space-16);
  }
}

/* === Reduced motion =================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:   0ms;
    --motion-base:   0ms;
    --motion-slow:   0ms;
    --motion-slower: 0ms;
  }
}