/* =========================================================
   Pique Parlour — Design Tokens
   Inspired by gelato pique cafe (not affiliated, not copied)
   ========================================================= */

/* Brand fonts — user-uploaded files in fonts/ */
/* (commercial brand fonts removed for standalone export; Google Fonts substitutes are used) */

/* Google Fonts — IBM Plex Serif (per user request) + Japanese support */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;400;500;600&family=Caveat:wght@400;500&display=swap');

:root {
  /* ---------- Color — raw palette ---------- */
  --cream:       #FBF5EC;  /* default page bg */
  --milk:        #FFFDF8;  /* card surface */
  --ivory:       #F3E9D8;  /* warm neutral fill */
  --sand:        #E8DAC2;  /* quiet dividing tone */

  --strawberry:  #F2B6C1;  /* primary accent */
  --strawberry-deep: #E38899;
  --peach:       #F7CBA6;
  --peach-deep:  #E9A67D;
  --butter:      #F5E4A3;
  --butter-deep: #E7C96E;
  --mint:        #BFE3C9;
  --mint-deep:   #8EC4A1;
  --powder:      #C9DCEA;
  --powder-deep: #9DBCD2;
  --lavender:    #DCCEE6;
  --caramel:     #C9936A;
  --caramel-deep:#A46F49;

  --espresso:    #3D2A22;  /* our "black" */
  --mocha:       #6B4A3A;  /* body secondary */
  --cocoa:       #8E6E5E;  /* muted text */
  --ash:         #B8A99C;  /* disabled / placeholder */

  /* ---------- Semantic color roles ---------- */
  --bg:           var(--cream);
  --bg-soft:      var(--ivory);
  --surface:      var(--milk);
  --surface-raise:#FFFFFF;
  --hairline:     rgba(61, 42, 34, 0.08);
  --hairline-str: rgba(61, 42, 34, 0.16);

  --fg:           var(--espresso);
  --fg-1:         var(--espresso);
  --fg-2:         var(--mocha);
  --fg-3:         var(--cocoa);
  --fg-muted:     var(--ash);
  --fg-on-accent: var(--milk);

  --accent:       var(--strawberry);
  --accent-deep:  var(--strawberry-deep);
  --accent-warm:  var(--peach);
  --accent-cool:  var(--mint);

  --success:      #8EC4A1;
  --warning:      #E7C96E;
  --danger:       #D97A7A;

  /* ---------- Type ---------- */
  --ff-display:   'IBM Plex Serif', 'STIX Two Text', 'Noto Serif JP', ui-serif, Georgia, serif;
  --ff-serif-jp:  'Noto Serif JP', 'STIX Two Text', serif;
  --ff-sans:      'SFNS', 'Geneva', 'Noto Sans JP', -apple-system, system-ui, sans-serif;
  --ff-sans-jp:   'Noto Sans JP', 'SFNS', sans-serif;
  --ff-hand:      'Academy Engraved LET', 'Caveat', 'Noto Serif JP', cursive;
  --ff-mono:      'Monaco', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale — generous, lyrical */
  --fs-xs:        11px;
  --fs-sm:        13px;
  --fs-base:      15px;
  --fs-md:        17px;
  --fs-lg:        20px;
  --fs-xl:        24px;
  --fs-2xl:       32px;
  --fs-3xl:       44px;
  --fs-4xl:       60px;
  --fs-5xl:       84px;

  --lh-tight:     1.2;
  --lh-snug:      1.35;
  --lh-normal:    1.55;
  --lh-loose:     1.75;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.16em;

  /* ---------- Spacing (4px base, lyrical scale) ---------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  /* ---------- Radius ---------- */
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   40px;
  --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(61, 42, 34, 0.06);
  --sh-2: 0 4px 12px -6px rgba(61, 42, 34, 0.14);
  --sh-3: 0 8px 24px -16px rgba(61, 42, 34, 0.18);
  --sh-4: 0 18px 48px -24px rgba(61, 42, 34, 0.22);
  --sh-inner: inset 0 2px 4px rgba(61, 42, 34, 0.08);

  /* ---------- Motion ---------- */
  --ease-soft:   cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.2, .64, 1);
  --dur-fast:    180ms;
  --dur-base:    360ms;
  --dur-slow:    560ms;

  /* ---------- Layout ---------- */
  --page-max:   1200px;
  --gutter:     32px;
  --gutter-sm:  16px;
}

/* ---------- Semantic element styles ---------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — italic serif wordmark (the signature mood) */
.pp-display {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

/* Headlines */
h1, .pp-h1 {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h2, .pp-h2 {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h3, .pp-h3 {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .pp-h4 {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Japanese headline variant — use Mincho for presence */
.pp-h-jp {
  font-family: var(--ff-serif-jp);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Eyebrow — small uppercase tag above a heading */
.pp-eyebrow {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--caramel-deep);
}

/* Body */
p, .pp-body {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.pp-body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}
.pp-small, small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

/* Japanese body */
.pp-body-jp {
  font-family: var(--ff-sans-jp);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

/* Hand-written accent (use sparingly — menu notes, signatures) */
.pp-hand {
  font-family: var(--ff-hand);
  font-weight: 400;
  font-size: var(--fs-xl);
  color: var(--caramel-deep);
}

/* Code */
code, .pp-mono {
  font-family: var(--ff-mono);
  font-size: 0.92em;
  background: var(--ivory);
  padding: 2px 6px;
  border-radius: 6px;
}

/* Links — hand-drawn underline on hover */
a {
  color: var(--fg-1);
  text-decoration: none;
  background-image: linear-gradient(var(--strawberry-deep), var(--strawberry-deep));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-base) var(--ease-soft);
}
a:hover {
  background-size: 100% 1px;
}

/* Focus ring — cream-offset strawberry */
:focus-visible {
  outline: 2px solid rgba(242, 182, 193, 0.65);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

/* Selection */
::selection {
  background: var(--strawberry);
  color: var(--espresso);
}