/* =====================================================================
   O2pet — Design Tokens (single source of truth)
   All colors, spacing, typography, radii and component metrics live here.
   Do NOT hard-code these values elsewhere; reference the variables.
   ===================================================================== */

:root {
  /* ---- Brand colors ---------------------------------------------------
     Extracted approximately from the logo + completed design mock.
     Adjust here if exact brand HEX values are provided later.          */
  --color-brand-blue: #1f70a6;   /* main brand blue (headings, links)   */
  --color-brand-blue-bright: #2f74c0; /* brighter blue (hero headline)  */
  --color-navy:       #16305c;   /* deep navy (logo, strong headings)   */
  --color-accent:     #ffb459;   /* orange-yellow accent (eyebrows)     */
  --color-accent-ink: #ffb357;   /* orange for text on light bg         */
  --color-eyebrow-blue: #6f9fd0; /* light-blue eyebrow (COMMITMENT/CASE)*/
  --color-tint-blue:  #eaf3fb;   /* very light blue (spec label bg etc.)*/
  --color-cases-btn:  #c7d8ef;   /* light-blue 利用事例 category button  */
  --bg-orange-tint:   #fdf4e8;   /* warm cream band (gift/notice)       */
  --color-heading-ink:#2b3038;   /* slightly-grey black (mission title) */

  /* ---- Neutrals ------------------------------------------------------- */
  --color-text:        #333940;  /* body text (dark gray)               */
  --color-text-muted:  #78828c;  /* supplementary / caption gray        */
  --color-white:       #ffffff;
  --color-border:      #e4e9ef;  /* hairlines / rules                   */

  /* ---- Section background tints -------------------------------------- */
  --bg-white: #ffffff;
  --bg-blue:  #f4f9fc;           /* 淡い水色 (light blue)                */
  --bg-cream: #fbf8f2;           /* 淡い生成り色 (cream)                 */

  /* ---- Layout --------------------------------------------------------- */
  --content-max: 1280px;         /* wider — use more horizontal width     */
  --gutter: clamp(16px, 4vw, 40px); /* fluid left/right page padding      */

  /* Section vertical rhythm — reduced to ~2/3 to sit closer to design A. */
  --section-y: clamp(44px, 6vw, 88px);
  --section-y-sm: clamp(30px, 4vw, 56px);

  /* ---- Spacing scale (element gaps) ---------------------------------- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 88px;

  /* ---- Typography ----------------------------------------------------- */
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN",
               "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif;

  --fs-eyebrow: 0.8125rem;                    /* English sub-heading      */
  --fs-body:    clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);  /* body ~16–17px */
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-h3:      clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-h2:      clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); /* section title */
  --fs-h1:      clamp(2rem, 1.3rem + 3vw, 3.375rem);       /* hero          */
  --fs-price:   clamp(2.25rem, 1.5rem + 3vw, 3.25rem);

  --lh-tight: 1.3;
  --lh-base:  1.9;               /* comfortable Japanese body leading    */
  --lh-heading: 1.5;

  /* ---- Radii (halved per design feedback) ----------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-btn: 5px;            /* CTA buttons: subtle rounding, same for all */

  /* ---- Buttons -------------------------------------------------------- */
  --btn-height: 56px;
  --btn-height-sm: 48px;
  --tap-min: 44px;               /* min tap target                       */

  /* ---- Shadows (removed per design feedback) -------------------------- */
  --shadow-card: none;
  --shadow-soft: none;

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.25s;

  /* ---- Focus ---------------------------------------------------------- */
  --focus-ring: 3px solid #4b90dd;
}

/* Smartphone: wider side padding (~2.3x the ~16px it was). Phone-only —
   tablet and desktop widths are unchanged. */
@media (max-width: 640px) {
  :root { --gutter: 37px; }
}