/*
 * Design tokens: the `:root` block of docs/design/tokens.md, verbatim (Elementor kit #10 + literal colors).
 * Breakpoints (not expressible as custom properties in media queries): tablet max-width 1024px,
 * mobile max-width 767px.
 */
:root {
  --color-primary: #00C981;
  --color-primary-light: #00F09A;
  --color-secondary: #011B4E;
  --color-text: #858B94;
  --color-accent: #FFCC00;
  --color-danger: #FF4242;
  --color-tomato: #FA5450;
  --color-orange: #EAB413;
  --color-white: #FFFFFF;
  --gray-100: #FAFAFA;
  --gray-300: #EDEDED;
  --gray-400: #B3BBCA;
  --gray-700: #212A3A;
  --color-footer-bg: #242B57;
  --color-icon-muted: #69727D;
  --color-checkbox-checked: #00C980;
  --color-field-border: #DDDEDF;
  --color-select-arrow: #808080;
  --color-overlay-popup: rgba(1, 27, 78, 0.6);
  --color-overlay-lightbox: rgba(0, 0, 0, 0.8);
  --color-focus-ring: #0085F2;

  --font-sans: "Noto Sans JP", sans-serif;
  --fs-body: 14px;  --lh-body: 1.57em;
  --fs-small: 12px; --lh-small: 1.67em;
  --fs-large: 16px; --lh-large: 1.71em;
  --fs-h1: 40px; --fs-h2: 30px; --fs-h3: 24px; --fs-h4: 20px; --fs-h5: 18px; --fs-h6: 16px;
  --lh-h1: 1.25em; --lh-h2: 1.25em; --lh-h3: 1.42em; --lh-h4: 1.2em; --lh-h5: 1.25em; --lh-h6: 1.25em;
  --fs-button: 14px; --lh-button: 1.43em;
  --fs-button-sm: 12px; --lh-button-sm: 1.5em;

  --container: 1200px;
  --gutter: 15px;
  --widget-spacing: 20px;
  --grid-gap: 30px;

  --radius-none: 0;
  --radius-round: 50%;

  --shadow-card: 0px 3px 10px 0px rgba(45, 58, 83, 0.07);
  --shadow-accordion: 0px 4px 8px 0px rgba(45, 58, 83, 0.1);
  --shadow-type-card-hover: 0px 0px 10px 0px rgba(1, 27, 78, 0.1);
  --shadow-menu: 0px 0px 15px 0px rgba(0, 0, 0, 0.07);

  --transition-base: 0.3s;
}
@media (max-width: 1024px) {
  :root { --container: 1024px; --fs-h1: 36px; --fs-h2: 28px; }
}
@media (max-width: 767px) {
  :root { --container: 767px; --fs-h1: 32px; --fs-h2: 26px; }
}