/* ============================================================
   FIRST IMAGE CORPORATION — Design Tokens
   Version: 5.0.0  (Light Base + FIC Logo Color System)
   ============================================================ */

:root {

  /* ── Colors: Light Base Backgrounds ────────────────── */
  --color-bg-base:     #F4F4F7;   /* ページ基本背景 — 超薄グレー */
  --color-bg-deep:     #EAEAED;   /* セクション交互背景 — やや濃いグレー */
  --color-bg-surface:  #FFFFFF;   /* カード・パネル — 白 */
  --color-bg-elevated: #F0F0F4;   /* ホバー時昇格表面 */

  /* ── Colors: Always-Dark Surfaces ──────────────────── */
  --color-bg-ink:      #07070F;   /* フッター */
  --color-bg-ink-base: #0C0C18;   /* ページヒーロー・CTA */
  --color-bg-ink-surface: #141422; /* ダークセクション面 */

  /* ── Colors: Border ─────────────────────────────────── */
  --color-border-subtle: #DCDCE2;
  --color-border-muted:  #C8C8D2;

  /* ── Colors: Crimson Accent (from FIC logo slash) ───── */
  --color-gold:         #C42840;
  --color-gold-light:   #E03858;
  --color-gold-muted:   #7C1A28;
  --color-gold-subtle:  rgba(196, 40, 64, 0.09);
  --color-gold-glow:    rgba(196, 40, 64, 0.22);

  /* ── Colors: Steel Blue (from FIC logo letters) ──────── */
  --color-steel:        #3D6080;
  --color-steel-light:  #5480A0;
  --color-steel-muted:  #253C50;
  --color-steel-subtle: rgba(61, 96, 128, 0.10);
  --color-steel-glow:   rgba(61, 96, 128, 0.22);

  /* ── Colors: Text (Dark for light background) ────────── */
  --color-text-primary:   #0E0E1A;   /* contrast 18:1 on #F4F4F7 */
  --color-text-secondary: #3A3A50;   /* contrast 9.5:1 on #F4F4F7 */
  --color-text-muted:     #5E5E72;   /* contrast 5.6:1 on #F4F4F7 ✓ WCAG AA */

  /* ── Colors: Text Light (for dark sections) ─────────── */
  --color-text-ink-primary:   #F0EEE8;   /* contrast 17:1 on #07070F */
  --color-text-ink-secondary: #AEADA5;   /* contrast 6.8:1 on #07070F */
  --color-text-ink-muted:     #8888A0;   /* contrast 6.0:1 on #07070F ✓ WCAG AA */

  /* ── Colors: Functional ─────────────────────────────── */
  --color-success: #3D8B6E;
  --color-error:   #C42840;

  /* ── Gradients ───────────────────────────────────────── */
  --gradient-gold: linear-gradient(135deg, #E84060 0%, #D03050 25%, #C02840 55%, #9A1E30 80%, #C42840 100%);
  --gradient-steel: linear-gradient(135deg, #5480A0 0%, #3D6080 50%, #2A4860 100%);
  --gradient-hero: linear-gradient(180deg,
    rgba(7,7,15,0.10) 0%,
    rgba(7,7,15,0.50) 48%,
    rgba(7,7,15,0.95) 100%);
  --gradient-card-hover: linear-gradient(135deg,
    rgba(196,40,64,0.05) 0%,
    rgba(196,40,64,0.00) 100%);
  --gradient-section-fade: linear-gradient(180deg, #F4F4F7 0%, #EAEAED 100%);

  /* ── Typography ──────────────────────────────────────── */
  --font-heading-ja: 'Noto Serif JP', 'Yu Mincho', '游明朝', serif;
  --font-heading-en: 'Barlow', 'Helvetica Neue', sans-serif;
  --font-body:       'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-numeric:    'Barlow Condensed', 'Barlow', sans-serif;

  /* ── Type Scale ──────────────────────────────────────── */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.8rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.27vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.6vw,  1.5rem);
  --text-xl:   clamp(1.25rem,  1rem    + 1.25vw, 2rem);
  --text-2xl:  clamp(1.5rem,   1rem    + 2.5vw,  3rem);
  --text-3xl:  clamp(2rem,     1rem    + 4.5vw,  5rem);
  --text-hero: clamp(2.5rem,   1rem    + 7vw,    7rem);

  /* ── Spacing (8px base) ─────────────────────────────── */
  --space-1:  0.5rem;
  --space-2:  1rem;
  --space-3:  1.5rem;
  --space-4:  2rem;
  --space-5:  2.5rem;
  --space-6:  3rem;
  --space-8:  4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  --section-padding: clamp(4rem, 10vw, 9rem);

  /* ── Layout ──────────────────────────────────────────── */
  --container-wide:   1280px;
  --container-normal: 1080px;
  --container-narrow:  720px;
  --container-padding: clamp(1.25rem, 5vw, 4rem);

  /* ── Border Radius ───────────────────────────────────── */
  --radius-sm:   2px;
  --radius-base: 4px;
  --radius-md:   8px;
  --radius-full: 9999px;

  /* ── Shadows (softer on light bg) ───────────────────── */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.14);
  --shadow-gold: 0 8px 32px rgba(196, 40, 64, 0.22);
  --shadow-steel: 0 8px 32px rgba(61, 96, 128, 0.20);

  /* ── Transitions ─────────────────────────────────────── */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  150ms;
  --dur-base:  300ms;
  --dur-slow:  600ms;

  /* ── Z-Index ─────────────────────────────────────────── */
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-header:  400;
}