/* SPDX-License-Identifier: Apache-2.0 */
/* Copyright 2026 sabas0ba */

/*
 * saba.css — 図面 (drafting sheet) design system.
 * light は製図用紙と墨、dark は青焼き (diazo blueprint)。
 * 構造は罫線・frame・採番・表題欄で作り、card の影や角丸を使わない。
 */

@layer saba.tokens, saba.reset, saba.base, saba.components, saba.layout, site;

@layer saba.tokens {
  :root,
  :root[data-theme="light"] {
    color-scheme: light dark;

    --saba-bg: #f5f4ee;
    --saba-surface: #faf9f5;
    --saba-surface-raised: #eceae1;
    --saba-text: #2a2924;
    --saba-text-muted: #6f6c60;
    --saba-border: #cfccbd;
    --saba-border-strong: #2a2924;
    --saba-accent: #b0402f;
    --saba-accent-soft: color-mix(in srgb, var(--saba-accent) 12%, transparent);
    --saba-hatch: rgb(42 41 36 / 18%);
    --saba-grid-line: rgb(42 41 36 / 9%);

    --saba-code-comment: #7a7668;
    --saba-code-keyword: #b0402f;
    --saba-code-string: #2f4f6f;
    --saba-code-number: #5c5230;
    --saba-code-function: #4a3d7a;

    --saba-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "BIZ UDPGothic",
      "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic",
      "Noto Sans CJK JP", "Noto Sans JP", Meiryo, sans-serif;
    --saba-font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas,
      "Liberation Mono", "BIZ UDGothic", "Noto Sans Mono CJK JP", "Noto Sans Mono",
      monospace;

    --saba-space-1: 0.25rem;
    --saba-space-2: 0.5rem;
    --saba-space-3: 0.75rem;
    --saba-space-4: 1rem;
    --saba-space-6: 1.5rem;
    --saba-space-8: 2rem;
    --saba-space-12: 3rem;
    --saba-space-16: 4rem;

    --saba-gutter: 1.4rem;
    --saba-sheet-margin: clamp(0.8rem, 2.5vw, 2rem);
    --saba-measure: 48rem;
    --saba-page-width: 88rem;
    --saba-transition-fast: 150ms;
  }

  :root[data-theme="light"] { color-scheme: light; }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --saba-bg: #14293d;
      --saba-surface: #172e44;
      --saba-surface-raised: #1d3852;
      --saba-text: #d8e5f0;
      --saba-text-muted: #8aa4bb;
      --saba-border: #33506a;
      --saba-border-strong: #d8e5f0;
      --saba-accent: #e6c37c;
      --saba-accent-soft: color-mix(in srgb, var(--saba-accent) 16%, transparent);
      --saba-hatch: rgb(216 229 240 / 16%);
      --saba-grid-line: rgb(216 229 240 / 7%);
      --saba-code-comment: #7f97ac;
      --saba-code-keyword: #e6c37c;
      --saba-code-string: #bcd8ee;
      --saba-code-number: #9fc0dc;
      --saba-code-function: #d7c7f0;
    }
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --saba-bg: #14293d;
    --saba-surface: #172e44;
    --saba-surface-raised: #1d3852;
    --saba-text: #d8e5f0;
    --saba-text-muted: #8aa4bb;
    --saba-border: #33506a;
    --saba-border-strong: #d8e5f0;
    --saba-accent: #e6c37c;
    --saba-accent-soft: color-mix(in srgb, var(--saba-accent) 16%, transparent);
    --saba-hatch: rgb(216 229 240 / 16%);
    --saba-grid-line: rgb(216 229 240 / 7%);
    --saba-code-comment: #7f97ac;
    --saba-code-keyword: #e6c37c;
    --saba-code-string: #bcd8ee;
    --saba-code-number: #9fc0dc;
    --saba-code-function: #d7c7f0;
  }
}

@layer saba.reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; }
}

@layer saba.base {
  html { background: var(--saba-bg); }
  body {
    min-height: 100vh;
    background: var(--saba-bg);
    color: var(--saba-text);
    font-family: var(--saba-font-body);
    font-size: 15px;
    line-height: 1.75;
  }
  a { color: inherit; text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 3px; }
  code, pre, kbd, samp { font-family: var(--saba-font-mono); }
  :focus-visible { outline: 2px solid var(--saba-accent); outline-offset: 2px; }
  ::selection { background: var(--saba-text); color: var(--saba-bg); }
}

@layer saba.components {
  .saba-skip-link {
    position: fixed;
    z-index: 100;
    inset: var(--saba-space-2) auto auto var(--saba-space-2);
    padding: var(--saba-space-2) var(--saba-space-3);
    border: 1px solid var(--saba-border-strong);
    background: var(--saba-surface);
    color: var(--saba-text);
    font-family: var(--saba-font-mono);
    transform: translateY(calc(-100% - var(--saba-space-4)));
  }
  .saba-skip-link:focus { transform: translateY(0); }

  /* 図面 frame。外周の太線と内側の細線で 1 枚の sheet を作る。 */
  .saba-sheet {
    display: flex;
    flex-direction: column;
    margin: var(--saba-sheet-margin);
    min-height: calc(100vh - 2 * var(--saba-sheet-margin));
    border: 1.5px solid var(--saba-border-strong);
    outline: 1px solid var(--saba-border-strong);
    outline-offset: 3px;
  }

  .saba-site-header { border-bottom: 1px solid var(--saba-border-strong); }
  .saba-site-header__inner,
  .saba-site-footer__inner {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--saba-space-2) var(--saba-space-8);
    padding: 0.7rem var(--saba-gutter);
    font-family: var(--saba-font-mono);
    font-size: 0.8rem;
  }
  .saba-brand { color: var(--saba-text); font-weight: 700; letter-spacing: 0.02em; }
  .saba-brand__owner { color: var(--saba-text-muted); font-weight: 400; }
  .saba-nav { display: flex; flex-wrap: wrap; gap: var(--saba-space-1) var(--saba-space-6); margin-left: auto; }
  .saba-nav a { color: var(--saba-text-muted); }
  .saba-nav a:hover { color: var(--saba-text); text-decoration: none; }
  .saba-nav a[aria-current="page"] { color: var(--saba-text); border-bottom: 2px solid var(--saba-accent); }

  .saba-theme-switcher {
    display: inline-flex;
    margin-left: var(--saba-space-6);
    border: 1px solid var(--saba-border);
  }
  .saba-theme-switcher[hidden] { display: none; }
  .saba-theme-switcher button {
    min-height: 1.6rem;
    padding-inline: 0.55rem;
    border: 0;
    background: transparent;
    color: var(--saba-text-muted);
    font: 0.7rem/1 var(--saba-font-mono);
    cursor: pointer;
  }
  .saba-theme-switcher button + button { border-left: 1px solid var(--saba-border); }
  .saba-theme-switcher button[aria-pressed="true"] {
    background: var(--saba-text);
    color: var(--saba-bg);
  }

  .saba-card,
  .saba-panel {
    background: var(--saba-surface);
    border: 1px solid var(--saba-border);
  }
  .saba-card { transition: border-color var(--saba-transition-fast) ease; }
  .saba-card:hover { border-color: var(--saba-border-strong); }
  .saba-card__body { padding: var(--saba-space-4); }
  .saba-card__title { margin: 0 0 0.3rem; font: 700 0.98rem/1.4 var(--saba-font-mono); }
  .saba-card__desc { margin: 0; color: var(--saba-text-muted); font-size: 0.9rem; }

  /* 採番付きの図 (FIG. 01) 行。作品や項目の列挙に使う。 */
  .saba-fig {
    display: grid;
    grid-template-columns: 7rem 15rem minmax(0, 1fr);
    border-bottom: 1px solid var(--saba-border);
    color: inherit;
  }
  .saba-fig:hover { text-decoration: none; }
  .saba-fig:hover .saba-fig__title { text-decoration: underline; text-underline-offset: 3px; }
  .saba-fig__no {
    padding: 1.1rem var(--saba-gutter);
    border-right: 1px solid var(--saba-border);
    font-family: var(--saba-font-mono);
    font-size: 0.78rem;
    color: var(--saba-text-muted);
  }
  .saba-fig__thumb {
    display: grid;
    place-items: center;
    margin: 1.1rem 0;
    min-height: 6.5rem;
    border-right: 1px solid var(--saba-border);
    font: 700 1.1rem/1 var(--saba-font-mono);
  }
  .saba-fig__thumb > * { padding: 0.2rem 0.6rem; background: var(--saba-bg); }
  .saba-fig__body { padding: 1.1rem var(--saba-gutter); }
  .saba-fig__title { margin: 0; font: 700 1rem/1.4 var(--saba-font-mono); }
  .saba-fig__desc { margin: 0.3rem 0 0.5rem; max-width: 38rem; color: var(--saba-text-muted); font-size: 0.9rem; }

  /* 断面の hatching。gradient の代わりに使う placeholder 面。 */
  .saba-hatch {
    background: repeating-linear-gradient(45deg, transparent 0 7px, var(--saba-hatch) 7px 8px);
  }

  .saba-chip {
    display: inline-block;
    color: var(--saba-text-muted);
    font-family: var(--saba-font-mono);
    font-size: 0.75rem;
  }
  .saba-chip::before { content: "[ "; }
  .saba-chip::after { content: " ]"; }

  .saba-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding-inline: 0.9rem;
    border: 1px solid var(--saba-border-strong);
    background: transparent;
    color: var(--saba-text);
    font-family: var(--saba-font-mono);
    cursor: pointer;
  }
  .saba-button:hover { background: var(--saba-text); color: var(--saba-bg); }
  .saba-button--primary { background: var(--saba-text); color: var(--saba-bg); }
  .saba-button--primary:hover { background: var(--saba-accent); border-color: var(--saba-accent); color: var(--saba-bg); }

  .saba-input {
    min-height: 2.2rem;
    width: 100%;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--saba-border);
    background: var(--saba-surface);
    color: var(--saba-text);
    font-family: var(--saba-font-mono);
  }
  .saba-input:hover { border-color: var(--saba-border-strong); }

  /* 表題欄。sheet の右下に置き、識別情報を表にする。 */
  .saba-titleblock {
    display: grid;
    grid-template-columns: auto auto;
    margin-left: auto;
    border-left: 1px solid var(--saba-border-strong);
    font-family: var(--saba-font-mono);
    font-size: 0.7rem;
  }
  .saba-titleblock > * {
    padding: 0.35rem 0.9rem;
    border-bottom: 1px solid var(--saba-border);
  }
  .saba-titleblock > :nth-child(odd) { color: var(--saba-text-muted); border-right: 1px solid var(--saba-border); }
  .saba-titleblock > :nth-last-child(-n + 2) { border-bottom: 0; }
  .saba-titleblock__rev { color: var(--saba-accent); font-weight: 700; }

  .saba-site-footer {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: auto;
    border-top: 1px solid var(--saba-border-strong);
    color: var(--saba-text-muted);
  }
  .saba-site-footer__inner { padding-block: 0.9rem; font-size: 0.75rem; }
}

@layer saba.layout {
  .saba-page { width: 100%; max-width: var(--saba-page-width); padding-inline: var(--saba-gutter); }
  .saba-prose { width: min(100%, var(--saba-measure)); line-height: 1.85; }
  .saba-prose h1, .saba-prose h2, .saba-prose h3 { color: var(--saba-text); line-height: 1.4; }
  .saba-prose h1 { margin: 0 0 1.5rem; font: 700 clamp(1.6rem, 4vw, 2rem)/1.2 var(--saba-font-mono); letter-spacing: -0.02em; }
  .saba-prose h2 { margin: 2.75rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--saba-border-strong); font-size: 1.25rem; }
  .saba-prose h3 { margin: 2rem 0 0.75rem; font-size: 1.05rem; }
  .saba-prose p, .saba-prose ul, .saba-prose ol { margin: 1rem 0; }
  .saba-prose a { color: var(--saba-accent); }
  .saba-prose :not(pre) > code { padding: 0.1em 0.3em; background: var(--saba-surface-raised); }
  .saba-prose pre { overflow-x: auto; padding: 1rem; border: 1px solid var(--saba-border); background: var(--saba-surface); line-height: 1.65; }
  .saba-prose blockquote { margin: 1rem 0; padding: 0.2rem 0 0.2rem 1rem; border-left: 3px solid var(--saba-border-strong); color: var(--saba-text-muted); }
  .saba-prose table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
  .saba-prose th, .saba-prose td { padding: 0.55rem 0.7rem; border: 1px solid var(--saba-border); text-align: left; }
  .saba-prose th { background: var(--saba-surface-raised); font-family: var(--saba-font-mono); font-size: 0.8rem; }

  /* 方眼。dot grid ではなく製図用紙の細い罫線。 */
  .saba-grid-background {
    background:
      linear-gradient(var(--saba-grid-line) 1px, transparent 1px) 0 0 / 26px 26px,
      linear-gradient(90deg, var(--saba-grid-line) 1px, transparent 1px) 0 0 / 26px 26px,
      var(--saba-bg);
  }
  .saba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--saba-space-4); }
}

@media (max-width: 42rem) {
  .saba-nav { width: 100%; margin-left: 0; }
  .saba-theme-switcher { margin-left: 0; }
  .saba-fig { grid-template-columns: 4rem minmax(0, 1fr); }
  .saba-fig__thumb { display: none; }
  .saba-titleblock { flex: 1 1 100%; margin-left: 0; border-left: 0; border-top: 1px solid var(--saba-border); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/*
 * print は @layer の外 (unlayered) に置く。cascade layer の規則により、
 * layered な theme token (:root[data-theme="dark"] を含む) より常に優先される。
 */
@media print {
  :root {
    --saba-bg: #fff;
    --saba-surface: #fff;
    --saba-surface-raised: #f2f2f2;
    --saba-text: #000;
    --saba-text-muted: #333;
    --saba-border: #aaa;
    --saba-border-strong: #000;
    --saba-accent: #000;
    --saba-sheet-margin: 0;
  }
  .saba-theme-switcher, .saba-skip-link { display: none; }
  .saba-sheet { outline: 0; min-height: 0; }
  body { background: #fff; color: #000; }
  .saba-prose { max-width: none; }
}