/* base.css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* ─── Colour tokens ─────────────────────────────────────────── */
:root {
  --color-bg:            #f7f6f4;
  --color-bg-alt:        #ffffff;
  --color-surface:       #f0efed;
  --color-border:        #e0dedd;
  --color-border-strong: #c4c2bf;

  --color-text:          #1a1917;
  --color-text-secondary:#6b6965;
  --color-text-disabled: #aeaaa6;
  --color-text-inverse:  #f7f6f4;

  --color-accent:        #1a1917;
  --color-accent-hover:  #2e2c29;

  --color-error:         #c0392b;
  --color-success:       #27ae60;

  --color-overlay:       rgba(26, 25, 23, 0.48);
}

/* ─── Typography tokens ─────────────────────────────────────── */
:root {
  --font-family:          -apple-system, BlinkMacSystemFont, 'Inter', Arial, sans-serif;

  --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.75rem;   /* 44px */

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  --line-height-tight:    1.2;
  --line-height-snug:     1.35;
  --line-height-base:     1.6;
  --line-height-loose:    1.8;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-wider:   0.1em;

  --tracking-logo:      0.10em;
  --tracking-display:   0.03em;
  --tracking-eyebrow:   0.08em;
  --tracking-label:     0.03em;
  --tracking-button:    0.04em;

  /* Shared SILK ROAD wordmark — header logo and nav drawer brand. */
  --wordmark-font-size:      0.9375rem;  /* 15px */
  --wordmark-font-weight:    var(--font-weight-medium);
  --wordmark-letter-spacing: var(--tracking-logo);
}

/* ─── Spacing tokens ────────────────────────────────────────── */
:root {
  --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 */
  --space-24:  6rem;      /* 96px */
}

/* ─── Layout tokens ─────────────────────────────────────────── */
:root {
  --container-max:    1200px;
  --container-gutter: var(--space-6);

  /* Shared fluid edge inset for the Header/Hero/New-Arrivals/Footer
     through-grid — deliberately separate from --container-gutter
     (which stays fixed for Catalog/Product/Cart/Checkout/Success) so
     this alignment fix cannot ripple into those pages. */
  --edge-gutter:       clamp(24px, 4vw, 64px);

  /* Repeated Home/chrome frame: [ chrome | C1 | C2 | C3 ] inside G.
     Chrome floor is the menu button (--space-10) so empty chrome tracks
     on Hero/NA/Footer do not collapse and C1 stays the identity axis.
     Gap matches the existing Header menu→logo spacing so the logo does
     not move when flex is replaced by grid. */
  --home-gap:          var(--space-8);
  --home-columns:      minmax(var(--space-10), auto) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);

  --header-height:    60px;
}

/* ─── Border & radius tokens ────────────────────────────────── */
:root {
  --radius-sm:   2px;
  --radius-base: 4px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  --border-width:        1px;
  --border-width-thick:  2px;
}

/* ─── Shadow tokens ─────────────────────────────────────────── */
:root {
  --shadow-sm:  0 1px 3px rgba(26, 25, 23, 0.07);
  --shadow-md:  0 4px 12px rgba(26, 25, 23, 0.10);
  --shadow-lg:  0 12px 32px rgba(26, 25, 23, 0.14);
}

/* ─── Transition tokens ─────────────────────────────────────── */
:root {
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-color:  color var(--transition-base),
                       background-color var(--transition-base),
                       border-color var(--transition-base);
}

/* ─── Z-index tokens ────────────────────────────────────────── */
:root {
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-header:  200;
  --z-modal:   300;
  --z-toast:   400;
}

/* ─── Base element styles ───────────────────────────────────── */

body {
  font-family:      var(--font-family);
  font-size:        var(--font-size-base);
  font-weight:      var(--font-weight-regular);
  line-height:      var(--line-height-base);
  color:            var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-weight:    var(--font-weight-medium);
  line-height:    var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color:          var(--color-text);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-base); }

p {
  color:       var(--color-text);
  line-height: var(--line-height-base);
}

a {
  transition: var(--transition-color);
}

a:hover {
  color: var(--color-text-secondary);
}

strong {
  font-weight: var(--font-weight-semibold);
}

small {
  font-size: var(--font-size-sm);
}