/*
 * tokens.css
 * Purpose: design tokens (colors, fonts, spacing, radii, shadows) shared across the site.
 * Source: Figma variables, デザイン（PC）page.
 */

:root {
  /* --- Color: brand --- */
  --marimo-blue: #0068a8;
  --sky-blue: #2994d6;
  --dark-blue: #1564b2;
  --navy: #19548f;
  --line-green: #4cae5f;

  /* --- Color: neutrals --- */
  --ink: #2a2a2a;
  --pure-white: #ffffff;
  --ice-blue: #f8fbfc;
  --soft-blue: #ecf4f8;
  --gray-100: #f4f4f4;
  --gray-400: #d9d9d9;
  --gray-500: #bdbdbd;
  --gray-600: #8a8a8a;
  --gray-700: #6a6a6a;
  --dark-beige: #eae2d7;

  /* --- Typography: families --- */
  --font-eng: "Inter", sans-serif;
  --font-condensed: "Roboto Condensed", sans-serif;
  --font-thai-sarabun: "Sarabun", sans-serif;
  --font-thai-noto: "Noto Sans Thai", sans-serif;

  /* --- Typography: sizes (Figma px -> rem, 1rem = 16px) --- */
  --font-size-2xs: 0.6875rem; /* 11px */
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-md: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 1.75rem; /* 28px */
  --font-size-4xl: 2rem; /* 32px */
  --font-size-5xl: 2.5rem; /* 40px */
  --font-size-6xl: 4rem; /* 64px */
  --font-size-7xl: 7.5rem; /* 120px */

  /* --- Radius --- */
  --radius-xs: 0.25rem; /* 4px */
  --radius-sm: 0.5rem; /* 8px */
  --radius-md: 1.25rem; /* 20px */
  --radius-round: 9999px;

  /* --- Shadow --- */
  --shadow-card: 0 0 2rem rgba(0, 0, 0, 0.04), 0.375rem 0.375rem 1rem rgba(42, 42, 42, 0.02);

  /* --- Spacing scale --- */
  --space-2xs: 0.5rem; /* 8px */
  --space-xs: 1rem; /* 16px */
  --space-sm: 1.5rem; /* 24px */
  --space-md: 2rem; /* 32px */
  --space-lg: 2.5rem; /* 40px */
  --space-xl: 4rem; /* 64px */
  --space-2xl: 5rem; /* 80px */
  --space-3xl: 7.5rem; /* 120px */

  /* --- Layout --- */
  --content-max-width: 75rem; /* 1200px */
  --page-max-width: 90rem; /* 1440px */
}