/*
 * BloomoreHR design tokens.
 *
 * The single source of colour, type and spacing for the public presentation.
 *
 * Every value below is taken from the approved staging redesign — either from
 * its own stylesheet (css/site-redesign-preview-v1-pages.css, the
 * "#bhrv-preview" custom properties) or measured in a browser on
 * ?bh_site_redesign_preview=1&bh_redesign_view=services where a later override
 * layer changes it. Where the two disagree, the measured value wins: that is
 * what was approved on screen.
 *
 * Nothing in this file targets an element. Add a token here; never redefine one
 * further down the cascade.
 */
:root {
  /* Ink and ground. The page is white — not an off-white paper. */
  --bloom-ground: #fff;
  /* 一部のセクションだけが敷く温かい地色（実測 rgb(255,253,249)）。 */
  --bloom-ground-warm: #fffdf9;
  --bloom-ink: #294c50;
  --bloom-ink-soft: #536e73;
  --bloom-muted: #5f7a80; /* 白地で 4.58:1。小さな文字でも AA を満たす下限 */
  --bloom-faint: #8aa0a4;
  --bloom-white: #fff;
  --bloom-line: rgba(41, 76, 80, .12);

  /* Accents */
  --bloom-blue: #00aeef;
  --bloom-title: #1697bf;
  --bloom-green: #1aa979;
  --bloom-teal: #27bdb3;
  --bloom-coral: #ef8b78;
  --bloom-yellow: #e8c74d;
  --bloom-purple: #a58ad4;
  --bloom-pine: #244b50;
  --bloom-deep: #165d62;

  /*
   * 見出し専用の濃いインク。本文・ナビの #294c50 とは別に、承認済みデザインは
   * セクション見出しに #173f45 を使っている（実測）。Presentation Lab が本文にも
   * 使っている値と同じだが、ここでの用途は見出しだけ。
   */
  --bloom-ink-deep: #173f45;

  /* セクションの図版が使うパステル。承認済みデザインの実値。 */
  --bloom-pastel-blue: #47acd5;
  --bloom-pastel-coral: #ef8d77;
  --bloom-pastel-green: #62b985;
  --bloom-pastel-yellow: #e5c35b;
  --bloom-pastel-purple: #ad91d5;
  --bloom-pastel-teal: #55c8bf;

  /*
   * Type. Yomogi carries the whole character of this design; the headings are
   * unrecognisable without it. It is loaded from Google Fonts by
   * inc/bloom-shell.php, exactly as the approved preview loads it.
   *
   * The fallback chain is the approved design's own, character for character.
   * `cursive` resolves to whatever the browser calls cursive — on Windows that
   * is a Latin script face with no kana, so a failed font load would drop the
   * headings to a default sans instead of the intended textbook hand.
   */
  --bloom-font-hand: "Yomogi", "Klee One", "Zen Kurenaido", YuKyokasho, sans-serif;
  --bloom-font-body: "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --bloom-display: clamp(3rem, 5.65vw, 5.5rem);
  /* 章見出し。1024/1280 は 5vw、1440 以上は 66px で止まる（実測）。 */
  --bloom-h2: clamp(2.625rem, 5vw, 4.125rem);
  --bloom-lead: clamp(1rem, 1.32vw, 1.3125rem);
  --bloom-eyebrow: .625rem;
  --bloom-display-leading: 1.25;
  --bloom-h2-leading: 1.28;
  --bloom-lead-leading: 1.95;
  --bloom-display-tracking: .025em;
  --bloom-h2-tracking: .02em;
  --bloom-eyebrow-tracking: .18em;

  /* Layout. The content column and the header pill are different widths. */
  --bloom-shell: min(1180px, 88vw);
  /* セクション本体はヒーローより少し広い（実測 1220px / 1440px時）。 */
  --bloom-shell-wide: min(1220px, 92vw);
  --bloom-header-width: min(1220px, 96.5vw);
  --bloom-section-pad: clamp(4.75rem, 9vw, 8.25rem);
  --bloom-hero-pad-top: 8rem;
  --bloom-hero-pad-bottom: 4.875rem;
  --bloom-radius-pill: 999px;
  --bloom-radius-card: 25px;

  /* Grounds that are not flat white. */
  --bloom-ground-soft: linear-gradient(180deg, #fff, #f7fbfb);
  --bloom-ground-tint:
    radial-gradient(circle at 18% 20%, rgba(234, 248, 248, .64), transparent 30%),
    radial-gradient(circle at 82% 78%, rgba(246, 240, 251, .54), transparent 34%),
    #fff;
  --bloom-ground-hero:
    radial-gradient(circle at 52% 42%, rgba(225, 248, 250, .74), transparent 38%),
    radial-gradient(circle at 76% 66%, rgba(245, 239, 251, .44), transparent 33%),
    #fff;

  /* Elevation and motion */
  --bloom-shadow-shell: 0 12px 34px rgba(23, 63, 69, .07);
  --bloom-shadow-card: 0 18px 40px rgba(41, 76, 80, .08);
  --bloom-motion: 180ms;
  --bloom-ease: cubic-bezier(.2, .8, .2, 1);

  /* The fixed shell reserves this much space at the top of every page. */
  --bloom-header-height: 84px;
  --bloom-header-offset: 10px;
}

@media (max-width: 900px) {
  :root {
    --bloom-header-height: 64px;
    --bloom-header-offset: 8px;
    --bloom-hero-pad-top: 4rem;
    --bloom-hero-pad-bottom: 1.875rem;
  }
}

@media (max-width: 640px) {
  :root { --bloom-shell: min(1180px, 91vw); }
}