/* =====================================================================
   DARKSTORE design tokens
   ---------------------------------------------------------------------
   Every colour, font size, space, corner radius and animation speed the
   site uses is defined here, once. To restyle the whole site, change a
   value in this file - nothing else needs to be touched.

   Naming:  --c-*  colours      --fs-*  font sizes    --s-*  spacing
            --radius-*  corners  --dur-* animation durations
   ===================================================================== */

:root {
  color-scheme: light;

  /* ---------- Colours ---------- */
  --c-bg:          #ffffff;   /* page background */
  --c-bg-alt:      #f5f5f7;   /* soft grey panels, image backgrounds */
  --c-bg-raised:   #fbfbfd;   /* subtle off-white sections */
  --c-ink:         #0b0b0d;   /* the "dark" in DARKSTORE: dark feature bands */
  --c-ink-2:       #1c1c1f;   /* cards on dark bands */

  --c-text:        #1d1d1f;   /* headings and body text */
  --c-text-2:      #424245;   /* secondary text */
  --c-text-3:      #6e6e73;   /* captions, labels (still passes contrast checks) */
  --c-on-ink:      #f5f5f7;   /* text on dark bands */
  --c-on-ink-2:    #a1a1a6;   /* secondary text on dark bands */

  --c-line:        #d2d2d7;   /* borders */
  --c-line-soft:   #e8e8ed;   /* hairlines between items */

  --c-accent:       #0a5bd3;  /* DARKSTORE blue: links, primary buttons, focus */
  --c-accent-hover: #0849ab;
  --c-accent-soft:  #eaf1fd;  /* tinted backgrounds for selected items */

  --c-success: #1d7a3e;       /* in stock, confirmations */
  --c-warning: #a35200;       /* low stock */
  --c-danger:  #c42b1c;       /* errors, out of stock */
  --c-sale:    #b3261e;       /* sale price */

  /* ---------- Typography ----------
     System fonts: San Francisco on Apple devices, Segoe UI on Windows,
     Roboto on Android. Nothing to download, so text appears instantly. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Sizes. clamp(min, preferred, max) grows smoothly from phone to desktop. */
  --fs-xs:      0.75rem;                                  /* 12px  fine print */
  --fs-sm:      0.875rem;                                 /* 14px  labels, nav */
  --fs-base:    1.0625rem;                                /* 17px  body */
  --fs-md:      1.1875rem;                                /* 19px  lead text */
  --fs-lg:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);   /* card titles */
  --fs-xl:      clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);   /* section headings */
  --fs-2xl:     clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem);   /* page headings */
  --fs-display: clamp(2.6rem, 1.4rem + 5.2vw, 4.75rem);   /* homepage hero */

  --lh-tight: 1.07;  /* big headlines */
  --lh-snug:  1.25;  /* small headings */
  --lh-body:  1.5;   /* paragraphs */

  --tracking-display: -0.03em;  /* large type looks better slightly tighter */
  --tracking-tight:   -0.016em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Spacing (4px steps) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 56px;  --s-10: 72px; --s-11: 96px; --s-12: 128px;

  /* Space between homepage sections: tighter on phones */
  --section-gap: clamp(56px, 4rem + 4vw, 120px);

  /* ---------- Layout ---------- */
  --container: 1200px;                     /* max content width */
  --container-wide: 1440px;
  --gutter: clamp(16px, 4vw, 32px);        /* page side margins */
  --header-h: 52px;                        /* height of the top bar */

  /* ---------- Corners (restrained on purpose) ---------- */
  --radius-s:    8px;
  --radius-m:    14px;
  --radius-l:    20px;
  --radius-pill: 999px;

  /* ---------- Shadows (used sparingly) ---------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 10px 40px rgba(0, 0, 0, 0.10);

  /* ---------- Motion ---------- */
  --ease:     cubic-bezier(0.25, 0.1, 0.25, 1);   /* smooth, natural */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* quick start, gentle stop */
  --dur-1: 150ms;  /* hovers */
  --dur-2: 260ms;  /* menus */
  --dur-3: 420ms;  /* panels, fades */

  /* ---------- Layers ---------- */
  --z-header:  100;
  --z-menu:    150;
  --z-overlay: 200;
  --z-toast:   300;
}

/* People who turn off animations in their phone/computer settings get none. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}