/* Craft V1 Design Tokens v0.1
   視覺權威：docs/craft-v1-設計規範.md
   頁面與元件只能引用語意 Token，不得自行新增近似品牌色。 */

@font-face{font-family:'Noto Serif TC';src:url('vendor/fonts/NotoSerifTC-VF-sub.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'Beach Sans TC';src:url('vendor/fonts/BeachSansTC-Regular-sub.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Beach Sans TC';src:url('vendor/fonts/BeachSansTC-SemiBold-sub.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Beach Mono';src:url('vendor/fonts/BeachMono-Regular-sub.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Beach Mono';src:url('vendor/fonts/BeachMono-Medium-sub.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;

  /* OAC official-source palette, adapted for the dark map UI. */
  --ds-oac-teal-300:#7ed0ca;
  --ds-oac-teal-500:#5abbb4;
  --ds-oac-teal-600:#39ada5;
  --ds-oac-teal-700:#249392;
  --ds-oac-teal-800:#00837b;
  --ds-oac-navy:#051454;
  --ds-oac-sky:#67c9f4;
  --ds-oac-green:#64b263;
  --ds-focus:#f28711;
  --ds-danger:#ff4a19;

  /* Semantic color roles. */
  --ds-bg-deep:#060f1a;
  --ds-scrim:rgb(4 10 18);
  --ds-glass-neutral:rgb(226 234 239 / .09);
  --ds-glass-shadow:rgb(0 0 0 / .18);
  --ds-ink:#eef4f8;
  --ds-ink-dim:#8fa3b4;
  --ds-ink-faint:rgb(143 163 180 / .55);
  --ds-hairline:rgb(159 177 196 / .22);
  --ds-accent:var(--ds-oac-teal-500);
  --ds-accent-hover:var(--ds-oac-teal-300);
  --ds-accent-pressed:var(--ds-oac-teal-600);
  --ds-accent-soft:rgb(90 187 180 / .12);
  --ds-accent-line:rgb(90 187 180 / .42);
  --ds-focus-soft:rgb(242 135 17 / .12);
  --ds-danger-soft:rgb(255 74 25 / .10);
  --ds-success:var(--ds-oac-green);
  --ds-info:var(--ds-oac-sky);
  --ds-on-accent:#06131c;

  /* Typography. */
  --ds-font-display:'Noto Serif TC','PingFang TC',serif;
  --ds-font-body:'Beach Sans TC','PingFang TC',system-ui,sans-serif;
  --ds-font-mono:'Beach Mono',ui-monospace,Menlo,monospace;
  --ds-type-display:900 clamp(34px,5.2vw,68px)/1.1 var(--ds-font-display);
  --ds-type-heading:700 26px/1.3 var(--ds-font-display);
  --ds-type-title:700 19px/1.35 var(--ds-font-display);
  --ds-type-body:400 14px/1.6 var(--ds-font-body);
  --ds-type-label:600 12px/1.35 var(--ds-font-body);
  --ds-type-number:500 13px/1.25 var(--ds-font-mono);
  --ds-type-micro:500 10px/1.35 var(--ds-font-mono);

  /* 4px spacing scale. */
  --ds-space-0:0;
  --ds-space-1:4px;
  --ds-space-2:8px;
  --ds-space-3:12px;
  --ds-space-4:16px;
  --ds-space-5:20px;
  --ds-space-6:24px;
  --ds-space-8:32px;
  --ds-space-10:40px;
  --ds-space-12:48px;
  --ds-space-16:64px;

  /* Shape: pill is reserved for genuine tags only, never buttons. */
  --ds-radius-xs:2px;
  --ds-radius-sm:6px;
  --ds-radius-md:12px;
  --ds-radius-lg:18px;
  --ds-radius-panel:26px;
  --ds-radius-pill:999px;
  --ds-control-height:40px;
  --ds-control-height-compact:34px;
  --ds-hit-target:40px;

  /* Elevation and material. */
  --ds-shadow-low:0 8px 24px rgb(0 0 0 / .14);
  --ds-shadow-panel:0 25px 50px var(--ds-glass-shadow);
  --ds-shadow-modal:0 34px 80px rgb(0 0 0 / .38);
  --ds-glass-blur:15px;
  --ds-glass-saturate:1.02;
  --ds-glass-contrast:1.12;

  /* Motion. */
  --ds-duration-fast:120ms;
  --ds-duration-base:240ms;
  --ds-duration-panel:420ms;
  --ds-duration-scene:700ms;
  --ds-ease-standard:cubic-bezier(.22,.61,.36,1);
  --ds-ease-emphasized:cubic-bezier(.22,1,.36,1);

  /* Stacking ownership. */
  --ds-z-map:0;
  --ds-z-overlay:24;
  --ds-z-hud:30;
  --ds-z-drawer:50;
  --ds-z-toast:70;
  --ds-z-modal:80;
  --ds-z-critical:100;

  /* Reference values; media queries must use the same literals. */
  --ds-breakpoint-mobile:767px;
  --ds-breakpoint-tablet:1023px;
  --ds-breakpoint-wide:1600px;

  /* Viewport-safe spacing. */
  --ds-safe-top:max(16px, env(safe-area-inset-top));
  --ds-safe-right:max(16px, env(safe-area-inset-right));
  --ds-safe-bottom:max(16px, env(safe-area-inset-bottom));
  --ds-safe-left:max(16px, env(safe-area-inset-left));
}

@media (max-width:767px){
  :root{
    --ds-type-heading:700 22px/1.35 var(--ds-font-display);
    --ds-type-title:700 17px/1.35 var(--ds-font-display);
    --ds-space-page:20px;
  }
}

@media (min-width:768px){
  :root{--ds-space-page:32px}
}