/* Stoke Tiles redesign: design tokens.
   Single source of colour, type and spacing. Never hard code a hex in a template.

   Ported from stoke-tiles-handoff/tokens.css. One change from the handoff copy:
   the base element rules (body, h1-h3) are scoped to `body.st-redesign` so that
   enqueuing this file site wide cannot restyle pages that have not been rebuilt
   yet. T1's brief is "nothing else on the site has changed visually", and an
   unscoped `body {}` rule would have broken that on every page at once.
   Later tasks opt a page in by adding the `st-redesign` body class.
   The `.st-*` classes below are namespaced and safe to ship unscoped: the
   theme's own stylesheet uses no `st-` prefixed selector. */

:root {
  /* Colour */
  --st-ivory: #F6F3EE;      /* page background, footer */
  --st-white: #FFFFFF;      /* cards, fields, alternate sections */
  --st-stone: #EAE4DA;      /* panels, image placeholders */
  --st-linen: #D9CFBF;      /* borders */
  --st-divider: #E3DCD0;    /* light dividers */
  --st-panel: #F1EDE6;      /* card text panel on white sections */
  --st-espresso: #1F1C19;   /* text, 15.3:1 on ivory */
  --st-taupe: #6B645B;      /* secondary text, 5.3:1 on ivory */
  --st-sage: #6B735C;       /* buttons, top bar, green bands; white text 5.0:1 */
  --st-sage-dark: #59604C;  /* button hover */
  --st-sage-tint: #5A6250;  /* image placeholder inside a green band */
  --st-gold: #B08D57;       /* rules and large display only */
  --st-gold-light: #C9A874; /* small labels on dark backgrounds */

  /* The logo's own inks, measured from the client's artwork. Separate
     from the palette above on purpose: the mark is the mark, and the
     buttons and bands should not move with it. */
  --st-logo-sage: #71795F;
  --st-logo-sage-on-dark: #B4B6A7;  /* sage lifted halfway to ivory: 5.8:1+ on the heroes */
  --st-logo-gold: #B59454;          /* the flat gold of "TILES" */
  --st-logo-foil-from: #C59A52;     /* the monogram blocks, lower left */
  --st-logo-foil-mid: #DEB56C;
  --st-logo-foil-to: #FCDC97;       /* upper right */
  --st-bronze: #7A5E33;     /* small labels and links, 5.5:1 on ivory */
  --st-alert: #9B2C1F;      /* errors, 6.8:1 on ivory */
  --st-success: #3F6B4F;    /* success marks */
  --st-on-dark-muted: #B5ACA0;
  --st-on-dark-cream: #E9DCC4;

  /* Focus ring, derived from --st-gold */
  --st-focus: rgba(176, 141, 87, 0.35);

  /* Type */
  --st-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --st-sans: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  --st-display: 104px;  /* hero, desktop; 58px mobile */
  --st-h1: 56px;
  --st-h2: 44px;
  --st-h3: 26px;
  --st-body-l: 18px;
  --st-body: 16px;
  --st-small: 14px;
  --st-label: 13px;
  --st-eyebrow: 12px;

  --st-track-label: 0.16em;   /* buttons and labels */
  --st-track-eyebrow: 0.24em; /* eyebrows. 0.22em reads closer in the footer
                                 and nowhere else; measured, see verify/. */
  --st-track-nav: 0.14em;

  /* Space */
  --st-gutter-desktop: 80px;
  --st-gutter-mobile: 20px;
  --st-section-desktop: 104px;
  --st-section-mobile: 64px;

  /* Controls */
  --st-control-h: 52px;
  --st-control-h-lg: 56px;
  --st-radius: 2px;
  --st-radius-pill: 999px;
  --st-tap-min: 44px;
}

/* Base. Scoped: see the note at the top of this file. */
body.st-redesign {
  margin: 0;
  background: var(--st-ivory);
  color: var(--st-espresso);
  font-family: var(--st-sans);
  font-size: var(--st-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Specificity matters here, so both halves are deliberate.
   `.st-redesign` without the `body` prefix, and the elements inside :where(),
   score (0,1,0) exactly. That is enough to beat the theme's bare `h1 {}` at
   (0,0,1), and it ties with a component class like `.st-h1`, which then wins
   on source order because st-components.css loads after this file.
   Written as `body.st-redesign h1` it scored (0,2,1) and silently overrode
   every heading class on the site: the homepage hero came out at 56px instead
   of 104px. */
.st-redesign :where(h1, h2, h3),
.st-serif {
  font-family: var(--st-serif);
  font-weight: 500;
  line-height: 1.05;
  margin: 0;
}
.st-redesign :where(h1) { font-size: var(--st-h1); }
.st-redesign :where(h2) { font-size: var(--st-h2); }
.st-redesign :where(h3) { font-size: var(--st-h3); line-height: 1.2; }

.st-eyebrow {
  display: block;
  font-family: var(--st-sans);
  font-weight: 400;
  font-size: var(--st-eyebrow);
  letter-spacing: var(--st-track-eyebrow);
  text-transform: uppercase;
  color: var(--st-bronze);
}

.st-price { font-family: var(--st-serif); font-weight: 600; }
.st-muted { color: var(--st-taupe); }

/* Buttons */
.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The design draws 10px between a button's icon and its label. Nothing set
     it, so every icon sat against its word: "[bag]ADD TO BASKET". */
  gap: 10px;
  min-height: var(--st-control-h-lg);
  padding: 0 32px;
  border: 0;
  border-radius: var(--st-radius);
  font-family: var(--st-sans);
  font-size: var(--st-label);
  font-weight: 500;
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.st-btn--primary { background: var(--st-sage); color: var(--st-white); }
.st-btn--primary:hover { background: var(--st-sage-dark); color: var(--st-white); }
.st-btn--secondary { background: transparent; color: var(--st-espresso); border: 1px solid var(--st-espresso); }
.st-btn--on-dark { background: var(--st-ivory); color: var(--st-espresso); }
.st-btn--on-dark-outline { background: transparent; color: var(--st-white); border: 1px solid var(--st-white); }
.st-btn[disabled] { background: var(--st-divider); color: var(--st-taupe); cursor: not-allowed; }

.st-link {
  color: var(--st-bronze);
  font-size: var(--st-label);
  font-weight: 500;
  letter-spacing: var(--st-track-label);
  text-transform: uppercase;
  border-bottom: 1px solid var(--st-gold);
  text-decoration: none;
}
.st-link:hover { color: var(--st-espresso); }

/* Fields */
.st-field {
  height: var(--st-control-h);
  padding: 0 16px;
  background: var(--st-white);
  border: 1px solid var(--st-linen);
  border-radius: var(--st-radius);
  font-family: var(--st-sans);
  font-size: var(--st-body);
  color: var(--st-espresso);
  box-sizing: border-box;
}
.st-field:focus { outline: 3px solid var(--st-focus); border-color: var(--st-espresso); }
.st-field[aria-invalid="true"] { border-color: var(--st-alert); }
.st-field-label { display: block; font-size: var(--st-small); font-weight: 500; margin-bottom: 8px; }
.st-field-error { font-size: 13px; color: var(--st-alert); }

/* Panels and messages: plain, no accent stripes, no info icons */
.st-panel { background: var(--st-white); border: 1px solid var(--st-linen); padding: 20px 24px; }
.st-panel--alert strong { color: var(--st-alert); }

/* Product card */
.st-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.st-card__media { position: relative; overflow: hidden; background: var(--st-stone); }
.st-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms ease; }
.st-card:hover .st-card__media img { transform: scale(1.04); }
.st-card__body { background: var(--st-white); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.st-card__name { font-family: var(--st-serif); font-size: 24px; font-weight: 500; line-height: 1.2; }

@media (max-width: 640px) {
  :root { --st-h1: 40px; --st-h2: 34px; --st-h3: 21px; --st-display: 58px; }
  .st-card__body { padding: 12px 14px; gap: 4px; }
  .st-card__name { font-size: 19px; }
}