/* ==========================================================================
   YSGT Design System — Tokens
   源勝實業 YSGT 企業網站　設計代幣（色彩 / 字體 / 間距 / 圓角 / 陰影 / 動態）
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --ys-red-600: #e60000;   /* 唯一動作色 */

  /* 深色底上的品牌紅。#e60000 在 ink-900 上的對比只有 3.96，低於 WCAG AA
     對一般文字要求的 4.5；提亮後為 5.39，視覺上仍是同一個紅。
     只用於深色背景的文字與數字，一般白底仍用 --ys-red-600。 */
  --ys-red-onDark: #ff3b3b;
  --ys-red-700: #b80000;   /* hover 加深 */
  --ys-yellow:  #ffef00;   /* < 5% 點綴 */
  --ys-silver:  #e5e7ef;
  --steel-blue: #9fb0c5;    /* 工程圖線色，只作低彩度輔助 */

  /* ---- Ink scale ------------------------------------------------------ */
  --ink-900: #0e1013;
  --ink-800: #171a1f;
  --ink-700: #22262d;
  --ink-600: #343941;
  --ink-500: #4b515b;
  --ink-400: #626973;
  --ink-300: #a1a7b3;
  --ink-200: #c8ccd4;
  --ink-100: #e4e6ea;
  --ink-050: #f4f5f7;
  --white:   #ffffff;

  /* ---- Semantic ------------------------------------------------------- */
  --text-heading:    var(--ink-900);
  --text-body:       var(--ink-700);
  --text-muted:      var(--ink-400);
  --border-default:  #dfe1e6;
  --border-strong:   #b8bec8;
  --surface-subtle:  var(--ink-050);
  --surface-panel:   #f9fafb;
  --sheen-steel: linear-gradient(120deg,
      rgba(229, 231, 239, .50) 0%,
      rgba(229, 231, 239, 0)   45%,
      rgba(229, 231, 239, .28) 100%);
  --blueprint-grid:
    linear-gradient(rgba(159, 176, 197, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 176, 197, .09) 1px, transparent 1px);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Saira", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-body:    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Saira", sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-h1: 48px;
  --fs-h2: 40px;
  --fs-h3: 22px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --fs-eyebrow: 11px;

  --lh-display: 1.18;
  --lh-body: 1.75;
  --ls-eyebrow: .22em;
  --ls-display: .01em;

  /* ---- Spacing (4px base) --------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-14: 56px; --sp-16: 64px; --sp-24: 96px;

  --content-max: 1440px;
  --page-pad: 40px;
  --page-pad-sm: 20px;
  --grid-gap: 24px;
  --section-rhythm: 96px;

  /* ---- Radius (預設方形) ----------------------------------------------- */
  --radius-none: 0;
  --radius-badge: 2px;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-none: none;
  --shadow-1: 0 1px 3px rgba(14, 16, 19, .16);
  --shadow-2: 0 12px 32px rgba(14, 16, 19, .22);
  --shadow-hover: 0 6px 16px rgba(14, 16, 19, .18);
  --shadow-cta: 0 8px 20px rgba(14, 16, 19, .28);
  --shadow-panel: 0 18px 44px rgba(14, 16, 19, .10);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-control: 160ms;
  --t-surface: 240ms;
}

@media (max-width: 900px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 27px;
    --fs-lead: 16px;
    --page-pad: var(--page-pad-sm);
    --section-rhythm: 64px;
  }
}