/*
 * Wuslogic public-site design tokens
 *
 * This file is the single source of truth for shared color, typography,
 * spacing, elevation, motion and stacking values. Page styles should consume
 * these semantic variables instead of introducing new brand hex values.
 */
:root {
  /* Brand and semantic colors */
  --c-primary: #5268a6;
  --c-primary-dark: #1f3268;
  --c-primary-soft: #eef2ff;
  --c-action: #435a9c;
  --c-action-hover: #344b83;
  --c-action-text: #fff;
  --c-text: #2f3d61;
  --c-muted: #5f6c8a;
  --c-line: #d7deef;
  --c-bg: #f7f9fd;
  --c-surface: #fff;
  --c-white: #fff;
  --c-focus: #234fbd;
  --c-success: #277a58;
  --c-warning: #8a641e;
  --c-danger: #b63f50;
  --c-info: #405fad;

  /* Navigation */
  --c-nav: #394774;
  --c-nav-active: #17275b;

  /* Footer */
  --c-footer: #dce7f9;
  --c-footer-ink: #46547f;
  --c-footer-strong: #2f3f76;
  --c-footer-muted: #6c7696;
  --c-footer-kicker: #536386;
  --c-footer-olive: #53679f;
  --c-footer-accent: #8796c6;
  --c-footer-line: #cbd2eb;
  --c-footer-soft: #f7f8ff;
  --c-footer-soft-line: #dfe3f4;
  --c-footer-highlight: #d7ddff;
  --c-social: #8090c1;

  /* Gradients */
  --g-main: linear-gradient(135deg, var(--c-action), var(--c-primary));
  --g-pale: linear-gradient(135deg, #fbfcff, #eef2fb 52%, #fff);
  --g-page-hero: linear-gradient(135deg, #f8faff, #eaf0ff 64%, #fff);
  --g-news-hero: linear-gradient(135deg, #fafbf7, #edf0e5 58%, #fff);
  --g-social-instagram: linear-gradient(135deg, #833ab4, #fd1d1d 52%, #fcb045);

  /* Typography */
  --font-serif: "Noto Serif Display", "Noto Serif JP", serif;
  --font-sans: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --type-body: 1rem;
  --type-small: .875rem;
  --type-h1: 3rem;
  --type-h2: 2rem;
  --type-h3: 1.1rem;

  /* Shape and elevation */
  --radius-sm: .875rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999rem;
  --radius: var(--radius-md);
  --shadow-xs: 0 .25rem .75rem rgba(39, 55, 103, .06);
  --shadow-sm: 0 .75rem 2rem rgba(39, 55, 103, .10);
  --shadow: 0 1.5rem 4rem rgba(39, 55, 103, .14);

  /* Layout and spacing */
  --container-content: 75rem;
  --container-nav: 96rem;
  --gutter-page: 1rem;
  --section-space: clamp(4rem, 7vw, 7rem);

  /* Motion */
  --duration-fast: 150ms;
  --duration-ui: 200ms;
  --duration-slow: 300ms;
  --ease-ui: cubic-bezier(.2, .8, .2, 1);

  /* Stacking */
  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 100;
  --z-header: 1000;
  --z-dock: 1001;
  --z-dropdown: 1010;
  --z-accessibility: 2000;
}

@media (max-width: 36rem) {
  :root {
    --gutter-page: .75rem;
    --type-h1: 2.25rem;
    --type-h2: 1.625rem;
  }
}