/* =========================================================
   kuchilog.blog — Design tokens
   Gourmet Magazine meets Social Media (Bon Appétit × Instagram × Kawaii)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800;900&family=Noto+Serif+JP:wght@500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---------- BRAND PALETTE (from brief) ---------- */
  --coral:           #FF5733;
  --coral-hi:        #FF7A5A;
  --coral-lo:        #E63E1E;
  --coral-soft:      #FFE4DB;
  --coral-glow:      rgba(255, 87, 51, 0.28);

  --cream:           #FFF8F0;
  --cream-deep:      #FBEFE0;

  --burgundy:        #8B1A1A;
  --burgundy-deep:   #5E0F0F;
  --burgundy-soft:   #F3D9D9;

  --gold:            #FFB700;
  --gold-hi:         #FFC93C;
  --gold-soft:       #FFF1C2;

  --ink:             #1A1A1A;
  --ink-2:           #3a3a3a;
  --ink-3:           #6a6a6a;
  --ink-4:           #9a9a9a;
  --ink-5:           #c8c8c0;

  --bg-0:            #FAFAF7;
  --bg-1:            #FFFFFF;
  --bg-2:            #F5F2EC;
  --bg-3:            #EBE7DE;

  --rakuten:         #BF0000;

  /* ---------- STROKES ---------- */
  --stroke-1:        rgba(26, 26, 26, 0.06);
  --stroke-2:        rgba(26, 26, 26, 0.12);
  --stroke-3:        rgba(26, 26, 26, 0.22);
  --stroke-coral:    rgba(255, 87, 51, 0.35);

  /* ---------- SEMANTIC ---------- */
  --tag-hot:         #FF3B30;
  --tag-new:         #FF5733;
  --tag-pick:        #FFB700;
  --tag-gift:        #8B1A1A;

  /* ---------- GRADIENTS ---------- */
  --grad-cta:          linear-gradient(180deg, #FF7A5A 0%, #FF5733 100%);
  --grad-coral:        linear-gradient(135deg, #FF7A5A 0%, #FF5733 50%, #E63E1E 100%);
  --grad-sunset:       linear-gradient(135deg, #FFB700 0%, #FF5733 60%, #8B1A1A 100%);
  --grad-cream:        linear-gradient(180deg, #FFFFFF 0%, #FFF8F0 100%);
  --grad-card-sheen:   linear-gradient(145deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 40%);
  --grad-hero-scrim:   linear-gradient(180deg, rgba(26,10,6,0.15) 0%, rgba(26,10,6,0.55) 55%, rgba(26,10,6,0.85) 100%);

  /* Category gradients — appetizing, each distinct */
  --grad-cat-gourmet:   linear-gradient(135deg, #FF7A5A, #E63E1E);
  --grad-cat-sweets:    linear-gradient(135deg, #FFB6C1, #FF6B9D);
  --grad-cat-drink:     linear-gradient(135deg, #7BC67E, #2E8B57);
  --grad-cat-kitchen:   linear-gradient(135deg, #6B8FD6, #2F4F8F);
  --grad-cat-gift:      linear-gradient(135deg, #C589E8, #8B1A1A);
  --grad-cat-matome:    linear-gradient(135deg, #FFC93C, #FFB700);

  /* ---------- SHADOWS ---------- */
  --shadow-1:        0 1px 2px rgba(26, 12, 6, 0.06);
  --shadow-2:        0 8px 24px rgba(26, 12, 6, 0.08);
  --shadow-3:        0 16px 48px rgba(26, 12, 6, 0.12);
  --shadow-card-hv:  0 20px 44px rgba(139, 26, 26, 0.16), 0 4px 12px rgba(26,12,6,0.06);
  --shadow-coral:    0 6px 20px rgba(255, 87, 51, 0.32);
  --shadow-coral-lg: 0 12px 32px rgba(255, 87, 51, 0.42);
  --inner-hairline:  inset 0 1px 0 rgba(255, 255, 255, 0.85);

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- SPACING ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- TYPE ---------- */
  --font-sans:     "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, -apple-system, sans-serif;
  --font-serif:    "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 36px;
  --fs-5xl: 48px;
  --fs-6xl: 64px;
  --fs-7xl: 88px;

  --fw-reg:    400;
  --fw-med:    500;
  --fw-smb:    600;
  --fw-bold:   700;
  --fw-xbold:  800;
  --fw-black:  900;

  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.65;
  --lh-loose:   1.9;

  --tr-tightest: -0.04em;
  --tr-tight:    -0.02em;
  --tr-normal:    0;
  --tr-wide:      0.06em;
  --tr-wider:     0.12em;

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur-med:     260ms;
  --dur-slow:    420ms;

  /* ---------- LAYOUT ---------- */
  --content-max: 1280px;
  --header-h:    72px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- DISPLAY TYPE ---------- */
.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tightest);
  color: var(--ink);
}

.kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--coral);
}

.serif-accent {
  font-family: var(--font-serif);
  font-weight: var(--fw-black);
  font-style: italic;
}

/* ---------- UTIL ---------- */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* scrollbars for horizontal scrollers */
.noscrollbar::-webkit-scrollbar { display: none; }
.noscrollbar { scrollbar-width: none; -ms-overflow-style: none; }

::selection { background: var(--coral); color: #fff; }