@import 'tailwindcss';

/*
 * 動的に生成されるクラスを明示的にプリコンパイル
 *
 * 使用経緯:
 * UiKit::Badge::Component の dot_color_class_for メソッドでは、
 * 文字列補間により動的にクラス名（例: "fill-#{color_name}-500"）を生成している。
 * Tailwind CSS v4 の自動ソース検出では、このような動的に生成されるクラス名を
 * 検出できないため、プリコンパイル時に削除されてしまう。
 *
 * 解決策として、@source inline ディレクティブを使用して必要なクラスを
 * 明示的に指定することで、確実にプリコンパイルされるようにしている。
 *
 * 関連コード: app/views/components/ui_kit/badge/component.rb の dot_color_class_for メソッド
 */
@source inline('fill-gray-400 fill-red-500 fill-yellow-500 fill-green-500 fill-blue-500 fill-indigo-500 fill-purple-500 fill-pink-500 fill-hq-500 fill-branch-500 fill-contract-company-500 fill-facility-500 fill-work-site-500');

@layer base {
  body {
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
    text-autospace: normal;
    @apply font-sans;
  }

  .revert-tailwind {
    all: initial;
  }

  .revert-tailwind * {
    all: revert;
  }
}

@theme {
  --font-sans: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
  --breakpoint-sm: 1px;
  --breakpoint-md: 1px;
  --breakpoint-lg: 1px;
  --breakpoint-xl: 1px;
  --breakpoint-2xl: 1px;
  --breakpoint-3xl: 1px;
  --breakpoint-4xl: 1px;
  --breakpoint-5xl: 1px;
  --breakpoint-6xl: 1px;
  --breakpoint-7xl: 1px;
  --breakpoint-8xl: 1px;
  --color-blue-ribbon-50: oklch(0.957 0.019 276.39);
  --color-blue-ribbon-100: oklch(0.915 0.038 277.6);
  --color-blue-ribbon-200: oklch(0.83 0.08 274.38);
  --color-blue-ribbon-300: oklch(0.745 0.123 271.84);
  --color-blue-ribbon-400: oklch(0.67 0.162 268.1);
  --color-blue-ribbon-500: oklch(0.584 0.211 261.77);
  --color-blue-ribbon-600: oklch(0.499 0.185 261.19);
  --color-blue-ribbon-700: oklch(0.404 0.15 261.12);
  --color-blue-ribbon-800: oklch(0.317 0.117 261.15);
  --color-blue-ribbon-900: oklch(0.228 0.084 261.43);
  --color-blue-ribbon-950: oklch(0.18 0.066 261.41);
  --color-gradient-dark: oklch(0.3859 0.1105 261.43);
  --color-gradient-light: oklch(0.4917 0.121364 244.0492);
  /* Badge role colors */
  --color-hq-50: #fdf4ff;
  --color-hq-500: #ed6aff;
  --color-hq-600: #e12afb;
  --color-branch-50: #faf5ff;
  --color-branch-500: #c27aff;
  --color-branch-600: #ad46ff;
  --color-contract-company-50: #eef2ff;
  --color-contract-company-500: #7c86ff;
  --color-contract-company-600: #615fff;
  --color-facility-50: #f0f9ff;
  --color-facility-500: #00bcff;
  --color-facility-600: #00a6f4;
  --color-work-site-50: #f0fdfa;
  --color-work-site-500: #2e9489;
  --color-work-site-600: #00bba7;
  --color-graph-wbgt-500: #00c950;
  --color-graph-temperature-500: #2b7fff;
  --color-graph-humidity-500: #fb2c36;
  --color-graph-threshold-500: #6b7280;
}

:root {
  --leading-trim: calc((1em - 1lh) / 2);
}

@utility leading-trim {
  margin-block: var(--leading-trim);
}