/* ============================================================
   仕分けの切り札ONE — Design Tokens
   色 / タイポ / スペース / 影 / ラジアス / イージング
   ============================================================ */

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

/* Brand font uploaded by user: Apple Braille.
   NOTE: This is a Braille (tactile dot-pattern) font, not a Latin/Japanese text font.
   It is registered here so it is available (e.g. for a decorative accent or accessibility
   demo), but Noto Sans JP remains the primary UI typeface. Flagged in README. */
@font-face {
  font-family: 'Apple Braille';
  src: url('fonts/Apple_Braille.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand Colors ---------- */
  --brand-primary:        #0EA5C8;   /* シアン／スカイブルー（軽やかな信頼） */
  --brand-primary-hover:  #0B8AAB;
  --brand-primary-press:  #087A97;
  --brand-accent:         #38BDF8;   /* ブライトシアン（CTA・リンク） */
  --brand-accent-hover:   #22A8E3;
  --brand-sky:            #E0F4FA;   /* 淡い背景 */
  --brand-sky-2:          #F2FAFD;   /* さらに淡い背景 */

  /* ---------- Neutrals ---------- */
  --bg-0:                 #FFFFFF;
  --bg-1:                 #F4FBFD;   /* ページ下地（ほんのり水色） */
  --bg-2:                 #E9F6FB;   /* ゾーニング */
  --border-1:             #DCEEF4;   /* 基本ボーダー */
  --border-2:             #B8DEED;   /* ホバー時のボーダー */

  --fg-1:                 #0F2633;   /* 本文（濃紺寄りの黒） */
  --fg-2:                 #4A6170;   /* サブテキスト */
  --fg-3:                 #8AA0AE;   /* ミュート */
  --fg-on-brand:          #FFFFFF;

  /* ---------- Semantic ---------- */
  --success:              #1F9D6B;
  --success-bg:           #E6F5EE;
  --warning:              #E0A829;
  --warning-bg:           #FBF2DE;
  --error:                #D44A3B;
  --error-bg:             #FBE7E4;

  /* ---------- Typography ---------- */
  --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
  --font-mono: 'SFMono-Regular', Menlo, Consolas, monospace;

  --fs-display:   56px;
  --fs-h1:        40px;
  --fs-h2:        30px;
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-sm:        14px;
  --fs-xs:        12px;

  --lh-tight:     1.3;
  --lh-heading:   1.4;
  --lh-body:      1.8;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --tracking-tight: -0.01em;
  --tracking-body:   0.01em;
  --tracking-wide:   0.04em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;

  /* ---------- Radii ---------- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(15, 38, 51, 0.06);
  --shadow-md:  0 4px 16px rgba(14, 165, 200, 0.10);
  --shadow-lg:  0 12px 40px rgba(14, 165, 200, 0.16);

  /* ---------- Shadow color helpers ---------- */
  --shadow-cta-md:  rgba(30, 73, 168, 0.28);
  --shadow-cta-lg:  rgba(30, 73, 168, 0.35);

  /* ---------- Motion ---------- */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   150ms;
  --dur:        200ms;
  --dur-slow:   400ms;

  /* ---------- Layout ---------- */
  --container: 1120px;
  --container-pad: 24px;
  --header-h: 72px;
}

/* ============================================================
   Semantic type recipes — apply via class
   ============================================================ */

.type-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.type-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.type-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.type-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.type-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.type-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-body);
  color: var(--fg-1);
}
.type-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--fg-2);
}
.type-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1.6;
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
  text-transform: uppercase;
}

/* ============================================================
   Base reset (lightweight)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }