/*
 * Halfpix palette - Fresh jade (新青瓷) v1.2.31
 *
 * GENERATED FILE - DO NOT EDIT.
 * Source: design/palette.json   Build: design/build-palette.ps1
 *
 * A neutral foundation with a brighter jade accent. The neutrals carry no hue, so nothing on the page competes with the pottery in the photographs.
 *
 * Loaded last, after design-tokens.css, style.css, pages.css and parity.css,
 * each of which declares its own :root colour block. This file overrides the
 * values only - every token name and every usage stays where it was, so
 * rolling back a scheme means not loading this one stylesheet.
 */

:root {
  --cream: #f7f8f9;  /* Page background. */
  --porcelain: #ffffff;  /* Cards, panels, inputs, sheets. */
  --ink: #15181d;  /* Body text and headings. */
  --muted: #5b6572;  /* Secondary text, meta lines, captions. */
  --line: #e3e6ea;  /* Borders and dividers. */
  --neutral-soft: #eef0f2;  /* Image placeholder and avatar fallback. Deliberately neutral: a tinted placeholder fights the ceramics it frames. */
  --celadon: #0a7c5a;  /* Buttons, links, active tabs, selected states. */
  --celadon-deep: #065f45;  /* Hover, pressed, eyebrow text. */
  --celadon-soft: #e3f5ee;  /* Chip and badge background, soft tints. */
  --celadon-on-soft: #076a4d;  /* Text that sits on primarySoft. */
  --sage: #3e8f70;  /* A lighter jade for secondary marks and charts. */
  --terracotta: #b4552b;  /* The real clay colour, for piece and firing accents. */
  --terracotta-soft: #fbede4;  /* Warm tint behind terracotta marks. */
  --kiln-blue: #2d6e9e;  /* Kiln and firing data, secondary containers. */
  --navy-soft: #e7f0f8;  /* Tint behind kiln marks. */
  --green-soft: #eaf4ef;  /* Subtle section surface. */
  --danger: #b3261e;  /* Destructive actions and errors. */
  --warning: #8a5700;  /* Warnings and pending states. */

  /* --clay stays pointed at the primary because the shared component rules
     fill every button with var(--clay). Only values change here; rewiring
     what a name means is a behaviour change, not a colour change. */
  --clay: var(--celadon);
  --clay-dark: var(--celadon-deep);
  --clay-soft: var(--neutral-soft);
  --coral-soft: var(--terracotta-soft);

  --shadow-sm: 0 4px 16px rgb(21 24 29 / 0.045);
  --shadow-md: 0 8px 24px rgb(21 24 29 / 0.065);
  --shadow: var(--shadow-md);

  /* Aliases used by style.css, pages.css and the WordPress shell. */
  --hp-canvas: var(--cream);
  --hp-surface: var(--porcelain);
  --hp-surface-soft: var(--green-soft);
  --hp-ink: var(--ink);
  --hp-muted: var(--muted);
  --hp-line: var(--line);
  --hp-primary: var(--celadon);
  --hp-primary-deep: var(--celadon-deep);
  --hp-primary-soft: var(--celadon-soft);
  --hp-clay: var(--terracotta);
  --hp-clay-soft: var(--terracotta-soft);
  --hp-danger: var(--danger);
  --hp-shadow: var(--shadow);
  --hp-green: var(--celadon);
  --hp-deep: var(--celadon-deep);
  --hp-soft: var(--celadon-soft);
  --hp-bg: var(--cream);
  --hp-card: var(--porcelain);
  --hp-blue: var(--kiln-blue);
  --hp-warn: var(--warning);
}

/* The old body background layered two tinted radial washes over the canvas,
   which is part of why the page read as muddy. A flat canvas leaves the
   photographs as the only source of colour. */
html { background: var(--cream); }
body { background: var(--cream); }

/* Chips carry their own darker text; otherwise they inherit the accent on its
   own tint, which is too close to read comfortably. */
.hp-chip,
.content-badge,
.discover-chip { color: var(--celadon-on-soft); }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--celadon) 55%, transparent);
  outline-offset: 3px;
}

:where(
  .hp-field,
  .creation-section,
  .checkout-section,
  .astra-field-grid,
  .astra-order-note,
  .address-form,
  .discover-filters
) :is(input, select, textarea):focus {
  border-color: var(--celadon);
  outline: 3px solid color-mix(in srgb, var(--celadon) 22%, transparent);
}