/*
 * 朝朝慕穆｜第 39 屆差傳年會 — design tokens
 * Source of truth: /DESIGN.md (frontmatter). Edit there first, then mirror here.
 * Only tokens and @font-face live in this file; component styles go elsewhere.
 *
 * Name mapping:  colors.X → --color-X   fonts.X → --font-X
 *   typography.T.{fontFamily,fontSize,fontWeight,lineHeight,letterSpacing,fontFeature,textTransform}
 *     → --type-T-{family,size,weight,leading,tracking,features,transform}
 *   spacing.X → --space-X   layout.X → --layout-X   breakpoints.X → --breakpoint-X
 *   rounded.X → --radius-X  borders.X → --border-X  sizes.X → --size-X
 *   shadows.X → --shadow-X  overlays.X → --overlay-X  z.X → --z-X  motion.X → --motion-X
 *   motion.reduced.X → same --motion-X, overridden under prefers-reduced-motion.
 * Single dark theme: the base stylesheet sets `color-scheme: dark` on :root (DESIGN.md › Dark mode).
 */

/* GenRyuMin (源流明體 2 TW, SIL OFL 1.1) — subset woff2 files are generated later into /fonts/. */
@font-face {
  font-family: "GenRyuMin";
  src: url("/fonts/genryumin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GenRyuMin";
  src: url("/fonts/genryumin-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── colors ── */
  --color-primary: #F98725;
  --color-primary-hover: #FCA35D;
  --color-primary-pressed: #E27723;
  --color-on-primary: #0F1412;
  --color-focus-ring: #FCA35D;
  --color-ink: #F9EDD6;
  --color-ink-muted: #C8B494;
  --color-ink-subtle: #AD9D81;
  --color-ink-tertiary: #847964;
  --color-canvas: #0F1412;
  --color-surface-1: #141D1A;
  --color-surface-2: #182824;
  --color-surface-3: #1A332E;
  --color-hairline: #1B4841;
  --color-hairline-strong: #91856E;
  --color-semantic-success: #79C38F;
  --color-semantic-warning: #FAC478;
  --color-semantic-error: #F87868;
  --color-semantic-info: #4EB9AD;
  --color-decorative-wordmark: #F2DEC0;
  --color-selection: #5A351A;

  /* ── fonts ── */
  --font-zh: 'GenRyuMin', 'Noto Serif TC', 'Source Han Serif TC', 'Noto Serif CJK TC', 'Songti TC', 'PMingLiU', serif;
  --font-en: 'EB Garamond', 'GenRyuMin', 'Noto Serif TC', Garamond, 'Times New Roman', serif;

  /* ── typography ── */
  --type-display-xl-family: var(--font-zh);
  --type-display-xl-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  --type-display-xl-weight: 400;
  --type-display-xl-leading: 1.2;
  --type-display-xl-tracking: 0.02em;

  --type-display-lg-family: var(--font-zh);
  --type-display-lg-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  --type-display-lg-weight: 600;
  --type-display-lg-leading: 1.3;
  --type-display-lg-tracking: 0.02em;

  --type-headline-family: var(--font-zh);
  --type-headline-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --type-headline-weight: 600;
  --type-headline-leading: 1.4;
  --type-headline-tracking: 0.03em;

  --type-card-title-family: var(--font-zh);
  --type-card-title-size: 1.25rem;
  --type-card-title-weight: 600;
  --type-card-title-leading: 1.45;
  --type-card-title-tracking: 0.03em;

  --type-subhead-family: var(--font-zh);
  --type-subhead-size: 1.125rem;
  --type-subhead-weight: 400;
  --type-subhead-leading: 1.6;
  --type-subhead-tracking: 0.06em;

  --type-body-lg-family: var(--font-zh);
  --type-body-lg-size: 1.125rem;
  --type-body-lg-weight: 400;
  --type-body-lg-leading: 1.85;
  --type-body-lg-tracking: 0.03em;

  --type-body-family: var(--font-zh);
  --type-body-size: 1rem;
  --type-body-weight: 400;
  --type-body-leading: 1.8;
  --type-body-tracking: 0.03em;

  --type-body-sm-family: var(--font-zh);
  --type-body-sm-size: 0.875rem;
  --type-body-sm-weight: 400;
  --type-body-sm-leading: 1.7;
  --type-body-sm-tracking: 0.04em;

  --type-body-tabular-family: var(--font-en);
  --type-body-tabular-size: 0.9375rem;
  --type-body-tabular-weight: 500;
  --type-body-tabular-leading: 1.5;
  --type-body-tabular-tracking: 0.01em;
  --type-body-tabular-features: 'lnum' 1, 'tnum' 1;

  --type-caption-family: var(--font-zh);
  --type-caption-size: 0.8125rem;
  --type-caption-weight: 400;
  --type-caption-leading: 1.6;
  --type-caption-tracking: 0.05em;

  --type-label-family: var(--font-zh);
  --type-label-size: 0.9375rem;
  --type-label-weight: 600;
  --type-label-leading: 1.5;
  --type-label-tracking: 0.04em;

  --type-button-family: var(--font-zh);
  --type-button-size: 1rem;
  --type-button-weight: 600;
  --type-button-leading: 1.25;
  --type-button-tracking: 0.08em;

  --type-masthead-en-family: var(--font-en);
  --type-masthead-en-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.125rem);
  --type-masthead-en-weight: 500;
  --type-masthead-en-leading: 1.15;
  --type-masthead-en-tracking: 0.06em;
  --type-masthead-en-transform: uppercase;

  --type-masthead-zh-family: var(--font-zh);
  --type-masthead-zh-size: clamp(0.8125rem, 0.75rem + 0.35vw, 1.125rem);
  --type-masthead-zh-weight: 600;
  --type-masthead-zh-leading: 1.5;
  --type-masthead-zh-tracking: 0.36em;

  --type-tagline-family: var(--font-zh);
  --type-tagline-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --type-tagline-weight: 400;
  --type-tagline-leading: 1.9;
  --type-tagline-tracking: 0.3em;

  /* ── spacing (4px base) ── */
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-xxl: 3rem;
  --space-xxxl: 4rem;
  --space-section: clamp(4rem, 2.5rem + 5vw, 7rem);
  --space-section-dense: 2rem;

  /* ── layout ── */
  --layout-gutter: clamp(1rem, 0.25rem + 3.2vw, 2.5rem);
  --layout-container-reading: 38rem;
  --layout-container-board: 72rem;
  --layout-container-admin: 90rem;
  --layout-hero-height: min(100svh, 56.25vw);
  --layout-hero-min-height: 100svh;

  /* ── breakpoints (reference only; @media cannot read custom properties) ── */
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;

  /* ── radius ── */
  --radius-none: 0px;
  --radius-round: 50%;
  --radius-pill: 9999px;

  /* ── borders ── */
  --border-hairline: 1px;
  --border-focus: 2px;
  --border-focus-offset: 2px;
  --border-indicator: 2px;
  --border-underline-offset: 0.25em;

  /* ── sizes ── */
  --size-target-min: 2.75rem;
  --size-control-height: 3rem;
  --size-icon-sm: 1rem;
  --size-icon-md: 1.25rem;
  --size-icon-lg: 1.5rem;
  --size-avatar-tab: 2.75rem;
  --size-avatar-tab-lg: 3.5rem;
  --size-checkbox: 1.375rem;
  --size-switch-width: 2.75rem;
  --size-switch-height: 1.5rem;
  --size-switch-thumb: 1.125rem;
  --size-textarea-min-height: 8rem;
  --size-listbox-max-height: 16rem;
  --size-indicator-width: 1.5rem;
  --size-toast-max-width: 24rem;
  --size-card-width: 18rem;
  --size-photo-ratio: 6 / 5;
  --size-photo-max-width: 20rem;
  --size-wordmark-hero: clamp(18rem, 44vw, 52rem);
  --size-wordmark-sendme: clamp(10rem, 18vw, 18rem);
  --size-wordmark-nav: 7rem;

  /* ── shadows (floating layers only) ── */
  --shadow-overlay: 0 12px 32px -8px rgb(11 16 15 / 0.75);

  /* ── overlays (canvas-coloured scrims; literal rgb() keeps old Safari working) ── */
  --overlay-scrim-hero-desktop:
    linear-gradient(180deg, rgb(15 20 18 / 0.7) 0%, rgb(15 20 18 / 0) 14%),
    linear-gradient(90deg, rgb(15 20 18 / 0.8) 0%, rgb(15 20 18 / 0.62) 40%, rgb(15 20 18 / 0) 66%),
    linear-gradient(270deg, rgb(15 20 18 / 0.7) 0%, rgb(15 20 18 / 0) 20%),
    linear-gradient(0deg, rgb(15 20 18 / 0.85) 0%, rgb(15 20 18 / 0) 22%);
  --overlay-scrim-hero-mobile:
    linear-gradient(180deg, rgb(15 20 18 / 0.84) 0%, rgb(15 20 18 / 0.62) 42%, rgb(15 20 18 / 0) 56%),
    linear-gradient(0deg, rgb(15 20 18 / 0.92) 0%, rgb(15 20 18 / 0.6) 20%, rgb(15 20 18 / 0) 38%);
  --overlay-scrim-placeholder: linear-gradient(rgb(15 20 18 / 0.82), rgb(15 20 18 / 0.82));
  --overlay-scrim-hero-text: linear-gradient(180deg, rgb(15 20 18 / 0) 0%, rgb(15 20 18 / 0.72) 50%, rgb(15 20 18 / 0.72) calc(100% - 3rem), rgb(15 20 18 / 0) 100%);

  /* ── z-index ── */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-toast: 30;

  /* ── motion ── */
  --motion-duration-fast: 150ms;
  --motion-duration-base: 240ms;
  --motion-duration-slow: 400ms;
  --motion-duration-hero: 1200ms;
  --motion-duration-pulse: 1600ms;
  --motion-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-easing-in: cubic-bezier(0.7, 0, 0.84, 0);
  --motion-press-feedback: translateY(1px);
  --motion-distance-enter: 0.5rem;
  --motion-carousel-interval-min: 8000ms;
  --motion-carousel-ms-per-char: 120ms;
  --motion-carousel-interval-max: 20000ms;
  --motion-toast-duration: 5000ms;
}

/* motion.reduced — remove movement, keep short opacity/colour feedback. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-press-feedback: none;
    --motion-distance-enter: 0rem;
    --motion-duration-slow: 150ms;
    --motion-duration-hero: 0ms;
    --motion-duration-pulse: 0ms;
  }
}