/* =====================================================
   洋田系統科技有限公司 — Design System Tokens
   Yang Tien System Technology Co., Ltd
   ===================================================== */

/* ── Web Fonts ── */
@font-face {
  font-family: 'NotoSansCJKtc';
  src: url('../fonts/NotoSansCJKtc-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansCJKtc';
  src: url('../fonts/NotoSansCJKtc-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansCJKtc';
  src: url('../fonts/NotoSansCJKtc-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansCJKtc';
  src: url('../fonts/NotoSansCJKtc-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansMonoCJKtc';
  src: url('../fonts/NotoSansMonoCJKtc-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'NotoSansMonoCJKtc';
  src: url('../fonts/NotoSansMonoCJKtc-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ── Brand Colors ── */
  --color-brand-primary:    #00AECC;   /* 科技青藍 — core brand cyan-blue */
  --color-brand-primary-light: #33C3DC;
  --color-brand-primary-dark:  #0090AA;
  --color-brand-deep:       #007A94;   /* deep ocean, for active/pressed states */
  --color-white:            #FFFFFF;
  --color-black:            #000000;

  /* ── Neutral Scale ── */
  --color-neutral-50:  #F5FAFB;
  --color-neutral-100: #E8F5F8;
  --color-neutral-200: #C8E8EF;
  --color-neutral-300: #A0D5E0;
  --color-neutral-400: #6CB8CA;
  --color-neutral-500: #3D9BB0;
  --color-neutral-600: #1F7A90;
  --color-neutral-700: #115E72;
  --color-neutral-800: #0A3D4D;
  --color-neutral-900: #051E26;

  /* ── Semantic Colors ── */
  --color-bg-primary:    var(--color-white);
  --color-bg-brand:      var(--color-brand-primary);
  --color-bg-subtle:     var(--color-neutral-50);
  --color-fg-primary:    #1A2E35;      /* near-black for body text */
  --color-fg-secondary:  #4A6570;
  --color-fg-muted:      #7A9BA5;
  --color-fg-on-brand:   var(--color-white);
  --color-fg-brand:      var(--color-brand-primary);
  --color-border:        #D0E8EE;
  --color-border-strong: var(--color-brand-primary);
  --color-divider:       #E0EEF2;

  /* ── Status Colors ── */
  --color-success: #22A06B;
  --color-warning: #D97706;
  --color-error:   #DC2626;
  --color-info:    var(--color-brand-primary);

  /* ── Typography: Font Families ── */
  --font-sans-zh:    'NotoSansCJKtc', 'MicrosoftJhengHei', '微軟正黑體', sans-serif;
  --font-sans-en:    'Barlow', 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:       'NotoSansMonoCJKtc', 'Fira Code', monospace;

  /* ── Typography: Scale ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;

  /* ── Font Weights ── */
  --weight-thin:       100;
  --weight-light:      300;
  --weight-demilight:  350;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-bold:       700;
  --weight-black:      900;

  /* ── Line Heights ── */
  --leading-tight:  1.3;
  --leading-snug:   1.45;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Letter Spacing ── */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0.05em;   /* CJK text benefits from slight spacing */
  --tracking-wide:   0.1em;
  --tracking-wider:  0.15em;

  /* ── Spacing Scale (4px base) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border Radius ── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,174,204,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,174,204,0.15), 0 2px 4px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 24px rgba(0,174,204,0.18), 0 4px 8px rgba(0,0,0,0.10);
  --shadow-xl:  0 16px 40px rgba(0,174,204,0.20), 0 8px 16px rgba(0,0,0,0.12);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

/* ── Semantic Type Styles ── */
.h1, h1 {
  font-family: var(--font-sans-zh);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  color: var(--color-fg-primary);
}
.h2, h2 {
  font-family: var(--font-sans-zh);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  color: var(--color-fg-primary);
}
.h3, h3 {
  font-family: var(--font-sans-zh);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-fg-primary);
}
.h4, h4 {
  font-family: var(--font-sans-zh);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-fg-primary);
}
.body-lg, .body-large {
  font-family: var(--font-sans-zh);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-fg-primary);
}
.body, p {
  font-family: var(--font-sans-zh);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-fg-primary);
}
.body-sm {
  font-family: var(--font-sans-zh);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--color-fg-secondary);
}
.caption {
  font-family: var(--font-sans-zh);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg-muted);
}
.label {
  font-family: var(--font-sans-zh);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-fg-secondary);
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}