/*
 * デザイントークンとテーマ。
 * 値は frontend/src/shared/tokens/theme.css の @theme と html[data-theme='dark'] を写したもの。
 * 製品側のトークンを変えたときは、この2ブロックを同じ値へ合わせる。
 */

:root {
  /* Brand */
  --color-primary: #224bd2;
  --color-primary-dark: #1f2533;
  --color-primary-contrast: #e5e8ed;
  --color-secondary: #0a4ecd;
  --color-secondary-dark: #083aaa;

  /* Semantic */
  --color-ok: #2fc07c;
  --color-warn: #e89e00;
  --color-crit: #c82e20;

  /* Surfaces (4 levels) */
  --color-bg: #fbfdff;
  --color-bg-2: #f0f5fb;
  --color-bg-3: #e8f4ff;
  --color-bg-4: #d3e2f7;

  /* Lines */
  --color-line: #8fa8c0;
  --color-line-2: #dfe2ea;

  /* Foreground */
  --color-fg: #012452;
  --color-fg-2: #6b7a8e;
  --color-fg-3: #224bd2;
  --color-fg-4: #8aadc8;

  /* Typography families */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Hiragino Kaku Gothic ProN',
    'Hiragino Sans', meiryo, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, sfmono-regular, menlo, monospace;
  --font-display: 'Barlow', 'Geist', ui-sans-serif, system-ui, sans-serif;

  /* Radius: 表・カードは 0、操作要素は 4px */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-full: 9999px;
}

/* ダークテーマ。値は製品側の html[data-theme='dark'] と同一。 */
html[data-theme='dark'] {
  color-scheme: dark;

  --color-primary: oklch(68% 0.152 262deg);
  --color-primary-dark: oklch(78% 0.13 262deg);
  --color-primary-contrast: oklch(18% 0.03 262deg);
  --color-secondary: oklch(70% 0.15 262deg);
  --color-secondary-dark: oklch(62% 0.15 262deg);

  --color-ok: oklch(74% 0.14 148deg);
  --color-warn: oklch(80% 0.13 72deg);
  --color-crit: oklch(70% 0.17 26deg);

  --color-bg: oklch(21.5% 0.018 258deg);
  --color-bg-2: oklch(25.5% 0.019 258deg);
  --color-bg-3: oklch(29.5% 0.021 256deg);
  --color-bg-4: oklch(34% 0.028 256deg);

  --color-line: oklch(42% 0.022 252deg);
  --color-line-2: oklch(32% 0.019 254deg);

  --color-fg: oklch(93.5% 0.008 250deg);
  --color-fg-2: oklch(76% 0.014 250deg);
  --color-fg-3: oklch(68% 0.035 250deg);
  --color-fg-4: oklch(52% 0.008 250deg);
}

/* system 指定と未指定は、OS がダークのときだけダークにする。 */
@media (prefers-color-scheme: dark) {
  html[data-theme='system'],
  html:not([data-theme]) {
    color-scheme: dark;

    --color-primary: oklch(68% 0.152 262deg);
    --color-primary-dark: oklch(78% 0.13 262deg);
    --color-primary-contrast: oklch(18% 0.03 262deg);
    --color-secondary: oklch(70% 0.15 262deg);
    --color-secondary-dark: oklch(62% 0.15 262deg);

    --color-ok: oklch(74% 0.14 148deg);
    --color-warn: oklch(80% 0.13 72deg);
    --color-crit: oklch(70% 0.17 26deg);

    --color-bg: oklch(21.5% 0.018 258deg);
    --color-bg-2: oklch(25.5% 0.019 258deg);
    --color-bg-3: oklch(29.5% 0.021 256deg);
    --color-bg-4: oklch(34% 0.028 256deg);

    --color-line: oklch(42% 0.022 252deg);
    --color-line-2: oklch(32% 0.019 254deg);

    --color-fg: oklch(93.5% 0.008 250deg);
    --color-fg-2: oklch(76% 0.014 250deg);
    --color-fg-3: oklch(68% 0.035 250deg);
    --color-fg-4: oklch(52% 0.008 250deg);
  }
}

/* ------------------------------------------------------------------ reset */

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

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#app {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

dl,
dd,
dt,
p,
h1,
h2,
h3 {
  margin: 0;
}

/* --------------------------------------------------------- text utilities */

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.h1 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.fg-2 {
  color: var(--color-fg-2);
}

.fg-4 {
  color: var(--color-fg-4);
}

.crit {
  color: var(--color-crit);
}

.warn {
  color: var(--color-warn);
}

.ok {
  color: var(--color-ok);
}

.medium {
  font-weight: 500;
}