/* ============================================
   DIFINO Design System - CSS Variables
   ============================================ */

:root {
  /* ---- Group Site (Stylish / Brand) ---- */
  --g-bg:           #111111;
  --g-bg-2:         #1a1a1a;
  --g-bg-3:         #222222;
  --g-bg-warm:      #181510;
  --g-text:         #f5f4f0;
  --g-text-sub:     #F5F4F0;
  --g-accent:       #c4a882;
  --g-accent-dark:  #a8906e;
  --g-border:       rgba(255,255,255,0.1);

  /* ---- Store Site (Friendly / Approachable) ---- */
  --s-bg:           #fbf1e7;
  --s-bg-2:         #f3f0ec;
  --s-bg-3:         #eee7de;
  --s-bg-4:         #ecd5b7;
  --s-text:         #2c2926;
  --s-text-sub:     #7a706a;
  --s-accent:       #9b7f66;
  --s-accent-sub:   #ce9562;
  --s-border:       #e0d8d0;

  /* ---- Fonts ---- */
  --font-en-serif:  'Cormorant Garamond', serif;
  --font-en-sans:   'Jost', sans-serif;
  --font-jp:        'Noto Sans JP', sans-serif;
  --font-jp-serif:  'Noto Serif JP', serif;

  /* ---- Font Sizes (all integers, PC min 14px, body min 16px) ---- */
  --fs-hero:   104px;  /* hero display — Cormorant Garamond Light */
  --fs-join:    80px;  /* recruit/join hero — Cormorant Garamond Light Italic */
  --fs-h1:      56px;  /* section title EN */
  --fs-h2:      40px;  /* store card name, large EN headings */
  --fs-sub-jp:  21px;  /* hero JP subtitle */
  --fs-body:    16px;  /* must-read Japanese body text */
  --fs-ui:      14px;  /* nav, labels, meta, footer — minimum size */
  --fs-small:   12px;  /* nav, labels, meta, footer — minimum size */
  --fs-ss:      10px;  /* nav, labels, meta, footer — minimum size */

  /* ---- Letter Spacing (integer px) ---- */
  --ls-xs: 1px;   /* tight — body/date */
  --ls-sm: 2px;   /* standard — nav */
  --ls-md: 3px;   /* medium — labels, JP text */
  --ls-lg: 4px;   /* wide — eyebrows, section labels */

  /* ---- Layout ---- */
  --max-w:          1280px;
  --max-w-narrow:   900px;
  --radius:         4px;
  --radius-lg:      12px;

  /* ---- Transitions ---- */
  --transition:      0.3s ease;
  --transition-slow: 0.6s ease;

  /* ---- Spacing (integer px) ---- */
  --sp-xs:    8px;
  --sp-sm:   16px;
  --sp-md:   32px;
  --sp-lg:   64px;
  --sp-xl:   96px;
  --sp-2xl: 160px;
}