/* =========================================================================
   Henroo Pottery — Design Tokens
   Synced from /Henroo Pottery Design System/design_handoff_shop/design_files/colors_and_type.css
   ------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Caveat:wght@500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
  /* Inks */
  --ink:            #1a1714;
  --ink-soft:       #3d342c;
  --ink-muted:      #6b5e54;

  /* Paper / surfaces */
  --paper:          #faf6ef;
  --paper-warm:     #f3ead9;
  --paper-deep:     #e9dcc4;
  --linen:          #ddc9a6;

  /* Clay */
  --clay-50:        #f7e9d9;
  --clay-100:       #ecd1b2;
  --clay-200:       #dcb088;
  --clay-300:       #c4895a;
  --clay-400:       #a96838;
  --clay-500:       #834a23;
  --clay-600:       #5e3318;

  /* Glaze */
  --glaze-sage:     #9bb094;
  --glaze-sage-deep:#6f8a6a;
  --glaze-blue:     #8aa6b3;
  --glaze-blue-deep:#5b7d8c;

  /* Blush */
  --blush-50:       #fbe8e3;
  --blush-200:      #efb9af;
  --blush-400:      #d97b6a;
  --heart-red:      #c23b2c;

  /* Sunshine */
  --sunshine:       #f0c14b;
  --sunshine-deep:  #c89322;

  /* Semantic */
  --fg-1:           var(--ink);
  --fg-2:           var(--ink-soft);
  --fg-3:           var(--ink-muted);
  --fg-on-clay:     var(--paper);
  --fg-link:        var(--clay-500);
  --fg-link-hover:  var(--ink);

  --bg-1:           var(--paper);
  --bg-2:           var(--paper-warm);
  --bg-3:           var(--paper-deep);

  --border-1:       #e3d4b6;
  --border-2:       #c9b48a;
  --border-ink:     var(--ink);

  --accent:         var(--clay-300);
  --accent-deep:    var(--clay-500);
  --accent-soft:    var(--clay-50);

  --success:        var(--glaze-sage-deep);
  --info:           var(--glaze-blue-deep);
  --warn:           var(--sunshine-deep);
  --danger:         var(--heart-red);

  /* Type families */
  --font-brand:     'Caveat Brush', 'Permanent Marker', 'Bradley Hand', cursive;
  --font-display:   'Caveat', 'Bradley Hand', 'Brush Script MT', cursive;
  --font-serif:     'Fraunces', 'Cooper Std', Georgia, 'Times New Roman', serif;
  --font-sans:      'Nunito', 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;

  /* Sizes */
  --text-xs:        12px;
  --text-sm:        14px;
  --text-base:      17px;
  --text-md:        19px;
  --text-lg:        22px;
  --text-xl:        28px;
  --text-2xl:       36px;
  --text-3xl:       48px;
  --text-4xl:       64px;
  --text-5xl:       88px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

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

  --track-tight:    -0.01em;
  --track-normal:   0;
  --track-wide:     0.04em;
  --track-caps:     0.12em;

  /* Spacing */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        24px;
  --space-6:        32px;
  --space-7:        48px;
  --space-8:        64px;
  --space-9:        96px;

  /* Radii */
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      14px;
  --radius-xl:      22px;
  --radius-pebble:  36% 64% 58% 42% / 48% 38% 62% 52%;

  /* Shadows */
  --shadow-1:       0 1px 2px rgba(60, 40, 20, 0.08);
  --shadow-2:       0 4px 14px rgba(60, 40, 20, 0.10);
  --shadow-3:       0 10px 28px rgba(60, 40, 20, 0.14);
  --shadow-press:   inset 0 2px 6px rgba(60, 40, 20, 0.18);

  --border-hand:    2.5px solid var(--ink);

  /* Henroo soft easing */
  --ease-soft:      cubic-bezier(.2, .8, .2, 1);

  /* Site header height (topbar + utility + main) — used as a scroll
     offset on every sticky element so they stop dropping under the
     header on scroll. Measured against the rendered chrome. */
  --site-header-h:  152px;

  /* Touch-target standard (WCAG 2.5.5) */
  --tap-target:     44px;
}

@media (max-width: 860px) {
  :root { --site-header-h: 156px; }   /* utility menu can wrap to 2 lines */
}
@media (max-width: 480px) {
  :root { --site-header-h: 132px; }   /* tighter chrome but still 3 layers */
}

/* Logged-in admins get a 32/46px WP admin bar above the header */
body.admin-bar { --site-header-h: 184px; }
@media (max-width: 860px) { body.admin-bar { --site-header-h: 188px; } }
@media (max-width: 600px) { body.admin-bar { --site-header-h: 178px; } }