@charset "UTF-8";

/*
 * Cascade layer order declaration.
 * 後から宣言されたレイヤーほど優先される（normal rules の場合）。
 * 新規 CSS を書く際は @layer を使って意図的に優先度を指定できる。
 * レガシーコード（base.css の reset 以外）は unlayered のため、どのレイヤーよりも優先される。
 * 詳細は CSS.md 参照。
 */
@layer reset, base, components, pages, utilities;

/*
 * Design tokens (CSS Custom Properties)
 *
 * Breakpoints (reference, not available as CSS vars in @media queries):
 *   sm: 576px  md: 768px  lg: 992px  xl: 1200px
 */
:root {
  /* === Color === */

  /* Text & surface */
  --text-color: #413233;
  --body-bg: #ffffff;
  --border-color: #dcdcdc;

  /* Accent */
  --loud-color: #fd7c23;
  --link-color: #2561b1;

  /* Greys */
  --grey-1: #f5f5f5;
  --grey-sub: #f3f4f5;
  --grey-card: #faf9f7;

  /* Semantic (labels, notices) */
  --color-error: #ff0000;
  --color-express: #5085e8;
  --color-value: #e85050;
  --color-highlight: #f1f358;
  --color-orange-accent: #fd8836;

  /* === Typography === */
  --base-font-family: "Lato", sans-serif;
  --base-font-size: 1.7rem;
  --base-line-height: 2.6rem;
  --base-font-weight: 400;
  --heading-font-family: "Lato", sans-serif;
  --heading-font-weight: 700;
  --weight-bold: 700;

  /* Font-size scale */
  --font-xs: 1rem;
  --font-sm: 1.2rem;
  --font-md: 1.4rem;
  --font-lg: 1.6rem;
  --font-xl: 1.8rem;
  --font-2xl: 2rem;
  --font-3xl: 2.4rem; /* h2 */
  --font-4xl: 3.5rem; /* h1 */

  /* Line-height scale (unitless — for text, inherits font-size) */
  --lh-none: 1;      /* 1行に収める（ボタン等） */
  --lh-tight: 1.3;   /* タイトな見出し */
  --lh-normal: 1.5;  /* 標準 */
  --lh-relaxed: 1.7; /* ゆったりした本文 */

  /* === Spacing === */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* === Layout === */
  --container-width: 1290px;
  --header-sp-height: 6rem;

  --radius-sm: 3px;
  --radius-md: 10px;
  --radius-lg: 26px;
}