/* ============================================================
   Hirono Bamhaus — KRAFT theme tokens
   Phase 1 · scoped to :root[data-theme="kraft"]
   Merge 1:1 into the existing token file.
   Values are canonical per KRAFT_REDESIGN_BRIEF §3.
   Asset paths below are RELATIVE to this file — remap to your
   site's asset root when merging (see manifest.md).
   ============================================================ */

/* Fonts are loaded once, globally (not theme-scoped) so the
   switcher can flip in without a font re-fetch flash. */
@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Kalam:wght@400;700&family=Inter:wght@400;500;600;700&display=swap");

:root[data-theme="kraft"] {

  /* ---- Core palette (brief §3) ---- */
  --kraft-bg:            #AA8452;  /* page/frame — rendered as the real photo below; hex = flat fallback */
  --kraft-paper:         #D1B086;  /* card / hero / showcase / banner base UNDER the grain texture */
  --kraft-ink:           #1E1B18;  /* headlines, ink bars/ribbon, button fills, borders */
  --kraft-accent:        #B5462F;  /* eyebrows, price, stamp/seal border */

  /* ---- Support palette ---- */
  --kraft-brown:         #3A2A18;  /* subtitles, meta on tan cards, shadows */
  --kraft-tan:           #AA8452;  /* warm grain blotch */
  --kraft-cream:         #E1C69B;  /* off-white paper highlight / warm blotch */
  --kraft-cool:          #AF8C5F;  /* cool grain blotch */
  --kraft-offwhite:      #FAF9F5;  /* paper highlight / close-btn / cream text on ink */
  --kraft-maroon:        #5C2B2E;  /* deep accent (washi #4, error) */

  /* ---- Semantic / state ---- */
  --kraft-text:          var(--kraft-ink);
  --kraft-text-muted:    #5C4A34;
  --kraft-price:         var(--kraft-accent);
  --kraft-border:        rgba(30, 27, 24, 0.18);
  --kraft-border-strong: rgba(30, 27, 24, 0.42);
  --kraft-focus:         #B5462F;                 /* focus ring colour */
  --kraft-in-stock:      #4B7A3F;                 /* green tag on kraft */
  --kraft-reserved:      #B98A2E;                 /* amber */
  --kraft-sold:          #8A2C22;                 /* deep red */
  --kraft-preorder:      #B5462F;                 /* accent red */
  --kraft-whatsapp:      #1E7A44;                 /* WhatsApp, desaturated for kraft */

  /* ---- Paper textures (the §7 non-negotiable) ---- */
  --kraft-bg-image:      url("/assets/themes/kraft/paper/kraft-bg.jpg");        /* photographic page background */
  --kraft-paper-grain:   url("/assets/themes/kraft/paper/tag-color-grain.jpg"); /* card/banner surface, tileable */
  --kraft-ink-grain:     url("/assets/themes/kraft/paper/ink-grain.jpg");       /* dark bar surface, tileable */

  /* ---- Motif assets ---- */
  --kraft-washi-1:       url("/assets/themes/kraft/motifs/washi-tape-1.svg");
  --kraft-washi-2:       url("/assets/themes/kraft/motifs/washi-tape-2.svg");
  --kraft-washi-3:       url("/assets/themes/kraft/motifs/washi-tape-3.svg");
  --kraft-washi-4:       url("/assets/themes/kraft/motifs/washi-tape-4.svg");
  --kraft-pin:           url("/assets/themes/kraft/motifs/push-pin-red.svg");
  --kraft-pin-ink:       url("/assets/themes/kraft/motifs/push-pin-ink.svg");
  --kraft-pin-cream:     url("/assets/themes/kraft/motifs/push-pin-cream.svg");
  --kraft-clip:          url("/assets/themes/kraft/motifs/paper-clip.svg");
  --kraft-stamp:         url("/assets/themes/kraft/motifs/stamp-approved.svg");
  --kraft-sparkle:       url("/assets/themes/kraft/motifs/sparkle.svg");
  --kraft-star-divider:  url("/assets/themes/kraft/motifs/star-divider.svg");
  --kraft-torn:          url("/assets/themes/kraft/motifs/torn-edge.svg");
  --kraft-logo-light:    url("/assets/themes/kraft/logo/panda-on-light.svg");
  --kraft-logo-dark:     url("/assets/themes/kraft/logo/panda-on-dark.svg");

  /* ---- Typography ---- */
  --kraft-font-display:  "Permanent Marker", "Comic Sans MS", cursive;   /* brand, hero, section titles */
  --kraft-font-note:     "Kalam", "Comic Sans MS", cursive;              /* eyebrows, captions, badges, marquee, stamp */
  --kraft-font-body:     "Inter", system-ui, -apple-system, sans-serif;  /* body, UI, prices, buttons, meta */

  --kraft-fs-eyebrow:    0.82rem;   /* uppercase Kalam, letter-spacing .14em */
  --kraft-fs-meta:       0.82rem;
  --kraft-fs-body:       1rem;      /* 16px min — avoids iOS zoom */
  --kraft-fs-hero:       clamp(2.4rem, 7vw, 4rem);
  --kraft-fs-title:      clamp(1.8rem, 5vw, 3rem);   /* section titles */

  /* ---- Spacing — strict 4px base scale ---- */
  --kraft-space-1: 4px;
  --kraft-space-2: 8px;
  --kraft-space-3: 12px;
  --kraft-space-4: 16px;
  --kraft-space-5: 24px;
  --kraft-space-6: 32px;
  --kraft-space-7: 48px;
  --kraft-space-8: 64px;
  --kraft-space-9: 96px;
  --kraft-space-10: 128px;

  /* ---- Radii ---- */
  --kraft-radius-card:   10px;   /* 6–12px cards */
  --kraft-radius-photo:  6px;    /* 5–6px product photos */
  --kraft-radius-sm:     6px;
  --kraft-radius-pill:   9999px; /* pills / round avatars */

  /* ---- Shadows (soft dark only, NO glow/blur halos) ---- */
  --kraft-shadow-card:   0 6px 16px rgba(0, 0, 0, 0.30);
  --kraft-shadow-frame:  0 18px 40px rgba(0, 0, 0, 0.22);
  --kraft-shadow-lift:   0 12px 26px rgba(0, 0, 0, 0.34);  /* card hover */
  --kraft-shadow-pin:    0 2px 6px rgba(0, 0, 0, 0.30);    /* pinned photos */

  /* ---- Tape/photo rotations ---- */
  --kraft-tilt-a: -2deg;
  --kraft-tilt-b:  1.5deg;
  --kraft-tilt-c: -1deg;

  /* ---- Motion ---- */
  --kraft-ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --kraft-ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --kraft-dur-fast:  150ms;
  --kraft-dur:       300ms;
  --kraft-dur-slow:  500ms;

  /* ---- Layout ---- */
  --kraft-container:  1200px;   /* content cap */
  --kraft-sheet:      840px;    /* reference sheet width (brief §3) */
  --kraft-tap:        44px;     /* min touch target */
}