/* ============================================================
 * Customer Cloud — Design Tokens (cc-v2)
 * Source: /DESIGN.md (L1 SSOT preserved + WHITE BASE additions)
 *
 * IMPORTANT: All tokens scoped to .ccv2 to avoid leaking into
 * the existing /style.css globals at :root.
 * ============================================================ */

.ccv2 {
  /* Light-only — explicitly opt out of OS dark mode rendering.
     Future dark mode support will start from this declaration. */
  color-scheme: light;

  /* ----------------------------------------------------------
   * COLORS — White Base (90% white, 10% dark accents)
   * ---------------------------------------------------------- */

  /* Surfaces */
  --cc-bg: #FFFFFF;            /* Page base — white */
  --cc-bg-subtle: #FFFFFF;     /* UNIFIED: white-only rhythm (住友商事 style). Section rhythm via 1px border only. */
  --cc-bg-light: #F5F5F5;      /* Card backgrounds */

  /* Borders */
  --cc-border: #E5E5E5;        /* Default border */
  --cc-border-strong: #C8C8C8; /* Emphasized border */

  /* Text */
  --cc-text-primary: #0A0A0F;  /* Main text — 19.75:1 on white (AAA) */
  --cc-text-secondary: #595959;/* Sub text — 7.00:1 on white (AAA) */
  --cc-text-muted: #6D6D6D;    /* Eyebrow / labels — 5.17:1 on #FFF, 4.96:1 on #FAFAFA, 4.75:1 on #F5F5F5 (AA normal all pass)
                                  was #757575 — failed on bg-subtle (4.41:1) and bg-light (4.23:1) */

  /* Brand dark accents (limited use: header, footer only) */
  --cc-black: #0A0A0F;         /* Header background */
  --cc-dark-navy: #0B101F;     /* Footer background */
  --cc-white: #FFFFFF;         /* Used on dark areas */

  /* Functional / accent */
  --cc-accent-orange: #C2540A; /* Existing-page tag, warnings — 4.60:1 on #FFF (AA normal)
                                  was #FF6B35 — failed contrast (2.84:1, Lighthouse a11y reported) */
  --cc-accent-yellow: #E8F040; /* Insight highlights */
  --cc-accent-red: #DC2828;    /* Error / wrong */
  --cc-accent-green: #166834;  /* Success / correct */

  /* Domain colors (L1 SSOT preserved — used sparingly) */
  --cc-domain-agi: #0095C8;
  --cc-domain-finance: #2856A3;
  --cc-domain-urban: #E8734A;
  --cc-domain-environment: #079173;

  /* ----------------------------------------------------------
   * TYPOGRAPHY
   * ---------------------------------------------------------- */
  --cc-font-en: "rustica", "Helvetica Neue", Arial, sans-serif;
  --cc-font-ja: "source-han-sans-japanese", "Noto Sans JP",
                "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

  /* Type Scale — Fluid via clamp() for resilient scaling */
  /* Unified hero H1 scale (2026-04-09 refactor): clamp(44-68) / weight 400.
     Previously clamp(64-120) / weight 300 was too装飾寄り. Current値は商社型
     (news-article heroと同じトーン) に統一。全 cc-page-hero を使うページに波及。 */
  --cc-fs-page-title: clamp(44px, 4.8vw, 68px);      /* /about/ /business/ Hero */
  --cc-fs-hero-jp: clamp(48px, 6vw, 84px);           /* TOP FV (対象外) */
  --cc-fs-hero-md: clamp(40px, 5vw, 64px);
  --cc-fs-section-title: clamp(32px, 3.5vw, 48px);   /* 2-col grid title */
  --cc-fs-h2: clamp(24px, 2.6vw, 32px);              /* Section title */
  --cc-fs-h3: clamp(20px, 2vw, 24px);
  --cc-fs-h4: 18px;
  --cc-fs-h5: 16px;                                  /* Added P0-1: was undefined */
  --cc-fs-body-lg: 16px;
  --cc-fs-body: 15px;                                /* WCAG: bumped 14→15 */
  --cc-fs-body-sm: 13px;                             /* Added P0-1: alias for small */
  --cc-fs-small: 13px;                               /* WCAG: bumped 12→13 */
  --cc-fs-eyebrow: 11px;

  /* Line heights — never below 1.15 to protect descenders */
  --cc-lh-tight: 1.15;             /* hero / page-title (was 1.0 — caused descender clipping) */
  --cc-lh-snug: 1.3;
  --cc-lh-normal: 1.5;
  --cc-lh-relaxed: 1.7;
  --cc-lh-loose: 1.9;
  --cc-lh-x-loose: 2.0;

  /* Letter spacing — never negative on Japanese */
  --cc-ls-tight: 0;                /* was -0.02em — caused JP collapse */
  --cc-ls-normal: 0;
  --cc-ls-wide: 0.04em;
  --cc-ls-wider: 0.08em;          /* Nav */
  --cc-ls-eyebrow: 0.2em;         /* Eyebrow */
  --cc-ls-eyebrow-lg: 0.3em;      /* Strong eyebrow */
  --cc-ls-en-tight: -0.02em;      /* Latin-only tight — never apply to JP */

  /* ----------------------------------------------------------
   * SPACING
   * ---------------------------------------------------------- */
  --cc-section-py: 140px;          /* Section vertical padding */
  --cc-section-py-sm: 80px;        /* Mobile */
  --cc-container-px: 80px;         /* Container horizontal padding */
  --cc-container-px-sm: 24px;      /* Mobile */
  --cc-container-max: 1440px;      /* Container max width */

  /* Spacing units */
  --cc-space-xs: 8px;
  --cc-space-sm: 16px;
  --cc-space-md: 24px;
  --cc-space-lg: 48px;
  --cc-space-xl: 64px;
  --cc-space-2xl: 80px;
  --cc-space-3xl: 120px;
  --cc-space-4xl: 160px;

  /* ----------------------------------------------------------
   * LAYOUT
   * ---------------------------------------------------------- */
  --cc-header-h: 100px;
  --cc-fv-h: 720px;

  /* Badge / pill */
  --cc-badge-py: 6px;
  --cc-badge-px: 12px;

  /* ----------------------------------------------------------
   * MOTION
   * ---------------------------------------------------------- */
  --cc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --cc-duration-fast: 200ms;
  --cc-duration-base: 400ms;
  --cc-duration-slow: 800ms;
  --cc-duration-x-slow: 1200ms;
}

/* ============================================================
 * Responsive overrides (mobile / tablet)
 * ============================================================ */

/* Note: type scale uses clamp() so these only override spacing now */
@media (max-width: 1024px) {
  .ccv2 {
    --cc-section-py: 96px;
    --cc-container-px: 40px;
  }
}

@media (max-width: 768px) {
  .ccv2 {
    --cc-section-py: 56px;
    --cc-container-px: 24px;
    --cc-header-h: 72px;
  }
}

/* Small phones — iPhone SE (375px) など */
@media (max-width: 480px) {
  .ccv2 {
    --cc-section-py: 48px;
    --cc-container-px: 20px;
    --cc-header-h: 64px;
    --cc-space-3xl: 80px;
    --cc-space-4xl: 100px;
  }
}