/* ============================================
   Design Tokens — variables.css
   キャリアサバイバー リニューアル
   ============================================ */

:root {
  /* ── Colors ── */
  --clr-primary:        #3D6FA6;  /* カームブルー */
  --clr-primary-dark:   #2D5580;
  --clr-primary-light:  #EBF3FB;
  --clr-primary-xlight: #F4F9FD;

  --clr-accent:         #E07B54;  /* テラコッタ（CTA） */
  --clr-accent-dark:    #C86840;
  --clr-accent-light:   #FDF0EA;

  --clr-bg:             #F8F7F4;  /* ウォームオフホワイト */
  --clr-surface:        #FFFFFF;
  --clr-surface-2:      #F2F1EE;

  --clr-text:           #1E2A38;  /* ダークネイビー */
  --clr-text-muted:     #5B6D7C;
  --clr-text-light:     #8A9BAA;

  --clr-border:         #DDE4EC;
  --clr-border-light:   #EEF2F6;

  --clr-success:        #2DA066;  /* グリーン */
  --clr-success-light:  #E8F7F0;
  --clr-warning:        #D97706;
  --clr-warning-light:  #FEF3C7;
  --clr-danger:         #DC2626;
  --clr-danger-light:   #FEE2E2;

  /* ── Category Tag Colors ── */
  --clr-tag-freeter:    #E8834A;
  --clr-tag-neet:       #7C5EB8;
  --clr-tag-second:     #2DA066;
  --clr-tag-inexperienced: #3D6FA6;
  --clr-tag-tips:       #0891B2;
  --clr-tag-black:      #374151;

  /* ── Typography ── */
  --font-family:   'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --line-height:   1.85;
  --line-height-tight: 1.4;
  --line-height-heading: 1.45;

  --fs-xs:   0.75rem;    /*  12px */
  --fs-sm:   0.8125rem;  /*  13px */
  --fs-base: 1rem;       /*  16px */
  --fs-md:   1.0625rem;  /*  17px */
  --fs-lg:   1.125rem;   /*  18px */
  --fs-xl:   1.25rem;    /*  20px */
  --fs-2xl:  1.5rem;     /*  24px */
  --fs-3xl:  1.75rem;    /*  28px */
  --fs-4xl:  2rem;       /*  32px */
  --fs-5xl:  2.5rem;     /*  40px */

  --fw-normal:  500;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  /* ── Spacing ── */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* ── Border Radius ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(30,42,56,0.06);
  --shadow-sm: 0 1px 4px rgba(30,42,56,0.08), 0 1px 2px rgba(30,42,56,0.04);
  --shadow-md: 0 4px 12px rgba(30,42,56,0.08), 0 1px 3px rgba(30,42,56,0.04);
  --shadow-lg: 0 8px 24px rgba(30,42,56,0.10), 0 2px 6px rgba(30,42,56,0.04);
  --shadow-xl: 0 16px 40px rgba(30,42,56,0.12);

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition:      0.2s ease;
  --transition-slow: 0.3s ease;

  /* ── Layout ── */
  --container-max:     1100px;
  --container-padding: 1.25rem;
  --header-height:     64px;
}

/* Responsive tokens */
@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
    --header-height: 72px;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: 2.5rem;
  }
}