/* ============================================================
   asa.css — 「朝のひかり」デザイン(明るく、やさしい。1日のはじまり)

   生成りの紙に、墨の文字。色は「ひかりの金」ひとつだけ。
   影を使わず、細い線(1.5)で区切る。見出しだけ明朝、ふだんの文字は読みやすいゴシック。
   曲「朝のひかり」(ハ長調・72 bpm)から決めた。設計は docs/11-四つの世界のデザイン.md。

   <html data-skin="asa"> のときだけ効く。作り方は chic.css と同じ:
   1. tokens.css の変数(色・線・書体・形)を入れ替える → 既存の部品の色が、自動で変わる
   2. 形や飾りを変えたい部品だけを、この下で上書きする

   ★ 約束は変えない: 達成率を出さない / 赤を使わない / 空の枠を出さない
   ★ 色の読みやすさは「4.5 : 1 以上」(自動テストが、この色の組み合わせを計算して確かめる)。
     色を変えたら、テストを通すこと。「ひかりの金」(--lamp)は、塗り・点・線だけ。文字には使わない
   ★ 文字サイズ(--fs-*)は、ここでは変えない(設定の「文字の大きさ」を効かせるため)
   ★ 書体は、同梱のもの(vendor/fonts/)と、端末に入っているものだけ(外のフォントは読み込まない)
   ============================================================ */

/* ---- 1. 色・書体・形の入れ替え(明るい朝) ------------------ */
html:root[data-skin="asa"] {
  color-scheme: light;

  --bg:          #FBF6EC;   /* 朝の紙 */
  --bg-card:     #FFFDF8;   /* 一段明るい面 */
  --bg-sunken:   #F3ECDD;   /* 入力欄 */
  --raised:      #F3ECDD;

  --line:        #E6DCC8;   /* 区切り線(飾り) */
  --line-strong: #8C8270;   /* 入力欄・ボタンの縁(地との差 3 : 1 以上) */

  --text:        #2C2A26;   /* 墨 */
  --text-sub:    #4F493E;
  --text-weak:   #6B6355;

  --accent:      #7A5200;   /* 色のついた文字・線(濃い金茶) */
  --accent-2:    #7A5200;
  --accent-weak: #F6E7C4;   /* 選んでいるところの面 */
  --brown:       #7A5200;
  --lamp:        #E3A72F;   /* ひかりの金(塗り・点・下線だけ) */
  --on-lamp:     #2C2A26;

  --warn:        #8F5233;   /* 赤は使わず、焦げ茶の橙 */
  --warn-weak:   #F6E7DD;

  --ink:         #2C2A26;
  --on-ink:      #FBF6EC;

  --head:  "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho,
           "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP", serif;
  --font:  "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP",
           "Noto Sans CJK JP", sans-serif;
  --font-quote: var(--head);

  --radius:      14px;
  --radius-sm:   10px;
  --radius-full: 999px;
  --shadow:      none;
  --lh:          1.8;

  --gutter:      24px;
  --tabbar-h:    60px;
  --header-h:    56px;
  --beat:        833ms;     /* 曲の1拍(72 bpm)。動きの速さの元 */
  --ic-w:        1.5;      /* アイコンの線の太さ */
  --ic-rx:       3px;      /* アイコンの四角の角 */

  background: var(--bg);
}

/* 朝の暗い版(端末が暗い設定のとき / 設定で「暗い」を選んだとき) */
@media (prefers-color-scheme: dark) {
  html:root[data-skin="asa"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:          #171613;
    --bg-card:     #201F1B;
    --bg-sunken:   #121110;
    --raised:      #2A2823;
    --line:        #34322B;
    --line-strong: #8A8473;
    --text:        #F3EEE2;
    --text-sub:    #CFC8B8;
    --text-weak:   #B2AA98;
    --accent:      #EDBE62;
    --accent-2:    #EDBE62;
    --accent-weak: #342B16;
    --brown:       #EDBE62;
    --lamp:        #E9B54A;
    --on-lamp:     #1A1814;
    --warn:        #D9A07A;
    --warn-weak:   #2E2620;
    --ink:         #F3EEE2;
    --on-ink:      #171613;
  }
}
html:root[data-skin="asa"][data-theme="dark"] {
  color-scheme: dark;
  --bg:          #171613;
  --bg-card:     #201F1B;
  --bg-sunken:   #121110;
  --raised:      #2A2823;
  --line:        #34322B;
  --line-strong: #8A8473;
  --text:        #F3EEE2;
  --text-sub:    #CFC8B8;
  --text-weak:   #B2AA98;
  --accent:      #EDBE62;
  --accent-2:    #EDBE62;
  --accent-weak: #342B16;
  --brown:       #EDBE62;
  --lamp:        #E9B54A;
  --on-lamp:     #1A1814;
  --warn:        #D9A07A;
  --warn-weak:   #2E2620;
  --ink:         #F3EEE2;
  --on-ink:      #171613;
}

/* ---- 朝だけの飾り -------------------------------------------- */
html[data-skin="asa"] .tabbar__item.is-active::before {      /* 選んでいるところに、ひかりの点 */
  content: ""; position: absolute; top: 0; left: 50%; width: 6px; height: 6px;
  margin-left: -3px; border-radius: 50%; background: var(--lamp);
}
html[data-skin="asa"] .lp__date::after {                     /* 日付の下に、ひかりの金の線 */
  content: ""; display: block; width: 56px; height: 3px; border-radius: 2px;
  background: var(--lamp); margin-top: var(--sp-3);
}

/* ---- 朝の、今日の画面 ----------------------------------------- */
/* 目次は、絵と名前の1行(ゆったり)/ 予定の種類は、うすい文字 / 「いま」の印は、金の点と線 */
html[data-skin="asa"] .lp__item { display: flex; align-items: center; gap: var(--sp-4); }
html[data-skin="asa"] .lp__no { display: none; }
html[data-skin="asa"] .lp__ic { display: flex; order: -1; }
html[data-skin="asa"] .lp__ic .ic { width: 26px; height: 26px; stroke: var(--accent); }
html[data-skin="asa"] .timerow__cat { display: inline; flex: 0 0 auto; font-size: calc(13px * var(--fs-scale)); color: var(--text-weak); margin-left: var(--sp-2); }
html[data-skin="asa"] .timerow__now {
  display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0;
  font-size: calc(13px * var(--fs-scale)); color: var(--accent);
}
html[data-skin="asa"] .timerow__now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); flex: 0 0 auto; }
html[data-skin="asa"] .timerow__now::after { content: ""; flex: 1; height: 1px; background: var(--lamp); }