/* ============================================================
   TRB DESIGN SYSTEM — Colors & Typography
   合同会社ふたこカンパニー
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Poppins:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* Brand Color Primitives */
  --sky-bright:   #7BBFD8;
  --bright-gold:  #D4B96A;
  --washi-white:  #FAF3DF;
  --pure-black:   #181818;

  --sky-dim:      #5AA0BC;
  --sky-pale:     #C5E3EE;
  --sky-wash:     #EBF5FA;

  --gold-dim:     #B89B4E;
  --gold-pale:    #EFE2BE;
  --gold-wash:    #FAF4E4;

  --ink-dark:     #181818;
  --ink-mid:      #4A4A4A;
  --ink-light:    #8A8A8A;
  --ink-faint:    #C4C4C4;

  /* Surfaces: 背景は白ベース */
  --surface-page: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-soft: #FAF3DF;
  --surface-inv:  #1a1814;

  /* Typography */
  --font-japanese:   'Noto Sans JP', 'Yu Gothic', 'YuGothic', sans-serif;
  --font-heading:    'Poppins', sans-serif;
  --font-body-serif: 'Lora', Georgia, serif;
  --font-body:       'Noto Sans JP', 'Yu Gothic', sans-serif;

  /* Type Scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   21px;
  --text-xl:   28px;
  --text-2xl:  38px;
  --text-3xl:  52px;
  --text-4xl:  72px;

  /* Line Heights */
  --lh-tight:    1.2;
  --lh-heading:  1.35;
  --lh-body-en:  1.65;
  --lh-body-ja:  1.85;
  --lh-caption:  1.5;

  /* Letter Spacing */
  --ls-tight:   -0.02em;
  --ls-normal:   0em;
  --ls-ja-head:  0.04em;
  --ls-label:    0.08em;
  --ls-wide:     0.12em;

  /* Font Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Spacing — intentional, not on 8px alone */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  14px;
  --space-4:  20px;
  --space-5:  28px;
  --space-6:  40px;
  --space-7:  56px;
  --space-8:  72px;
  --space-9: 104px;
  --space-10:144px;

  /* Border Radius */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(24,24,24,0.05);
  --shadow-sm: 0 1px 4px rgba(24,24,24,0.08);
  --shadow-md: 0 4px 18px rgba(24,24,24,0.08);
  --shadow-lg: 0 10px 36px rgba(24,24,24,0.12);

  /* Transitions */
  --transition-fast: 160ms ease-out;
  --transition-base: 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-slow: 460ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Container */
  --container-max: 1280px;
  --container-pad: 56px;
}