/* ============================================================
   tokens.css — サンプルアプリのデザイントークン
   ★ここを変えると全サンプルアプリの見た目が一括で変わる（色は各サンプルで直書きしない）

   2026-09-03 明色に変更。
   ギャラリーサイト（web-app-lab テーマ）と「同じ家族・役割は別」の関係にしてある：
     ・アクセントの朱 #EF4B2C / 橙 #DF6D2F はサイトと同一 → 並べると地続きに見える
     ・背景はサイトの紙(#f5f1e9)より白く寄せる → 表と数字が沈まないようにするため
     ・見出しはゴシックのまま（サイトは明朝。密度の高い業務画面に明朝は読みにくい）
   状態色は明背景で本文コントラスト比 4.5:1（WCAG AA）以上になる濃さに振ってある。
   ============================================================ */

:root{
  /* --- 色 ------------------------------------------------ */
  --c-base:      #FAF8F4;   /* ページ背景 */
  --c-surface:   #FFFFFF;   /* カード面。表・数字はここに載せる */
  --c-surface-2: #F1EDE6;   /* 一段浮いた面 / ホバー */
  --c-line:      #DFD8CC;   /* 罫線・枠線 */
  --c-text:      #1B1A18;   /* 本文 */
  --c-text-dim:  #4A453F;   /* やや弱い本文 */
  --c-muted:     #6E675F;   /* キャプション・補足（背景 #FAF8F4 で 5.3:1） */
  --c-accent:    #EF4B2C;   /* ブランド：朱。塗り・枠・グラデ用 */
  --c-accent-2:  #DF6D2F;   /* ブランド：橙 */
  --c-accent-ink:#B02F13;   /* ★文字にアクセント色を使うときはこちら（白地で 6.1:1）
                               --c-accent は白地で 3.7:1 しかなく本文には足りない */
  --c-on-accent: #FFFFFF;   /* アクセント面の上に載る文字 */

  /* 状態色（すべて白地で 5:1 以上） */
  --c-ok:   #0F7B53;
  --c-warn: #A15C00;
  --c-ng:   #B3261E;
  --c-info: #175CD3;

  /* --- rgb成分（半透明で使うため。rgba(var(--x-rgb), .12) の形で参照する） --- */
  --c-accent-rgb:   239, 75, 44;
  --c-accent-2-rgb: 223,109, 47;
  --c-ok-rgb:        15,123, 83;
  --c-warn-rgb:     161, 92,  0;
  --c-ng-rgb:       179, 38, 30;
  --c-info-rgb:      23, 92,211;
  --c-line-rgb:     223,216,204;
  --c-ink-rgb:       27, 26, 24;

  /* --- 状態の淡い面と枠（バッジ・予約ブロックなどの塗り分け） --- */
  --c-ok-bg:     rgba(var(--c-ok-rgb),    .15);
  --c-ok-bd:     rgba(var(--c-ok-rgb),    .45);
  --c-warn-bg:   rgba(var(--c-warn-rgb),  .16);
  --c-warn-bd:   rgba(var(--c-warn-rgb),  .48);
  --c-ng-bg:     rgba(var(--c-ng-rgb),    .11);
  --c-ng-bd:     rgba(var(--c-ng-rgb),    .40);
  --c-info-bg:   rgba(var(--c-info-rgb),  .14);
  --c-info-bd:   rgba(var(--c-info-rgb),  .45);
  --c-accent-bg: rgba(var(--c-accent-rgb),.10);
  --c-accent-bd: rgba(var(--c-accent-rgb),.40);

  /* --- そのほかの面 --------------------------------------- */
  --c-line-soft:   rgba(var(--c-line-rgb), .85);   /* 表の細い罫線 */
  --c-scrim:       rgba(var(--c-ink-rgb),  .42);   /* モーダルの背景 */
  --c-tooltip-bg:  rgba(32, 32, 31, .96);          /* トーストは濃色のまま（明画面での視認性が上がる） */
  --c-tooltip-text:#FFFFFF;

  /* --- グラデーション ------------------------------------- */
  --grad-brand: linear-gradient(100deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
  --grad-text:  linear-gradient(100deg, var(--c-accent-ink) 10%, var(--c-accent-2) 90%);
  --grad-glow:  radial-gradient(60% 60% at 50% 0%, rgba(var(--c-accent-rgb), .10) 0%, transparent 70%);

  /* --- タイポグラフィ ------------------------------------- */
  --f-sans:    'Noto Sans JP', system-ui, -apple-system, 'Hiragino Sans', sans-serif;
  --f-display: 'Space Grotesk', 'Noto Sans JP', sans-serif;

  /* 見出しは clamp() でレスポンシブ（メディアクエリ不要） */
  --fs-hero:  clamp(2.125rem, 1.35rem + 3.1vw, 3.5rem);
  --fs-h2:    clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
  --fs-h3:    clamp(1.125rem, .95rem + .8vw, 1.5rem);
  --fs-lead:  clamp(.95rem, .9rem + .35vw, 1.125rem);
  --fs-body:  1rem;
  --fs-sm:    .875rem;
  --fs-xs:    .75rem;
  --fs-label: .6875rem;  /* SERVICE / FEATURE などの英字ラベル */

  --lh-tight: 1.25;
  --lh-body:  1.9;      /* 日本語は行間を広めに取ると一気に上品になる */
  --ls-label: .18em;    /* 英字ラベルの字間 */

  /* --- 余白（8pxベースのスケール） ------------------------- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --sec-y: clamp(4rem, 2rem + 8vw, 8rem);   /* セクション上下 */
  --gutter: clamp(1.25rem, .5rem + 2.5vw, 2.5rem);
  --wrap: 1200px;                            /* コンテンツ最大幅 */

  /* --- 角丸・線・影 --------------------------------------- */
  --r-sm: 8px; --r-card: 14px; --r-lg: 24px; --r-pill: 999px;
  --bd: 1px solid var(--c-line);
  --sh-card: 0 1px 2px rgba(var(--c-ink-rgb), .05), 0 8px 24px rgba(var(--c-ink-rgb), .07);
  --sh-lift: 0 2px 6px rgba(var(--c-ink-rgb), .07), 0 20px 48px rgba(var(--c-ink-rgb), .13);
  --sh-glow: 0 0 0 1px rgba(var(--c-accent-rgb), .30), 0 12px 40px rgba(var(--c-accent-rgb), .16);

  /* --- モーション ----------------------------------------- */
  --ease:      cubic-bezier(.22,1,.36,1);      /* 標準（出現・移動） */
  --ease-soft: cubic-bezier(.4,0,.2,1);        /* ホバー等の小さい変化 */
  --d-fast: .18s; --d-base: .34s; --d-slow: .7s;

  /* --- レイヤー ------------------------------------------- */
  --z-bg: 0; --z-content: 1; --z-header: 100; --z-overlay: 200; --z-toast: 300;
}

/* 全面に薄くかけるノイズ（紙の質感を出す）
   使い方: <body> に <div class="grain" aria-hidden="true"></div> を1つ置く */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:var(--z-overlay);
  opacity:.030; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 文字にブランドグラデをかける */
.txt-grad{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* 英字ラベル（SERVICE / FEATURE / WORKS ...） */
.eyebrow{
  font-family:var(--f-display); font-size:var(--fs-label); font-weight:600;
  letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--c-accent-ink);
}