/*!
 * 00-tokens.css
 * 設計 token — 色彩、字體、間距。取樣自公司 banner 實際色值。
 *
 * 崇成工廠官網 — 由已驗證的原型拆分而來，勿隨意改動色值與斷點：
 * 全站文字對比達 WCAG AA 4.5:1，320–1920px 無水平溢出。
 */

/* ============ tokens ============ */
:root{
  /* palette sampled from the Chung Cheng brand banner */
  --olive:#B1B12D;        /* brand olive-lime — banner ground */
  --olive-2:#9A9A24;      /* deeper olive for hovers */
  --olive-light:#B4B42F;  /* 首屏漸層的亮端 */
  --hero-dark:#5C5C12;    /* 首屏文字側：白字對比 5.9:1 */
  --hero-mid:#6B6B16;     /* 首屏漸層中段 */
  --hero-mid2:#9FA027;    /* 首屏漸層過渡到亮端 */
  --tile-1:#FCFCF3;       /* 產品卡底圖漸層 */
  --tile-2:#EDEEDA;
  --ink:#252709;          /* deep olive-black — body text + dark grounds */
  --ink-2:#4A4D18;
  --paper:#F7F7EC;        /* pale olive paper */
  --white:#FFFFFF;
  --steel:#6B6D45;        /* olive grey — 5.0:1 on paper */
  --line:#E1E1C9;
  --amber:#F4C804;        /* brand gold — buttons */
  --amber-2:#7A6B04;      /* gold, darkened for text — 5.0:1 on paper */
  --amber-soft:#FDF3C6;
  --yellow:#FFEB0C;       /* banner headline yellow */
  --red:#E41D1F;          /* logo red */
  --blade:#3A3C14;

  --f-display:"Archivo",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --pad:clamp(20px,5vw,64px);
  --maxw:1220px;
  --r:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}