/**
 * style.css — エントリーポイント
 * ============================================================
 * mFLOCSS v1.2 × 最新 CSS 機能 統合アーキテクチャ
 *
 * 採用技術:
 *  - @layer          : カスケード優先順位の固定（mFLOCSS 9層）
 *  - @property       : 型付きカスタムプロパティ・アニメーション補間
 *  - @scope          : コンポーネントスコープ（Baseline 2025.12〜）
 *  - light-dark()    : ダークモードを Theme 層のみで完結
 *  - Relative Color  : oklch(from var(--x) l c h) で hover 色自動導出
 *  - Container Query : @container (inline-size) でコンポーネント単位レスポンシブ
 *  - Scroll-Driven   : animation-timeline: view() でスクロール連動アニメーション
 *  - @starting-style : display:none からの enter アニメーション
 *  - color-mix()     : セマンティック派生色の生成
 *
 * @layer の !important 逆転挙動について（重要）:
 *  通常: utility > affordance > ... > tokens （後ろが強い）
 *  !important: tokens > ... > utility （前が強い = 逆順）
 *  → Foundation が !important を使うと Utility の !important より強い。
 *    これはブラウザのデフォルトスタイルが確実に守られるための仕様。
 *
 * ============================================================
 */

/* ============================================================
   @layer 優先順位の一括宣言
   ここで定義した順序は後から変更不可。
   低 → 高（最後に宣言された層が最高優先度）
   ============================================================ */
@layer
  tokens,      /* 1. プリミティブ素材（最も抽象的） */
  vendors,     /* 2. サードパーティ CSS（外部ライブラリの上書き封じ込め） */
  theme,       /* 3. セマンティック意味付け */
  foundation,  /* 4. 要素セレクタのデフォルト */
  layout,      /* 5. 配置・空間（色に触れない） */
  component,   /* 6. 再利用可能パーツ */
  project,     /* 7. サイト固有パーツ */
  affordance,  /* 8. インタラクション・モーション手がかり */
  utility;     /* 9. 最終調整（最も具体的） */

/* ============================================================
   Tokens
   ============================================================ */
@import "./tokens/color.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/shadow.css";
@import "./tokens/motion.css";
@import "./tokens/z-index.css";
@import "./tokens/brand.css";

/* ============================================================
   Vendors
   サードパーティ CSS はここに @import する。
   レイヤー付きインポートで優先順位を完全に制御できる。

   使用例:
     @import "some-lib/dist/style.css" layer(vendors);

   現時点でライブラリがなくても宣言は残しておく。
   追加時に @layer 宣言順を変える必要がなくなる。
   ============================================================ */

/* ============================================================
   Theme
   ============================================================ */
@import "./theme/color.css";
@import "./theme/typography.css";
@import "./theme/spacing.css";

/* ============================================================
   Foundation
   ============================================================ */
@import "./foundation/reset.css";
@import "./foundation/base.css";
@import "./foundation/form.css";

/* ============================================================
   Layout
   ============================================================ */
@import "./layout/l-container.css";
@import "./layout/l-grid.css";
@import "./layout/l-stack.css";
@import "./layout/l-cluster.css";

/* ============================================================
   Component
   ============================================================ */
@import "./component/c-button.css";
@import "./component/c-card.css";
@import "./component/c-badge.css";
@import "./component/c-heading.css";
@import "./component/c-form-field.css";
@import "./component/c-media.css";
@import "./component/c-dialog.css";
@import "./component/c-disclosure.css";
@import "./component/c-hover.css";
@import "./component/c-loader.css";
@import "./component/c-concept-card.css";

/* ============================================================
   Project
   ============================================================ */
@import "./project/p-header.css";
@import "./project/p-footer.css";
@import "./project/p-hero.css";
@import "./project/p-nav.css";
@import "./project/p-pages.css";
@import "./project/p-collection.css";
@import "./project/p-page-template.css";
@import "./project/p-philosophy.css";
@import "./project/p-concept.css";
@import "./project/p-events-page.css";

/* ============================================================
   Affordance
   「操作できる・変化する」という手がかりを与える層。
   transition / animation / scroll-driven など、
   インタラクションとモーションに関わるすべてをここで管理する。

   Animation と命名しなかった理由:
   この層の責務は「動く」だけでなく「ユーザーへの知覚的フィードバック全般」。
   hover・focus のトランジション、スクロール連動演出、
   enter/exit アニメーションを一元管理することで、
   prefers-reduced-motion 対応を各 Component に分散させずに済む。
   ============================================================ */
@import "./affordance/a-fade.css";
@import "./affordance/a-slide.css";
@import "./affordance/a-scroll-reveal.css";

/* ============================================================
   Utility
   ============================================================ */
@import "./utility/u-visually-hidden.css";
@import "./utility/u-spacing.css";
@import "./utility/u-display.css";
@import "./utility/u-text.css";

/* * {outline: 1px solid red} */