/* ==========================================================================
   Jenin — Design tokens
   Source: design_handoff_woocommerce_shop/README.md
   WordPress: enqueue first (wp_enqueue_style 'tj-tokens').
   ========================================================================== */

:root {
  /* Brand */
  --c-butter: #F6DC95;
  --c-butter-line: #E9CB7A;
  --c-mustard: #D9A228;
  --c-mustard-ink: #8A6A12;
  --c-forest: #24411F;
  --c-forest-hover: #3D5A2A;
  --c-forest-deep: #1A2E16;

  /* Surfaces */
  --c-cream: #FBF7EE;
  --c-white: #FFFFFF;
  --c-line: #E8E0CC;
  --c-line-soft: #EFE8D6;
  --c-input-border: #D9CFB6;
  --c-dashed: #C9BE9F;
  --c-ph-1: #EFE6CF;
  --c-ph-2: #E9DFC4;
  --c-img-bg: #EFE9DD;

  /* Text */
  --c-body-2: #3D4A33;
  --c-muted: #5C6652;
  --c-muted-2: #7A7A6A;

  /* Tints */
  --c-tint-warm: #FBF3DA;
  --c-tint-warm-line: #EBD38E;
  --c-footer-accent: #E3E27A;

  /* Feedback */
  --c-error: #A63A24;
  --c-error-bg: #F8E5DF;
  --c-error-line: #E6B8AB;
  --c-error-ink: #7E2A18;
  --c-error-ink-2: #5A2416;

  /* Order status pills */
  --c-status-delivered-bg: #E1E8D6;
  --c-status-delivered-fg: #24411F;
  --c-status-out-bg: #F6DC95;
  --c-status-out-fg: #5A430A;
  --c-status-default-bg: #EFE8D6;
  --c-status-default-fg: #3D4A33;

  /* Type */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Shape */
  --radius-btn: 2px;
  --radius-card: 4px;
  --arch: 999px 999px 6px 6px;

  /* Elevation */
  --shadow-drawer: -16px 0 40px rgba(26, 46, 22, .14);
  --shadow-sticky: 0 -6px 20px rgba(36, 65, 31, .08);
  --shadow-toast: 0 8px 24px rgba(26, 46, 22, .2);
  --shadow-pill: 0 1px 2px rgba(26, 46, 22, .12);
  --overlay: rgba(26, 46, 22, .4);

  /* Layout */
  --container-shop: 1280px;
  --container-cart: 1180px;
  --container-checkout: 1120px;
  --container-narrow: 760px;
  --pad-x: 32px;
  --header-h: 76px;
  --section-pad: 48px var(--pad-x) 96px;
  --hero-pad: 64px var(--pad-x) 56px;
  --h1-size: 64px;
  --h1-product: 48px;
  --grid-min: 230px;
  --grid-gap: 48px 28px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

@media (max-width: 767px) {
  :root {
    --pad-x: 20px;
    --header-h: 60px;
    --section-pad: 28px var(--pad-x) 56px;
    --hero-pad: 32px var(--pad-x) 36px;
    --h1-size: 40px;
    --h1-product: 34px;
    --grid-min: 150px;
    --grid-gap: 28px 14px;
  }
}