/* TY4WHALE — CSS Variables */
/* 色を直打ちしない。必ずこのファイルの変数を参照する */

:root {
  /* --- Background --- */
  --color-bg:              #2C2E33;
  --color-surface:         #363840;
  --color-surface-sub:     #404249;

  /* --- Text --- */
  --color-text-primary:    #E4E6EA;
  --color-text-secondary:  #9BA3AE;
  --color-text-muted:      #6E7580;

  /* --- Accent --- */
  --color-primary:         #7EB8D4;
  --color-primary-dark:    #6AA5C1;

  /* --- Border --- */
  --color-border:          #484B54;
  --color-border-subtle:   #3E404A;

  /* --- State --- */
  --color-error:           #F87171;

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

  /* --- Typography --- */
  --font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic",
                 "Helvetica Neue", Arial, sans-serif;

  /* --- Elevation --- */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 16px 32px rgba(0, 0, 0, 0.5);

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}

/* Observer ページ上書き（C案：深夜グレー） */
[data-page="observer"] {
  --color-bg:            #16171A;
  --color-surface:       #1E2025;
  --color-surface-sub:   #262830;
  --color-border:        #2E3138;
  --color-border-subtle: #23252B;
  /* text / accent / error は共通ベースを継承 */
}