/* ============================================================
   theme.css — このプロジェクトのデザイントークン（Studio準備版 v0.1）
   生成: 2026-10-23  theme_generate.py  family=utility accent=blue mode=both
   参照元: ~/.codex/ui-tokens（ハッシュ 1560ad357602）
   値の正本は ~/.codex/ui-tokens/tokens。案件限りの調整はこのファイルで行い、
   このファイル以外に色・フォント名を直書きしない。
   ルート属性: <html data-theme="utility" data-mode="light">  ※ data-mode は light / dark / 省略（OS追従）。アクセントは焼き込み済み
   ============================================================ */

:root{
  --font-sans:"Yu Gothic UI","Meiryo","Segoe UI","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  /* 会話本文だけ既存OSの絵文字フォントを明示。新しいフォント資産/外部取得は使わない。 */
  --font-chat:"SHIROYORI Local Emoji","Yu Gothic UI","Meiryo","Segoe UI Emoji","Segoe UI","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --font-display:"Yu Gothic","Yu Gothic UI","Meiryo","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --font-mono:"Cascadia Mono",Consolas,"BIZ UDGothic",ui-monospace,monospace;
  --num:tabular-nums;
  --u1:4px;  --u2:8px;  --u3:12px; --u4:16px;
  --u5:24px; --u6:32px; --u7:48px; --u8:64px;
  --scale:1;
  --content-max:1440px;
  --app-max:1760px;
  --prose-max:34em;
  --z-base:0; --z-sticky:100; --z-dropdown:200;
  --z-modal:400; --z-toast:600; --z-overlay:800;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --motion-budget:1;
  --tap-min:24px;
}

@media (max-width:1600px){
  :root{
    --scale:.94
  }
}

@media (max-width:1280px){
  :root{
    --scale:.88
  }
}

@media (max-width:900px){
  :root{
    --scale:.9
  }
}

@media (pointer:coarse){
  :root{
    --scale:1; --tap-min:44px
  }
}

*,*::before,*::after{
  box-sizing:border-box
}

html{
  -webkit-text-size-adjust:100%
}

body{
  margin:0;font-family:var(--font-sans);background:var(--bg);color:var(--text)
}

img,svg,video,canvas{
  max-width:100%;height:auto
}

:where(h1,h2,h3,h4){
  font-family:var(--font-display);font-weight:500;margin:0
}

.container{
  width:100%;max-width:var(--content-max);margin-inline:auto;
  padding-inline:clamp(16px,4vw,48px)
}

.container--app{
  max-width:var(--app-max)
}

.prose{
  max-width:var(--prose-max)
}

.scroll-x{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;overscroll-behavior-x:contain
}

.scroll-x>*{
  min-width:max-content
}

.autogrid{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))
}

.full-h{
  min-height:100dvh
}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none;box-shadow:var(--focus-ring)
}

.tap{
  position:relative
}

.tap::after{
  content:"";position:absolute;inset:50% 50%;
  width:var(--tap-min);height:var(--tap-min);transform:translate(-50%,-50%)
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important
  }
}

@media print{
  body{
    background:#fff;color:#000
  }
  .no-print{
    display:none!important
  }
}

[data-theme="utility"]{
  --radius:6px;
  --radius-card:8px;
  --card-pad:calc(16px * var(--scale));
  --gap:calc(12px * var(--scale));
  --section-gap:calc(20px * var(--scale));
  --row-h:calc(38px * var(--scale));
  --h-control:calc(34px * var(--scale));
  --sidebar-w:calc(200px * var(--scale));
  --fs-h1:clamp(18px,1.15vw,21px);
  --fs-h2:clamp(15px,1vw,17px);
  --fs-body:14px;
  --fs-label:12px;
  --fs-data:13px;
  --lh:1.6;
  --dur:120ms;
  --dur-slow:200ms;
  --ease:cubic-bezier(.2,.6,.35,1);
  --bg:#f4f6f8;
  --surface:#ffffff;
  --surface-2:#fafbfc;
  --surface-hover:#eef2f6;
  --border:#e0e5eb;
  --border-strong:#c5ceda;
  --text:#141c26;
  --text-2:#4e5a68;
  --text-3:#65717f;
  --accent:#1f5f9e;
  --accent-bg:#e9f1fa;
  --accent-text:#124b7f;
  --on-accent:#ffffff;
  --success:#146c3d; --success-bg:#e6f4eb;
  --warning:#87510a; --warning-bg:#fcf2e2;
  --danger:#a52b21;  --danger-bg:#fbecea;
  --neutral:#4e5a68; --neutral-bg:#edf0f4;
  --nav-bg:#12253c;
  --nav-text:#a9bccf;
  --nav-active:#5a9bd8;
  --shadow:0 1px 2px rgba(16,32,48,.06);
  --shadow-pop:0 6px 20px rgba(16,32,48,.14);
  --focus-ring:0 0 0 2px var(--surface),0 0 0 4px var(--accent);
}

[data-theme="utility"][data-mode="dark"]{
  --bg:#14181d;
  --surface:#1b2027;
  --surface-2:#191e24;
  --surface-hover:#232932;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.2);
  --text:#e3e8ee;
  --text-2:#a4b0bd;
  --text-3:#8593a2;
  --accent:#5fa2e0;
  --accent-bg:rgba(95,162,224,.15);
  --accent-text:#8cc0ee;
  --on-accent:#0e1319;
  --success:#5fc98d; --success-bg:rgba(95,201,141,.14);
  --warning:#dda85a; --warning-bg:rgba(221,168,90,.14);
  --danger:#e58175;  --danger-bg:rgba(229,129,117,.14);
  --neutral:#a4b0bd; --neutral-bg:rgba(255,255,255,.07);
  --nav-bg:#10141a;
  --nav-text:#94a3b3;
  --nav-active:#5fa2e0;
  --shadow:none;
  --shadow-pop:0 8px 28px rgba(0,0,0,.5);
}

@media (prefers-color-scheme:dark){
  [data-theme="utility"]:not([data-mode]){
    --bg:#14181d; --surface:#1b2027; --surface-2:#191e24; --surface-hover:#232932;
    --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.2);
    --text:#e3e8ee; --text-2:#a4b0bd; --text-3:#8593a2;
    --accent:#5fa2e0; --accent-bg:rgba(95,162,224,.15); --accent-text:#8cc0ee; --on-accent:#0e1319;
    --success:#5fc98d; --success-bg:rgba(95,201,141,.14);
    --warning:#dda85a; --warning-bg:rgba(221,168,90,.14);
    --danger:#e58175;  --danger-bg:rgba(229,129,117,.14);
    --neutral:#a4b0bd; --neutral-bg:rgba(255,255,255,.07);
    --nav-bg:#10141a; --nav-text:#94a3b3; --nav-active:#5fa2e0;
    --shadow:none; --shadow-pop:0 8px 28px rgba(0,0,0,.5);
  }
}

@media (max-width:1280px){
  [data-theme="utility"]{
    --sidebar-w:56px
  }
}

@media (max-width:900px){
  [data-theme="utility"]{
    --sidebar-w:100%;
    --card-pad:14px;
  }
}

@media (max-width:640px){
  [data-theme="utility"]{
    --fs-h1:17px;
    --gap:10px;
  }
}

@media (pointer:coarse){
  [data-theme="utility"]{
    --row-h:48px;
    --h-control:44px;
  }
}

/* SHIROYORI仕様v1.3 §3の既存ブランド色。Studioのロゴと組み合わせる。
   元utilityトークンは維持し、アプリのアクセントとブランド面だけを上書きする。 */
[data-theme="utility"]{
  --brand-navy:#09265B; --brand-mint:#B5E6D8; --brand-white:#F7FAFF;
  --brand-blue:#7FA6ED;
  --accent:var(--brand-navy); --on-accent:var(--brand-white);
  --accent-bg:var(--brand-mint); --accent-text:var(--brand-navy);
  --studio-nav:var(--brand-navy); --studio-nav-text:var(--brand-white);
  --studio-nav-selected:var(--brand-mint); --studio-nav-selected-text:var(--brand-navy);
  --studio-logo-surface:#fff;
}
[data-theme="utility"][data-mode="dark"]{
  --accent:var(--brand-mint); --on-accent:var(--brand-navy);
  --accent-bg:var(--brand-navy); --accent-text:var(--brand-mint);
}
@media(prefers-color-scheme:dark){
  [data-theme="utility"]:not([data-mode]){
    --accent:var(--brand-mint); --on-accent:var(--brand-navy);
    --accent-bg:var(--brand-navy); --accent-text:var(--brand-mint);
  }
}


/* 既定絵文字のSMP範囲だけ既存OSフォントへ。外部URL/新規フォントなし。 */
@font-face{font-family:"SHIROYORI Local Emoji";src:local("Segoe UI Emoji"),local("SegoeUIEmoji");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+200D,U+FE0E-FE0F,U+1F004,U+1F0CF,U+1F18E,U+1F191-1F19A,U+1F1E6-1F1FF,U+1F201,U+1F21A,U+1F22F,U+1F232-1F236,U+1F238-1F23A,U+1F250-1F251,U+1F300-1F320,U+1F32D-1F335,U+1F337-1F37C,U+1F37E-1F393,U+1F3A0-1F3CA,U+1F3CF-1F3D3,U+1F3E0-1F3F0,U+1F3F4,U+1F3F8-1F43E,U+1F440,U+1F442-1F4FC,U+1F4FF-1F53D,U+1F54B-1F54E,U+1F550-1F567,U+1F57A,U+1F595-1F596,U+1F5A4,U+1F5FB-1F64F,U+1F680-1F6C5,U+1F6CC,U+1F6D0-1F6D2,U+1F6D5-1F6D8,U+1F6DC-1F6DF,U+1F6EB-1F6EC,U+1F6F4-1F6FC,U+1F7E0-1F7EB,U+1F7F0,U+1F90C-1F93A,U+1F93C-1F945,U+1F947-1F9FF,U+1FA70-1FA7C,U+1FA80-1FA8A,U+1FA8E-1FAC6,U+1FAC8,U+1FACD-1FADC,U+1FADF-1FAEA,U+1FAEF-1FAF8}