@import url('https://fonts.googleapis.com/css2?family=Google+Sans:wght@500;700&display=swap');

:root {
  --gk-red: #ea4335;
  --gk-blue: #4285f4;
  --gk-yellow: #f9ab00;
  --gk-green: #34a853;
  --gk-ink: #1e1e1e;
  --gk-paper: #f0f0f0;
  --gk-line: #d0d0d0;

  --gk-blue-halftone: #57caff;
  --gk-green-halftone: #5cdb6d;
  --gk-yellow-halftone: #ffd427;
  --gk-red-halftone: #ff7daf;
  --gk-blue-pastel: #c3ecf6;
  --gk-green-pastel: #ccf6c5;
  --gk-yellow-pastel: #ffe7a5;
  --gk-red-pastel: #f8d8d8;

  --gk-font-body:
    system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --gk-font-display: 'Google Sans', 'Google Sans Flex', 'Noto Sans TC', system-ui, sans-serif;
  --gk-font-mono: 'Google Sans Mono', ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;

  --gk-fw-normal: 400;
  --gk-fw-medium: 500;
  --gk-fw-bold: 700;

  --gk-fs-hero: clamp(2.5rem, 4.5vw + 0.5rem, 4.75rem);
  --gk-fs-h1: clamp(2rem, 4vw + 0.75rem, 3.5rem);
  --gk-fs-h2: clamp(1.5rem, 2.5vw + 0.75rem, 2.5rem);
  --gk-fs-h3: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem);
  --gk-fs-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --gk-fs-small: clamp(0.875rem, 0.25vw + 0.8125rem, 1rem);
  --gk-fs-tiny: clamp(0.75rem, 0.25vw + 0.6875rem, 0.875rem);

  --gk-sp-1: 4px;
  --gk-sp-2: 8px;
  --gk-sp-3: 12px;
  --gk-sp-4: 16px;
  --gk-sp-5: 24px;
  --gk-sp-6: 32px;
  --gk-sp-7: 48px;
  --gk-sp-8: 64px;

  --gk-radius-sm: 4px;
  --gk-radius-md: 8px;
  --gk-radius-lg: 16px;
  --gk-radius-full: 999px;

  --gk-shadow-card: 4px 4px 0 var(--gk-ink);
  --gk-shadow-card-hover: 6px 6px 0 var(--gk-ink);
  --gk-shadow-button: 2px 2px 0 var(--gk-ink);
  --gk-shadow-button-hover: 3px 3px 0 var(--gk-ink);
  --gk-shadow-modal: 8px 8px 0 var(--gk-ink);

  --gk-maxw: 1200px;
  --gk-nav-h: 64px;
  --gk-nav-mobile-bar-h: 64px;
  --gk-transition: 180ms ease;
}