/* ===================================================================
 * DADS Semantic Alias Layer (PREVIEW — 未配備)
 *
 * 配備先候補: public_html/assets/css/dads-semantic.css
 *
 * このファイルは DADS primitive (dads-primitive.css) を import 後に読込み、
 * プロジェクト固有の semantic 名で primitive を別名化する層。
 * コンポーネント側は必ずこの semantic 変数を参照すること。
 * primitive 直接参照を component CSS に書いた瞬間、Dark Mode 移行や
 * rebrand のコストが跳ね上がるため、**規律として禁止**。
 *
 * 参照: docs/phase1.5/plan.md §3
 * 出典 (primitive): @digital-go-jp/design-tokens@1.1.9
 * =================================================================== */

:root {
  /* ----- Surface --------------------------------------------------- */
  --c-bg-page:      var(--color-neutral-solid-gray-50);   /* #f2f2f2 */
  --c-bg-surface:   var(--color-neutral-white);           /* #ffffff */
  --c-bg-subtle:    var(--color-neutral-solid-gray-50);
  --c-bg-overlay:   var(--color-neutral-opacity-gray-500);

  /* ----- Text ------------------------------------------------------ */
  --c-text-strong:   var(--color-neutral-solid-gray-900); /* 見出し  #1a1a1a */
  --c-text-body:     var(--color-neutral-solid-gray-700); /* 本文    #4d4d4d */
  --c-text-muted:    var(--color-neutral-solid-gray-536); /* 補助    #767676 (4.54:1 white 上) */
  --c-text-disabled: var(--color-neutral-solid-gray-300); /* 無効    #b3b3b3 */
  --c-text-on-fill:  var(--color-neutral-white);
  --c-text-link:     var(--color-primitive-blue-900);     /* #0017c1 */
  --c-text-link-hover: var(--color-primitive-blue-1000);  /* #00118f */

  /* ----- Border ---------------------------------------------------- */
  --c-border:        var(--color-neutral-solid-gray-200); /* #cccccc */
  --c-border-subtle: var(--color-neutral-solid-gray-100); /* #e6e6e6 */
  --c-border-strong: var(--color-neutral-solid-gray-700); /* #4d4d4d */
  --c-border-focus:  var(--color-primitive-blue-900);

  /* ----- Brand ----------------------------------------------------- */
  --c-brand:         var(--color-primitive-blue-900);     /* #0017c1 — DADS 公式 */
  --c-brand-hover:   var(--color-primitive-blue-1000);
  --c-brand-active:  var(--color-primitive-blue-1100);
  --c-brand-tint:    var(--color-primitive-blue-50);      /* selected bg 等 */
  --c-brand-text:    var(--color-primitive-blue-900);

  /* ----- Status (semantic) ----------------------------------------- */
  --c-success:    var(--color-semantic-success-1);        /* green-600 #259d63 */
  --c-success-bg: var(--color-primitive-green-50);        /* #e6f5ec */
  --c-success-border: var(--color-primitive-green-200);
  --c-error:      var(--color-semantic-error-1);          /* red-800 #ec0000 */
  --c-error-bg:   var(--color-primitive-red-50);          /* #fdeeee */
  --c-error-border: var(--color-primitive-red-200);
  --c-warning:    var(--color-semantic-warning-orange-1); /* orange-600 #fb5b01 */
  --c-warning-bg: var(--color-primitive-orange-50);       /* #ffeee2 */
  --c-warning-border: var(--color-primitive-orange-200);
  --c-info:       var(--color-primitive-light-blue-700);  /* light-blue-700 #0877d7 */
  --c-info-bg:    var(--color-primitive-light-blue-50);   /* #f0f9ff */
  --c-info-border: var(--color-primitive-light-blue-200);

  /* ----- Typography composite (font shorthand) -------------------- */
  /* font-shorthand 順: weight size/line-height family */
  --t-display:  700 var(--font-size-36)/1.4   var(--font-family-sans);
  --t-h1:       700 var(--font-size-28)/1.4   var(--font-family-sans);
  --t-h2:       700 var(--font-size-24)/1.5   var(--font-family-sans);
  --t-h3:       700 var(--font-size-20)/1.5   var(--font-family-sans);
  --t-h4:       700 var(--font-size-18)/1.5   var(--font-family-sans);
  --t-body-lg:  400 var(--font-size-17)/1.7   var(--font-family-sans);
  --t-body:     400 var(--font-size-16)/1.7   var(--font-family-sans);
  --t-body-sm:  400 var(--font-size-14)/1.7   var(--font-family-sans);
  --t-caption:  400 var(--font-size-14)/1.5   var(--font-family-sans);
  --t-mono:     400 var(--font-size-14)/1.5   var(--font-family-mono);

  /* ----- Spacing (4/8 grid — DADS 範疇外、本プロジェクトの規約) -- */
  --sp-1: 0.25rem;  /*  4px */
  --sp-2: 0.5rem;   /*  8px */
  --sp-3: 0.75rem;  /* 12px */
  --sp-4: 1rem;     /* 16px (default unit) */
  --sp-5: 1.5rem;   /* 24px */
  --sp-6: 2rem;     /* 32px */
  --sp-7: 3rem;     /* 48px */
  --sp-8: 4rem;     /* 64px */
  --sp-9: 5rem;     /* 80px */

  /* ----- Container max-widths ------------------------------------- */
  --cw-xl: 1200px;
  --cw-lg:  960px;
  --cw-md:  720px;
  --cw-sm:  480px;

  /* ----- Z-index scale -------------------------------------------- */
  --z-base:    0;
  --z-content: 10;
  --z-fixed:   20;
  --z-overlay: 40;
  --z-modal:   100;
  --z-toast:   1000;

  /* ----- Motion (Phase 1.5 では最小限) ---------------------------- */
  --motion-fast:    150ms;
  --motion-base:    200ms;
  --motion-slow:    300ms;
  --motion-ease:    cubic-bezier(0.2, 0, 0, 1);   /* MD ease-emphasized */
  --motion-ease-out:cubic-bezier(0.0, 0, 0.2, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ----- Component height tokens (touch friendly) ----------------- */
  --h-control-sm: 32px;
  --h-control:    40px;
  --h-control-lg: 48px;

  /* ----- Focus ring ----------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--c-bg-surface), 0 0 0 4px var(--c-border-focus);
}

/* prefers-reduced-motion 尊重 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}

/* (Phase 2) Dark Mode 拡張ポイント
:root[data-theme="dark"] {
  --c-bg-page:    #0a0a0a;
  --c-bg-surface: #161616;
  --c-text-strong:#f2f2f2;
  ...
}
*/