/* =========================================================
   Page Design Tokens
   ページ共通CSS Variables

   配置先:
   /css/pages/page-variables.css

   命名:
   --ceremo-* を使用し、テーマ本体・プラグインとの衝突を避ける。
========================================================= */

:root {

  /* -----------------------------------------
     Color
  ----------------------------------------- */

  --ceremo-color-text: #222;
  --ceremo-color-text-sub: #5f6461;
  --ceremo-color-text-light: #7b807d;

  --ceremo-color-brand: #007c3f;
  --ceremo-color-brand-dark: #006634;
  --ceremo-color-brand-soft: #f1f7f3;

  --ceremo-color-bg: #fff;
  --ceremo-color-bg-soft: #f7f7f5;
  --ceremo-color-bg-warm: #faf9f6;

  --ceremo-color-line: #e3e6e3;


  /* -----------------------------------------
     Typography
     12px未満は原則使用しない
  ----------------------------------------- */

  --ceremo-font-size-xs: 0.75rem;       /* 12px */
  --ceremo-font-size-sm: 0.8125rem;     /* 13px */
  --ceremo-font-size-md: 0.875rem;      /* 14px */
  --ceremo-font-size-body: 1rem;        /* 16px */
  --ceremo-font-size-body-lg: 1.0625rem;/* 17px */

  --ceremo-font-size-lead:
    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);

  --ceremo-font-size-h4:
    clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);

  --ceremo-font-size-h3:
    clamp(1.25rem, 1.12rem + 0.5vw, 1.5rem);

  --ceremo-font-size-h2:
    clamp(1.625rem, 1.4rem + 0.9vw, 2rem);

  --ceremo-font-size-h1:
    clamp(2rem, 1.7rem + 1.25vw, 2.75rem);

  --ceremo-line-height-tight: 1.4;
  --ceremo-line-height-heading: 1.5;
  --ceremo-line-height-body: 1.85;
  --ceremo-line-height-relaxed: 2;


  /* -----------------------------------------
     Font weight
  ----------------------------------------- */

  --ceremo-font-weight-normal: 400;
  --ceremo-font-weight-medium: 500;
  --ceremo-font-weight-bold: 700;


  /* -----------------------------------------
     Content width
  ----------------------------------------- */

  --ceremo-content-width: 1180px;
  --ceremo-content-width-narrow: 920px;
  --ceremo-content-width-text: 760px;

  --ceremo-page-gutter: 24px;
  --ceremo-page-gutter-sp: 18px;


  /* -----------------------------------------
     Spacing
  ----------------------------------------- */

  --ceremo-space-1: 4px;
  --ceremo-space-2: 8px;
  --ceremo-space-3: 12px;
  --ceremo-space-4: 16px;
  --ceremo-space-5: 20px;
  --ceremo-space-6: 24px;
  --ceremo-space-8: 32px;
  --ceremo-space-10: 40px;
  --ceremo-space-12: 48px;
  --ceremo-space-14: 56px;
  --ceremo-space-16: 64px;
  --ceremo-space-18: 72px;
  --ceremo-space-20: 80px;


  /* -----------------------------------------
     Radius
  ----------------------------------------- */

  --ceremo-radius-sm: 4px;
  --ceremo-radius-md: 8px;
  --ceremo-radius-lg: 10px;
  --ceremo-radius-pill: 999px;


  /* -----------------------------------------
     Transition
  ----------------------------------------- */

  --ceremo-transition-fast: 0.2s ease;
}


/* =========================================================
   Smartphone
========================================================= */

@media screen and (max-width: 767px) {

  :root {
    /*
     * 本文はSPでも16pxを維持。
     * 可読性を優先し、画面幅による縮小は行わない。
     */
    --ceremo-page-gutter: var(--ceremo-page-gutter-sp);
  }

}