/* fonts */
:root{
  --font-display:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --font-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular","Menlo",monospace;
}

/* palette */
/* L1 プリミティブ。値を持つのはこの層だけ。画面から直接参照しない。 */
:root{
  /* 生成りの紙（純白は使わない） */
  --c-cream-50:#FDFBF5;
  --c-cream-100:#F7F1E4;
  --c-cream-200:#EFE7D6;
  --c-cream-300:#E2D5BC;
  --c-cream-400:#C9B896;

  /* インク（焦茶。純黒は使わない） */
  --c-ink-900:#241C16;
  --c-ink-800:#33281F;
  --c-ink-700:#4A3B2F;
  --c-ink-600:#5C4B3D;
  --c-ink-500:#6B5A4B;
  --c-ink-300:#A4907C; /* 罫・境界のみ。文字に使うと AA を切る（2.74） */

  /* えんじ = 主色。面にも文字にも使える濃度 */
  --c-crimson-700:#6E1824;
  --c-crimson-600:#8E2130;
  --c-crimson-500:#A8283A;
  --c-crimson-100:#F2DCDE;

  /* 金 = 第2ブランド色。200/400/600 は装飾専用、800 のみ文字可 */
  --c-gold-200:#E8D69A;
  --c-gold-400:#C9A227;
  --c-gold-600:#A8861C;
  --c-gold-800:#755912;

  /* 深緑：ミッション / 成功 を1本で兼ねる */
  --c-forest-700:#164434;
  --c-forest-600:#1F5B45;
  --c-forest-100:#DDE9E2;

  /* 紺：未来カード */
  --c-navy-700:#152B4B;
  --c-navy-600:#1E3A64;
  --c-navy-100:#DCE3EE;

  /* 朱：エラー。えんじと近縁なので色だけに意味を持たせない */
  --c-danger-600:#B3261E;
  --c-danger-100:#F6DDDB;
}

/* semantic */
/* L2 役割トークン。画面はこの層だけを var() で参照する。 */
:root{
  /* 面 */
  --bg-page:var(--c-cream-100);
  --bg-surface:var(--c-cream-50);
  --bg-sunken:var(--c-cream-200);
  --bg-inset:var(--c-cream-300);
  --bg-accent:var(--c-crimson-600);        /* 帯・ボタン。白文字 8.71 */
  --bg-accent-vivid:var(--c-crimson-500);  /* 面・帯専用。文字色には使わない */
  --bg-accent-deep:var(--c-crimson-700);   /* 濃色帯 */
  --bg-accent-soft:var(--c-crimson-100);
  --bg-ornament:var(--c-gold-400);         /* 罫・王冠・記章。意味を持たない装飾専用 */
  --bg-ornament-soft:var(--c-gold-200);
  --bg-overlay:rgba(36,28,22,.72);         /* 画像の上に文字を置くときは必ず挟む */
  --bg-success:var(--c-forest-100);
  --bg-danger:var(--c-danger-100);

  /* 文字 */
  --fg-default:var(--c-ink-900);   /* 生成り地 14.9 */
  --fg-secondary:var(--c-ink-700); /* 9.4 */
  --fg-muted:var(--c-ink-500);     /* 5.91（AA・AAA未満）。最小値の系統 */
  --fg-accent:var(--c-crimson-600);/* 7.80 */
  --fg-gold:var(--c-gold-800);     /* 5.89。金を文字で使うときは必ずこちら */
  --fg-on-accent:var(--c-cream-50);
  --fg-on-dark:var(--c-cream-100);
  --fg-success:var(--c-forest-600);
  --fg-danger:var(--c-danger-600); /* 5.86。アイコン＋文言と併用が必須 */
  --fg-link:var(--c-crimson-600);
  --fg-link-hover:var(--c-crimson-700);

  /* カード種別（バッジ3色） */
  --fg-cat-figure:var(--c-crimson-600);
  --bg-cat-figure:var(--c-crimson-100);
  --fg-cat-mission:var(--c-forest-600);
  --bg-cat-mission:var(--c-forest-100);
  --fg-cat-future:var(--c-navy-600);
  --bg-cat-future:var(--c-navy-100);

  /* 罫 */
  --border-subtle:var(--c-cream-300);
  --border-default:var(--c-cream-400);
  --border-strong:var(--c-ink-700);
  --border-ornament:var(--c-gold-400);
  --border-focus:var(--c-crimson-600);
}

/* typography */
/* 本文 16px / 行間 1.75 / スケール比 1.200。ウェイトは 400・700 の2段のみ。 */
:root{
  --text-xs:12px;
  --text-sm:13px;
  --text-base:16px;
  --text-lg:19px;
  --text-xl:23px;
  --text-2xl:28px;
  --text-3xl:33px;
  --text-4xl:40px;
  --text-5xl:48px;
  --text-6xl:60px;
  --text-7xl:72px;  /* ヒーロー専用 = 60 × 1.2 */

  --leading-tight:1.3;   /* 見出し（明朝） */
  --leading-snug:1.5;    /* リード文・短い塊 */
  --leading-body:1.75;   /* 本文の既定 */

  --tracking-display:.01em;
  --tracking-body:0;
  --tracking-label:.14em; /* ラベル・かぶせ見出しの和文アキ */

  --weight-regular:400;
  --weight-bold:700;     /* 500・600 は明朝が擬似ボールドになるため持たない */
}

/* space */
/* 4px グリッド。--space-14 以上は節（セクション）の間隔用。 */
:root{
  --space-0:0;
  --space-1:2px;
  --space-2:4px;
  --space-3:8px;
  --space-4:12px;
  --space-5:16px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-12:96px;
  --space-14:128px;

  --measure-text:34em;   /* 本文の最大行長 */
  --container:1120px;    /* LP の内枠 */
  --container-narrow:720px;
}

/* radii */
/* 額装は直線主体。1画面で使う角丸は2種類まで。 */
:root{
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:16px;
}

/* elevation */
/* 影は焦茶を薄めたもの。純黒の影は生成り地で灰色に見える。 */
:root{
  --shadow-sm:0 1px 2px rgba(36,28,22,.08);
  --shadow-md:0 2px 8px rgba(36,28,22,.10);
  --shadow-lg:0 12px 32px rgba(36,28,22,.16);
  --shadow-inset:inset 0 1px 2px rgba(36,28,22,.10);
  --ring-focus:0 0 0 3px rgba(142,33,48,.28);
}

/* motion */
/* 紙をめくる速さ。跳ねない。 */
:root{
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:320ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
}

/* base */
/* 素の要素の既定値。トークンのみで書く。 */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--fg-default);font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-regular);line-height:var(--leading-body);letter-spacing:var(--tracking-body);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-bold);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);margin:0}
p{margin:0}
a{color:var(--fg-link);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--fg-link-hover)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
img{max-width:100%;display:block}