/* ============================================
   FAS Recruit - Design Tokens
   ============================================ */

:root {
  /* Colors */
  --color-primary: #007565;
  --color-accent: #f86a3a;
  --color-text: #333333;
  --color-text-light: rgba(51, 51, 51, 0.6);
  --color-white: #ffffff;
  --color-bg-light: #eef0f0;
  --color-bg-placeholder: #ebebeb;
  --color-cta-bg: #4f4f4f;
  --color-border: #d6d6d6;
  --color-overlay: rgba(33, 33, 33, 0.2);

  /* Typography */
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-en: 'Inter', sans-serif;

  /* Spacing */
  --container-padding: 80px;
  --section-gap: 0;

  /* Border Radius */
  --radius-section: 88px;
  --radius-card: 40px;
  --radius-image: 24px;
  --radius-image-sm: 16px;
  --radius-pill: 1000px;

  /* Max Width */
  --max-width: 1470px;
  --content-width: 1400px;

  /* Shadows */
  --shadow-text: 0px 2px 12px rgba(0, 0, 0, 0.16);
  --shadow-section: 0px -4px 20px 0px rgba(0, 0, 0, 0.12);
}

/* --- Wide Screen: cap content at 1400px --- */
@media (min-width: 1561px) {
  :root {
    --container-padding: calc((100vw - var(--content-width)) / 2);
  }
}

/* --- Tablet --- */
@media (max-width: 1080px) {
  :root {
    --container-padding: 64px;
    --radius-section: 64px;
    --radius-card: 32px;
  }
}

/* --- Mobile --- */
@media (max-width: 792px) {
  :root {
    --container-padding: 32px;
    --radius-section: 32px;
    --radius-card: 16px;
    --radius-image: 12px;
    --radius-image-sm: 8px;
  }
}

/* --- Small mobile --- */
@media (max-width: 480px) {
  :root {
    --container-padding: 24px;
  }
}