/* ==========================================================================
   Mettle Coffee Club — base.css
   CSS Variables + Modern Reset
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Colors */
  --color-bg:          #FFFFFF;
  --color-text:        #111111;
  --color-text-sub:    #555555;
  --color-blue:        #1A4BFF;
  --color-yellow:      #FFD600;
  --color-border:      #E8E8E8;
  --color-bg-sub:      #F5F5F5;
  --color-cta:         #1A4BFF;
  --color-cta-text:    #FFFFFF;
  --color-badge:       #FFD600;
  --color-badge-text:  #111111;

  /* Typography */
  --font-ja:    'Noto Sans JP', sans-serif;
  --font-en:    'Inter', sans-serif;
  --font-base:  var(--font-ja);

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   4rem;       /* 64px */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

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

  --letter-spacing-tight: -0.02em;
  --letter-spacing-base:   0.02em;
  --letter-spacing-wide:   0.08em;
  --letter-spacing-wider:  0.12em;

  /* Spacing (8px base unit) */
  --space-1:   0.5rem;    /* 8px  */
  --space-2:   1rem;      /* 16px */
  --space-3:   1.5rem;    /* 24px */
  --space-4:   2rem;      /* 32px */
  --space-5:   2.5rem;    /* 40px */
  --space-6:   3rem;      /* 48px */
  --space-8:   4rem;      /* 64px */
  --space-10:  5rem;      /* 80px */
  --space-12:  6rem;      /* 96px */
  --space-16:  8rem;      /* 128px */
  --space-20:  10rem;     /* 160px */
  --space-24:  12rem;     /* 192px */

  /* Grid */
  --grid-cols-desktop: 12;
  --grid-cols-sp:       4;
  --grid-gutter:        var(--space-3);
  --container-max:      1280px;
  --container-pad:      var(--space-4);

  /* Border */
  --radius-sm:    2px;
  --radius-base:  4px;
  --radius-md:    8px;
  --radius-lg:    16px;
  --radius-full:  9999px;

  --border-width: 1px;
  --border:       var(--border-width) solid var(--color-border);

  /* Shadow */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.12);

  /* Transition */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Header */
  --header-height-desktop: 80px;
  --header-height-sp:      60px;

  /* Z-index */
  --z-base:    0;
  --z-above:   10;
  --z-drawer:  100;
  --z-header:  200;
  --z-modal:   300;
  --z-toast:   400;
}


/* --------------------------------------------------------------------------
   2. Modern CSS Reset
   -------------------------------------------------------------------------- */

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Root */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
}

/* Body */
body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-en);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

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

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover {
  color: var(--color-blue);
}

a:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Lists */
ul, ol {
  list-style: none;
}

/* Media */
img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
}

input,
textarea,
select {
  background: transparent;
  border: var(--border);
  border-radius: var(--radius-base);
  outline: none;
  transition: border-color var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-blue);
}

textarea {
  resize: vertical;
}

/* Table */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* HR */
hr {
  border: none;
  border-top: var(--border);
  margin: var(--space-6) 0;
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--color-blue);
  padding-left: var(--space-3);
  color: var(--color-text-sub);
  font-style: italic;
}

/* Code */
code, pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: var(--text-sm);
}

pre {
  overflow-x: auto;
  padding: var(--space-3);
  background: var(--color-bg-sub);
  border-radius: var(--radius-md);
}

/* Strong / Em */
strong, b {
  font-weight: var(--font-weight-bold);
}

em, i {
  font-style: italic;
}

/* SVG */
svg {
  overflow: hidden;
}

/* Remove animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   3. Base Typography Scale
   -------------------------------------------------------------------------- */

.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-md    { font-size: var(--text-md); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }
.text-4xl   { font-size: var(--text-4xl); }
.text-5xl   { font-size: var(--text-5xl); }

.font-regular { font-weight: var(--font-weight-regular); }
.font-medium  { font-weight: var(--font-weight-medium); }
.font-bold    { font-weight: var(--font-weight-bold); }

.font-en { font-family: var(--font-en); }
.font-ja { font-family: var(--font-ja); }

.tracking-tight  { letter-spacing: var(--letter-spacing-tight); }
.tracking-wide   { letter-spacing: var(--letter-spacing-wide); }
.tracking-wider  { letter-spacing: var(--letter-spacing-wider); }

.leading-tight  { line-height: var(--line-height-tight); }
.leading-snug   { line-height: var(--line-height-snug); }
.leading-base   { line-height: var(--line-height-base); }
.leading-loose  { line-height: var(--line-height-loose); }

.text-sub { color: var(--color-text-sub); }
.text-blue { color: var(--color-blue); }
.uppercase { text-transform: uppercase; }


/* --------------------------------------------------------------------------
   4. Base Utility Classes
   -------------------------------------------------------------------------- */

/* Display */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline       { display: inline; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* Width / Height */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-auto  { width: auto; }

/* Aspect ratios */
.aspect-square    { aspect-ratio: 1 / 1; }
.aspect-video     { aspect-ratio: 16 / 9; }
.aspect-product   { aspect-ratio: 3 / 4; }

/* Object fit */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* Visually hidden (for accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* --------------------------------------------------------------------------
   5. WordPress Core Class Overrides
   -------------------------------------------------------------------------- */

/* Alignment classes */
.alignnone  { margin: var(--space-2) 0; }
.alignleft  { float: left; margin: 0 var(--space-3) var(--space-2) 0; }
.alignright { float: right; margin: 0 0 var(--space-2) var(--space-3); }
.aligncenter {
  display: block;
  margin: var(--space-2) auto;
}

/* Caption */
.wp-caption {
  max-width: 100%;
}
.wp-caption-text {
  font-size: var(--text-sm);
  color: var(--color-text-sub);
  margin-top: var(--space-1);
  text-align: center;
}

/* Gallery */
.gallery {
  display: grid;
  gap: var(--space-2);
}
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-item img  { width: 100%; height: auto; }

/* WooCommerce screen reader text */
.woocommerce-loop-product__title,
.screen-reader-text {
  /* keep WooCommerce accessible text hidden visually */
}

/* Clearfix */
.cf::after,
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}