/* ==========================================================================
   Brightside 良面 Design Tokens
   依據 docs/design-guideline.md (alpha 2026-05-27)
   ========================================================================== */

@font-face {
  font-family: "Noto Sans TC";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/chinese/NotoSansTC-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Noto Sans TC";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/chinese/NotoSansTC-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Noto Sans TC";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/chinese/NotoSansTC-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Noto Sans TC";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/chinese/NotoSansTC-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Futura Md BT";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/english/FuturaMdBT-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Futura Md BT";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../assets/fonts/english/FuturaMdBT-Bold.ttf") format("truetype");
}

:root {
  /* === Colors: Brand Blue family === */
  --color-brand-50: #f4f8fd;
  --color-brand-100: #adc9ea;
  --color-brand-200: #8eb1da;
  --color-brand-300: #6a8fbe;
  --color-brand-400: #486f98;
  --color-brand-500: #365780;

  /* === Colors: Ink (warm black) === */
  --color-ink: #231815;
  --color-ink-soft: #4a3f3c;
  --color-ink-muted: #8a807d;

  /* === Colors: Surface & border === */
  --color-surface: #ffffff;
  --color-surface-alt: #f7f9fc;
  --color-border: #e3eaf3;
  --color-border-strong: #c7d6e8;

  /* === Colors: State === */
  --color-state-success: #3f8f6f;
  --color-state-warning: #c9882a;
  --color-state-error: #b84a3a;

  /* === Semantic aliases === */
  --color-primary: var(--color-brand-400);
  --color-secondary: var(--color-brand-300);
  --color-tertiary: var(--color-brand-500);
  --color-on-primary: var(--color-surface);
  --color-on-surface: var(--color-ink);

  /* === Line / Instagram colors === */
  --color-line: #06c755;
  --color-ig-gradient: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);

  /* === Radius === */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* === Spacing (8px base + 4px half-step) === */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --gutter-mobile: 16px;
  --gutter-desktop: 24px;
  --container-max: 1200px;
  --content-max: 720px;

  /* === Shadows === */
  --shadow-sm: 0 2px 8px rgba(54, 87, 128, 0.06);
  --shadow-md: 0 4px 16px rgba(54, 87, 128, 0.08);

  /* === Motion === */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* === Font families === */
  --font-zh: "Noto Sans TC", -apple-system, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-en: "Futura Md BT", "Noto Sans TC", sans-serif;

  /* === Typography scale (desktop) === */
  --fs-display: 56px;
  --fs-headline-lg: 40px;
  --fs-headline-md: 28px;
  --fs-headline-sm: 22px;
  --fs-english-display: 44px;
  --fs-english-label: 14px;
  --fs-body-lg: 18px;
  --fs-body-md: 16px;
  --fs-body-sm: 14px;
  --fs-label-md: 14px;
  --fs-label-sm: 12px;
  --fs-data-emphasis: 32px;
  --fs-caption: 12px;

  /* === Layout chrome === */
  --header-height: 64px;
  --header-height-desktop: 80px;
  --sticky-cta-height: 72px;
}

/* Mobile typography down-scale (≤ 640px) */
@media (max-width: 640px) {
  :root {
    --fs-display: 40px;
    --fs-headline-lg: 32px;
    --fs-headline-md: 24px;
    --fs-english-display: 36px;
  }
}