/* ============================================================
   HANGRYS — デザイントークン
   design_reference/colors_and_type.css からWordPress用にコピー
   ============================================================ */

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

@font-face {
  font-family: "Yusei Magic";
  src: url("../fonts/YuseiMagic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --hangrys-red:        #FF1B1B;
  --hangrys-red-hover:  #FF3D3D;
  --hangrys-red-press:  #D90000;
  --hangrys-red-soft:   #4A1010;
  --hangrys-pink:       #FFB6C8;
  --hangrys-yellow:     #FFE619;
  --hangrys-ink:        #0A0A0A;

  --bg-base:   #0B0B0F;
  --bg-1:      #15151B;
  --bg-2:      #1E1E26;
  --bg-3:      #2A2A33;
  --bg-hover:  #23232C;
  --bg-press:  #2E2E38;

  --border:        #2F2F38;
  --border-soft:   #22222A;
  --border-strong: #44444F;

  --fg-1:        #FAFAFA;
  --fg-2:        #B8B8C0;
  --fg-3:        #74747F;
  --fg-disabled: #4A4A55;
  --fg-on-red:   #FFFFFF;

  --success: #34D399;
  --warn:    #FBBF24;
  --danger:  var(--hangrys-red);
  --info:    #60A5FA;

  --shadow-sm:    0 1px 2px rgba(0,0,0,.6);
  --shadow-md:    0 4px 14px rgba(0,0,0,.55);
  --shadow-lg:    0 16px 48px rgba(0,0,0,.55);
  --shadow-red:   0 8px 24px rgba(255,27,27,.35);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.04);

  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 72px;

  --font-display: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", system-ui, sans-serif;
  --font-sans:    "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand:    "Yusei Magic", "M PLUS Rounded 1c", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-xxs:  11px;
  --t-xs:   12px;
  --t-sm:   13px;
  --t-base: 14px;
  --t-md:   16px;
  --t-lg:   18px;
  --t-xl:   22px;
  --t-2xl:  28px;
  --t-3xl:  36px;
  --t-4xl:  48px;
  --t-5xl:  64px;
  --t-6xl:  84px;

  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   900;

  --track-tight:  -0.02em;
  --track-normal: 0;
  --track-wide:   0.04em;
  --track-jp-tag: 0.08em;
}

html.fluid          { font-size: 1.3vw; }
@media (max-width: 900px)   { html.fluid { font-size: 3.7vw; } }
@media (min-width: 1800px)  { html.fluid { font-size: 23.4px; } }
@media (max-width: 320px)   { html.fluid { font-size: 11.84px; } }