/* offmode — semantic tokens / 2つのテーマ.
   Light = 明るい日常の余白（ivory base + Navy CTA）
   Dark Weather = 低気圧の日の、着る避難所（navy base + Sage/Sand CTA）
   These are NOT a light/dark UI mode pair: they are two climates of one brand.
   Dark Weather always keeps a little Warm Light; Light always keeps a little Dark Weather. */
:root{
  --surface-page:var(--om-ivory-200);
  --surface-alt:var(--om-ivory-100);
  --surface-card:var(--om-ivory-200);
  --surface-inset:var(--om-mist-100);
  --surface-deep:var(--om-navy-900);

  --text-primary:var(--om-ink-900);
  --text-secondary:var(--om-ink-600);
  --text-muted:var(--om-ink-400);
  --text-on-deep:#EDEFEA;
  --text-on-accent:var(--om-navy-900);
  --label-color:#8FA79A;

  --border-subtle:rgba(34,49,63,.10);
  --border-strong:rgba(34,49,63,.22);
  --hairline-on-deep:rgba(248,246,241,.14);

  --accent-quiet:var(--om-sage);      /* 音 / sound */
  --accent-air:var(--om-blue-gray);   /* 気圧 / air */
  --accent-warm:var(--om-sand);       /* 触覚 / touch */
  --accent-light:var(--om-warm-light);/* Dark Weather only */

  --cta-fill:var(--om-navy-900);
  --cta-fill-hover:#2B3C4C;
  --cta-text:var(--om-ivory-100);
  --ghost-border:var(--border-strong);
  --ghost-text:var(--text-primary);
  --ghost-fill-hover:rgba(34,49,63,.04);

  --chip-fill:rgba(34,49,63,.03);
  --chip-border:var(--border-subtle);
  --chip-text:var(--text-secondary);

  --tile-fill:var(--om-mist-100);
  --tile-icon:var(--om-navy-900);

  --focus-ring:rgba(34,49,63,.35);
  --shadow-card:var(--shadow-photo);

  /* Atmospheric Veil — the continuous organic boundary between the two climates */
  --veil-a:rgba(175,200,184,.22);
  --veil-b:rgba(184,201,214,.20);
  --veil-c:rgba(217,199,173,.18);
  --veil-page-from:var(--om-ivory-200);
  --veil-page-to:var(--om-ivory-100);
}
[data-theme="dark"]{
  --surface-page:var(--om-night-900);
  --surface-alt:var(--om-night-800);
  --surface-card:var(--om-night-700);
  --surface-inset:rgba(232,236,234,.05);
  --surface-deep:var(--om-night-950);

  --text-primary:var(--om-paper-100);
  --text-secondary:var(--om-paper-400);
  --text-muted:var(--om-paper-600);
  --text-on-deep:#DCE5EC;
  --text-on-accent:var(--om-night-900);
  --label-color:#8C9C95;

  --border-subtle:rgba(232,236,234,.09);
  --border-strong:rgba(232,236,234,.20);
  --hairline-on-deep:rgba(232,236,234,.10);

  --cta-fill:var(--om-sage);
  --cta-fill-hover:#BCD3C5;
  --cta-text:var(--om-night-900);
  --ghost-border:var(--border-strong);
  --ghost-text:var(--text-primary);
  --ghost-fill-hover:rgba(232,236,234,.05);

  --chip-fill:rgba(232,236,234,.03);
  --chip-border:var(--border-subtle);
  --chip-text:var(--text-secondary);

  --tile-fill:rgba(232,236,234,.07);
  --tile-icon:var(--om-sage);

  --focus-ring:rgba(175,200,184,.55);
  --shadow-card:0 30px 60px -24px rgba(0,0,0,.55),0 6px 18px -12px rgba(0,0,0,.4);

  --veil-a:rgba(175,200,184,.10);
  --veil-b:rgba(184,201,214,.09);
  --veil-c:rgba(242,220,168,.08);
  --veil-page-from:var(--om-night-900);
  --veil-page-to:var(--om-night-800);
}
/* Dark Weather CTA can also be served in Sand (styleguide component sheet).
   Opt in per-surface, never both fills on one page. */
[data-theme="dark"][data-cta="sand"]{--cta-fill:var(--om-sand);--cta-fill-hover:#E2D3BD}