/* ============================================================
   FIRST IMAGE CORPORATION — Recruit Site Design Tokens
   Light Theme
   ============================================================ */

:root {

  /* ── Colors: Background ─────────────────────────────── */
  --color-bg-deep:     #EDE9DF;
  --color-bg-base:     #FAFAF8;
  --color-bg-surface:  #FFFFFF;
  --color-bg-elevated: #F5F2EA;

  /* ── Colors: Border ─────────────────────────────────── */
  --color-border-subtle: #E8E4DA;
  --color-border-muted:  #CFC9B8;

  /* ── Colors: Gold Accent ────────────────────────────── */
  --color-gold:         #C9A85C;
  --color-gold-light:   #E8C97A;
  --color-gold-muted:   #A07830;
  --color-gold-dark:    #7A5820;
  --color-gold-subtle:  rgba(201, 168, 92, 0.12);
  --color-gold-glow:    rgba(201, 168, 92, 0.30);

  /* ── Colors: Text ───────────────────────────────────── */
  --color-text-primary:   #1A1926;
  --color-text-secondary: #4A4A5C;
  --color-text-muted:     #8C8C9C;

  /* ── Colors: Functional ─────────────────────────────── */
  --color-success: #2D7A57;
  --color-error:   #C04040;

  /* ── Gradients ───────────────────────────────────────── */
  --gradient-gold: linear-gradient(135deg, #F2DC88 0%, #E8C97A 20%, #C9A85C 50%, #A07830 80%, #D4AF65 100%);
  --gradient-hero: linear-gradient(180deg,
    rgba(10,10,20,0.20) 0%,
    rgba(10,10,20,0.55) 50%,
    rgba(10,10,20,0.88) 100%);
  --gradient-gold-subtle: linear-gradient(135deg, rgba(201,168,92,0.08) 0%, rgba(201,168,92,0.00) 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;   /*  8px */
  --space-2:  1rem;     /* 16px */
  --space-3:  1.5rem;   /* 24px */
  --space-4:  2rem;     /* 32px */
  --space-5:  2.5rem;   /* 40px */
  --space-6:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */

  --section-padding: clamp(4rem, 8vw, 7rem);

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

  /* ── Border Radius ───────────────────────────────────── */
  --radius-sm:   3px;
  --radius-base: 6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;

  /* ── Shadows (light theme — softer) ─────────────────── */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-gold: 0 6px 24px rgba(201,168,92,0.28);

  /* ── 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;
}