/* Atlas Design System — design-tokens.css
   Construction SaaS 向けトークン定義
   参照: CLAUDE-UI-DESIGN.md
*/

/* ─── Primitive (原始) トークン ─── */
:root {
  /* Brand Primitives */
  --brand-orange-400: #ff8c33;
  --brand-orange-500: #ff6b00;
  --brand-orange-600: #cc5500;
  --brand-indigo-700: #2f3a8a;
  --brand-gold-400:   #c8a86b;
  --brand-blue-500:   #007aff;
  --brand-blue-600:   #0062cc;

  /* Neutral Primitives (dark scale) */
  --neutral-000: #ffffff;
  --neutral-050: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --neutral-950: #020617;

  /* Status Primitives */
  --prim-success: #22c55e;
  --prim-warning: #ffcc00;
  --prim-danger:  #f87171;
  --prim-info:    #60a5fa;
}

/* ─── Universal バリアント (デフォルト / ライトテーマ) ─── */
[data-variant="universal"], :root {
  --accent:          var(--brand-blue-500);
  --accent-pressed:  var(--brand-blue-600);
  --accent-soft:     color-mix(in srgb, var(--brand-blue-500) 12%, transparent);

  --bg-canvas:       var(--neutral-050);
  --bg-surface:      var(--neutral-000);
  --bg-surface-2:    var(--neutral-100);
  --bg-surface-3:    var(--neutral-200);
  --bg-overlay:      rgba(0, 0, 0, 0.48);

  --border-subtle:   var(--neutral-200);
  --border-default:  var(--neutral-300);
  --border-strong:   var(--neutral-500);

  --fg-default:      var(--neutral-900);
  --fg-secondary:    var(--neutral-600);
  --fg-tertiary:     var(--neutral-400);
  --fg-on-accent:    var(--neutral-000);

  --status-success:  var(--prim-success);
  --status-warning:  var(--prim-warning);
  --status-danger:   var(--prim-danger);
  --status-info:     var(--prim-info);
  --status-success-bg: color-mix(in srgb, var(--prim-success) 10%, transparent);
  --status-warning-bg: color-mix(in srgb, var(--prim-warning) 10%, transparent);
  --status-danger-bg:  color-mix(in srgb, var(--prim-danger)  10%, transparent);
  --status-info-bg:    color-mix(in srgb, var(--prim-info)    10%, transparent);

  --touch-min:     44px;

  /* Typography scale */
  --font-sans:     -apple-system, "SF Pro Text", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", "Fira Code", Consolas, monospace;
  --fs-caption2:   11px;
  --fs-caption1:   12px;
  --fs-footnote:   13px;
  --fs-subhead:    15px;
  --fs-callout:    16px;
  --fs-body:       17px;
  --fs-headline:   17px;
  --fs-title3:     20px;
  --fs-title2:     22px;
  --fs-title1:     28px;
  --fs-largetitle: 34px;
  --fs-display:    48px;
  --lh-tight:      1.2;
  --lh-normal:     1.45;
  --lh-relaxed:    1.6;
  --tracking-display: -0.022em;
  --tracking-title:   -0.012em;

  /* Spacing (4pt/8pt grid) */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-10: 48px;
  --space-12: 64px;
  --space-16: 96px;

  /* Radius */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* Elevation */
  --elev-1:     0 1px 2px rgba(15,17,21,.06), 0 1px 1px rgba(15,17,21,.04);
  --elev-2:     0 4px 12px rgba(15,17,21,.10), 0 2px 4px rgba(15,17,21,.06);
  --elev-3:     0 8px 24px rgba(15,17,21,.14), 0 4px 8px rgba(15,17,21,.08);
  --elev-modal: 0 24px 64px rgba(15,17,21,.22), 0 8px 24px rgba(15,17,21,.14);

  /* Motion */
  --ease-standard:  cubic-bezier(.4, 0, .2, 1);
  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
  --dur-1:  100ms;
  --dur-2:  150ms;
  --dur-3:  200ms;
  --dur-4:  300ms;
  --dur-5:  400ms;

  /* 後方互換エイリアス (既存コードが --c-primary 等を参照している場合) */
  --c-primary:       var(--accent);
  --c-primary-dark:  var(--accent-pressed);
  --c-bg:            var(--bg-canvas);
  --c-bg-card:       var(--bg-surface);
  --c-border:        var(--border-default);
  --c-text:          var(--fg-default);
  --c-text-sub:      var(--fg-secondary);
  --c-text-muted:    var(--fg-tertiary);
  --c-success:       var(--status-success);
  --c-danger:        var(--status-danger);
  --c-warning:       var(--status-warning);
  --c-info:          var(--status-info);
}

/* ─── Construction バリアント ─── */
[data-variant="construction"] {
  --accent:          var(--brand-orange-500); /* Safety Orange */
  --accent-pressed:  var(--brand-orange-600);
  --accent-soft:     color-mix(in srgb, var(--brand-orange-500) 12%, transparent);
  --touch-min:       48px;  /* グローブ対応 */

  /* 屋外コントラスト強化 */
  --border-default:  #b9bec7;
  --fg-secondary:    #4a4d54;

  /* 建設固有の状態色 */
  --status-active:   #22c55e;
  --status-onhold:   #94a3b8;
  --status-delayed:  #f87171;
  --status-complete: #60a5fa;

  /* 後方互換 */
  --c-primary:       var(--accent);
  --c-primary-dark:  var(--accent-pressed);
}

/* ─── Real Estate バリアント ─── */
[data-variant="realestate"] {
  --accent:          var(--brand-indigo-700); /* Deep Estate Indigo */
  --accent-pressed:  #252f70;
  --accent-soft:     color-mix(in srgb, var(--brand-indigo-700) 12%, transparent);
  --accent-2:        var(--brand-gold-400);   /* Warm Gold */

  --bg-canvas:       #faf8f5; /* warm off-white */

  /* 後方互換 */
  --c-primary:       var(--accent);
  --c-primary-dark:  var(--accent-pressed);
}

/* ─── ダークテーマ ─── */
[data-theme="dark"] {
  --bg-canvas:       var(--neutral-900);
  --bg-surface:      var(--neutral-800);
  --bg-surface-2:    var(--neutral-700);
  --bg-surface-3:    var(--neutral-600);
  --bg-overlay:      rgba(0, 0, 0, 0.72);

  --border-subtle:   var(--neutral-700);
  --border-default:  var(--neutral-600);
  --border-strong:   var(--neutral-400);

  --fg-default:      var(--neutral-100);
  --fg-secondary:    var(--neutral-300);
  --fg-tertiary:     var(--neutral-500);

  --elev-1:     0 1px 2px rgba(0,0,0,.24), 0 1px 1px rgba(0,0,0,.16);
  --elev-2:     0 4px 12px rgba(0,0,0,.32), 0 2px 4px rgba(0,0,0,.20);
  --elev-3:     0 8px 24px rgba(0,0,0,.40), 0 4px 8px rgba(0,0,0,.24);
  --elev-modal: 0 24px 64px rgba(0,0,0,.56), 0 8px 24px rgba(0,0,0,.36);

  /* 後方互換 */
  --c-bg:       var(--bg-canvas);
  --c-bg-card:  var(--bg-surface);
  --c-border:   var(--border-default);
  --c-text:     var(--fg-default);
  --c-text-sub: var(--fg-secondary);
  --c-text-muted: var(--fg-tertiary);
}