/* =========================================================
   Escape from Station — Design Tokens
   デザイン書.md §2〜§5 と 1:1 対応
   Compose 移植時: --efs-accent-signal -> EfsColors.accentSignal
   ========================================================= */

:root {
  /* ---------- Color : Light ---------- */
  --efs-bg-base:            #F4F7F5;
  --efs-bg-surface:         #FFFFFF;
  --efs-bg-sunken:          #E8EDEA;

  --efs-ink-primary:        #0F1A15;
  --efs-ink-secondary:      #4A5A52;
  --efs-ink-tertiary:       #7D8B84;
  --efs-ink-on-accent:      #052E1B;

  --efs-line-default:       #DCE4DF;
  --efs-line-strong:        #C2CFC8;

  --efs-accent-signal:      #34C77B;
  --efs-accent-signal-ink:  #0B6E3F;
  --efs-accent-signal-soft: #E3F7EC;
  --efs-accent-signal-glow: rgba(52, 199, 123, .24);

  --efs-state-warn:         #C97A16;
  --efs-state-warn-soft:    #FBF0DF;
  --efs-state-danger:       #C0392B;
  --efs-state-info:         #3A6B8C;

  --efs-model-face-top:     #FFFFFF;
  --efs-model-face-side:    #E6ECE8;
  --efs-model-edge:         #C4D0C9;
  --efs-model-void:         #EDF1EF;
  --efs-model-dim:          rgba(255, 255, 255, .65);

  /* ---------- Typography ---------- */
  --efs-font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  --efs-font-en: "Inter", "Segoe UI", system-ui, sans-serif;
  --efs-font: var(--efs-font-en), var(--efs-font-jp);

  --efs-sign-xl:   700 40px/46px var(--efs-font);
  --efs-sign-l:    700 30px/38px var(--efs-font);
  --efs-num-xl:    700 52px/52px var(--efs-font);
  --efs-num-l:     700 32px/36px var(--efs-font);
  --efs-title-l:   700 22px/30px var(--efs-font);
  --efs-title-m:   600 17px/25px var(--efs-font);
  --efs-body-l:    400 16px/25px var(--efs-font);
  --efs-body-m:    400 14px/21px var(--efs-font);
  --efs-label-l:   700 14px/18px var(--efs-font);
  --efs-label-m:   600 12px/16px var(--efs-font);
  --efs-caption:   500 11px/15px var(--efs-font);

  /* ---------- Spacing (4px grid) ---------- */
  --efs-space-1:  4px;
  --efs-space-2:  8px;
  --efs-space-3:  12px;
  --efs-space-4:  16px;
  --efs-space-5:  20px;
  --efs-space-6:  24px;
  --efs-space-8:  32px;
  --efs-space-10: 40px;
  --efs-space-14: 56px;
  --efs-space-18: 72px;

  /* ---------- Radius ---------- */
  --efs-radius-sm:    10px;
  --efs-radius-md:    16px;
  --efs-radius-lg:    24px;
  --efs-radius-xl:    32px;
  --efs-radius-pill:  999px;
  --efs-radius-model: 2px;

  /* ---------- Shadow ---------- */
  --efs-shadow-card:  0 2px 8px rgba(15, 26, 21, .06);
  --efs-shadow-sign:  0 -6px 24px rgba(15, 26, 21, .10);
  --efs-shadow-sheet: 0 -12px 40px rgba(15, 26, 21, .16);
  --efs-shadow-float: 0 8px 24px rgba(15, 26, 21, .14);

  /* ---------- Motion ---------- */
  --efs-motion-micro:    140ms cubic-bezier(.3, .7, .4, 1);
  --efs-motion-standard: 240ms cubic-bezier(.2, .8, .2, 1);
  --efs-motion-layer:    380ms cubic-bezier(.16, .84, .24, 1);
  --efs-motion-route:    700ms cubic-bezier(.4, 0, .2, 1);

  /* ---------- 2.5D Model ---------- */
  --efs-model-tilt-x:   56deg;
  --efs-model-spin-z:  -38deg;
  --efs-model-gap:      56px;   /* 階間ギャップ */
  --efs-model-thick:    7px;    /* フロア厚み */
}

/* ---------- Color : Dark ---------- */
[data-theme="dark"] {
  --efs-bg-base:            #0C1310;
  --efs-bg-surface:         #151F1A;
  --efs-bg-sunken:          #080D0B;

  --efs-ink-primary:        #EAF2ED;
  --efs-ink-secondary:      #9DB0A6;
  --efs-ink-tertiary:       #68796F;
  --efs-ink-on-accent:      #04160D;

  --efs-line-default:       #25332C;
  --efs-line-strong:        #3A4C42;

  --efs-accent-signal:      #4FE39C;
  --efs-accent-signal-ink:  #6BEFAE;
  --efs-accent-signal-soft: #12301F;
  --efs-accent-signal-glow: rgba(79, 227, 156, .30);

  --efs-state-warn:         #E8B45C;
  --efs-state-warn-soft:    #2C2313;
  --efs-state-danger:       #E8756A;
  --efs-state-info:         #7FB2D4;

  --efs-model-face-top:     #1C2721;
  --efs-model-face-side:    #121A16;
  --efs-model-edge:         #33463C;
  --efs-model-void:         #0F1712;
  --efs-model-dim:          rgba(12, 19, 16, .60);

  --efs-shadow-card:  0 2px 8px rgba(0, 0, 0, .40);
  --efs-shadow-sign:  0 -6px 24px rgba(0, 0, 0, .45);
  --efs-shadow-sheet: 0 -12px 40px rgba(0, 0, 0, .55);
  --efs-shadow-float: 0 8px 24px rgba(0, 0, 0, .50);
}

/* ---------- Reduced motion (デザイン書 §5.1) ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --efs-motion-micro:    1ms linear;
    --efs-motion-standard: 1ms linear;
    --efs-motion-layer:    140ms linear;
    --efs-motion-route:    1ms linear;
  }
}