/* bareframe/base.css
--------------------------------------------------
  このファイルは「装飾」ではなく、
  サイト全体の前提条件・物理法則・床の定義を担う。
  ここにある指定は「見た目を作る」のではなく
  以後のCSSが迷走しないための基準線。
-------------------------------------------------- */


/* ==================================================
  Global tokens（世界共通の色・余白・文字）
  ─ 見た目というより「前提値」
================================================== */
:root{
  --bg: #0b0c0f;                  /* 背景の基調となる薄い黒 */
  --fg: rgba(255,255,255,.88);    /* 本文用のほぼ白 */
  --muted: rgba(255,255,255,.62); /* 補助テキスト用 */
  --line: rgba(255,255,255,.14);  /* 罫線・境界用 */
  --line-2: rgba(255,255,255,.08);

  /* レイアウト前提値（まだ配置はしない） */
  --side-w: 220px;
  --gap: 14px;
  --pad: 18px;

  /* フォント役割定義
     --font : 本文・UI用
     --mono : 構造/コード表示用（等幅） */
  --font: system-ui, -apple-system, Segoe UI, Roboto,
          "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco,
          Consolas, "Liberation Mono", "Courier New", monospace;
}


/* ==================================================
  Box model rule（測量法の統一）
  ─ ラッパー増殖を防ぐための物理法則
================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}


/* ==================================================
  Document baseline
================================================== */
html,
body {
  height: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  line-height: 1.55;

  /* 文字描画の質を安定させる前提指定 */
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}


/* ==================================================
  Link behavior
  ─ 装飾ではなく「操作可能性」の可視化
================================================== */
a{
  color: inherit;           /* 文脈に溶かす */
  text-decoration: none;    /* 特権的表現を剥奪 */
}

a:focus{
  /* キーボード操作時の可視フィードバック
     borderではなく outline（レイアウト非干渉） */
  outline: 2px solid rgba(255,255,255,.22);
  outline-offset: 2px;
}


/* ==================================================
  Heading / paragraph reset
  ─ 余白は後段レイアウトに委ねる
================================================== */
h1,
h2,
h3,
h4,
p{
  margin: 0;
}


/* ==================================================
  Stage background sockets
  ─ 描画ではなく「差し込み口」の定義
  ─ Monolith を載せる床の空気感と座標感覚
================================================== */
:root{
  /* stage 用の薄い放射光（舞台照明） */
  --stage-bg: radial-gradient(
    1200px 600px at 70% 20%,
    rgba(255,255,255,.06),
    rgba(255,255,255,0) 60%
  );

  /* stage 用グリッド（座標感覚の床）
     横線＋縦線の2レイヤー */
  --stage-grid:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);

  /* グリッド1マスの基準単位 */
  --stage-grid-size: 56px 56px;
}


/* ==================================================
  Content layer baseline
  ─ 床（stage）より必ず上にあるという世界法則
================================================== */
.side,
.main{
  position: relative; /* z-index を成立させるための最小指定 */
  z-index: 1;         /* 意味のある数値ではなく「床より上」 */
}