/* ========================================
   Design Tokens v2.0
   2層構造: Primitive → Semantic
   Responsive Typography with clamp()
   基準: 375px → 1920px
======================================== */

@layer reset, base, layout, components, utilities;

:root {
  /* ========================================
     1. Primitive Tokens（色パレット）
     ※ 直接使用禁止、Semantic経由で参照
  ======================================== */
  --palette-white: #FFFFFF;
  --palette-black: #3F4247;
  --palette-navy: #152D82;
  --palette-cyan: #39A0C4;
  --palette-orange: #D24800;
  --palette-gray-light: #F3F5F6;
  --palette-gray-ice: #E0F2F8;

  /* ========================================
     2. Semantic Tokens（用途別）
     ※ 実際に使用するのはこちら
  ======================================== */

  /* --- Text --- */
  --color-text: var(--palette-black);
  --color-heading: var(--palette-navy);
  --color-inverse: var(--palette-white);
  --color-link: var(--palette-orange);

  /* --- Background --- */
  --color-bg: var(--palette-white);
  --color-bg-section: var(--palette-gray-light);
  --color-bg-surface: var(--palette-white);    /* グラデ背景上の白パネル */
  --color-bg-header: rgb(255 255 255 / .8);    /* ヘッダー背景（半透明） */
  --color-bg-cta: var(--palette-black);

  /* --- Border --- */
  --color-border: #e5e7eb;

  /* --- Accent --- */
  --accent: var(--palette-orange);
  --accent-sub: var(--palette-navy);

  /* --- Gradients --- */
  --gradient-heading: linear-gradient(90deg, var(--palette-navy), var(--palette-cyan));
  --gradient-bg-hero: linear-gradient(180deg, var(--palette-gray-ice), var(--palette-gray-light));
  --gradient-bg-section: linear-gradient(180deg, var(--palette-gray-light), var(--palette-gray-ice));
  --gradient-bg-image: linear-gradient(180deg, #F6FDFF, var(--palette-gray-ice));

  /* ========================================
     3. Typography - Font Family
  ======================================== */
  --font-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --font-heading: "Poppins", sans-serif;

  /* ========================================
     4. Typography - Body Text
     clamp(min, preferred, max)
     基準: 375px → 1920px
     計算: b = diff_px / 15.45
  ======================================== */
  
  /* 固定サイズ */
  --text-xs: 0.75rem;                               /* 12px */
  --text-sm: 0.875rem;                              /* 14px */
  --text-button: 0.9375rem;                         /* 15px 固定 */

  /* 可変サイズ */
  --text-base: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);            /* 14px → 16px */
  --text-lg: clamp(1rem, 0.94rem + 0.26vw, 1.25rem);               /* 16px → 20px */
  --text-xl: clamp(1.125rem, 1.03rem + 0.39vw, 1.5rem);            /* 18px → 24px */

  /* ========================================
     5. Typography - Headings
     セクション・ブロック見出し用
  ======================================== */

  /* Hero（トップページメインビジュアル） */
  --heading-hero: clamp(1.75rem, 1rem + 2.9vw, 3.5rem);             /* 28px → 56px */
  --heading-hero-sub: clamp(1rem, 0.88rem + 0.52vw, 1.5rem);       /* 16px → 24px */

  /* Section（TOPページ h2相当） */
  --heading-section: clamp(3rem, 2.52rem + 2.07vw, 5rem);          /* 48px → 80px */
  --heading-section-sub: clamp(1rem, 0.94rem + 0.26vw, 1.25rem);   /* 16px → 20px */

  /* Block（TOPページ h3相当） */
  --heading-block: clamp(1.5rem, 1.38rem + 0.52vw, 2rem);          /* 24px → 32px */
  --heading-block-sub: clamp(0.875rem, 0.85rem + 0.13vw, 1rem);    /* 14px → 16px */

  /* ========================================
     6. Line Height
  ======================================== */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* ========================================
     7. Letter Spacing
  ======================================== */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* ========================================
     8. Spacing - Fixed（4px基準）
  ======================================== */
  --space-0: 0;
  --space-1: .25rem;   /* 4px */
  --space-2: .5rem;    /* 8px */
  --space-3: .75rem;   /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-14: 3.5rem;  /* 56px */
  --space-16: 4rem;    /* 64px */
  --space-18: 4.5rem;  /* 72px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */
  --space-30: 7.5rem;  /* 120px */
  --space-40: 10rem;   /* 160px */

  /* ========================================
     9. Spacing - Fluid（375px → 1920px）
  ======================================== */
  /* Extra Small - 細かい調整用 */
  --space-fluid-xs: clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem);      /* 8px → 12px */
  --space-fluid-sm: clamp(0.75rem, 0.69rem + 0.26vw, 1rem);        /* 12px → 16px */

  /* Small - ボタン、カード内の余白 */
  --space-fluid-md: clamp(1rem, 0.88rem + 0.52vw, 1.5rem);         /* 16px → 24px */
  --space-fluid-lg: clamp(1.25rem, 1.13rem + 0.52vw, 1.75rem);     /* 20px → 28px */
  --space-fluid-xl: clamp(1.5rem, 1.38rem + 0.52vw, 2rem);         /* 24px → 32px */

  /* Medium - セクション間、コンポーネント間 */
  --space-fluid-2xl: clamp(2rem, 1.88rem + 0.52vw, 2.5rem);        /* 32px → 40px */
  --space-fluid-3xl: clamp(2.5rem, 2.38rem + 0.52vw, 3rem);        /* 40px → 48px */
  --space-fluid-4xl: clamp(3rem, 2.88rem + 0.52vw, 3.5rem);        /* 48px → 56px */
  --space-fluid-5xl: clamp(3.5rem, 3.38rem + 0.52vw, 4rem);        /* 56px → 64px */

  /* Large - セクションの余白 */
  --space-fluid-6xl: clamp(4rem, 3.76rem + 1.04vw, 5rem);          /* 64px → 80px */
  --space-fluid-7xl: clamp(5rem, 4.76rem + 1.04vw, 6rem);          /* 80px → 96px */
  --space-fluid-8xl: clamp(6rem, 5.52rem + 2.07vw, 8rem);          /* 96px → 128px */

  /* Extra Large - ヒーローセクション、大きなレイアウト */
  --space-fluid-9xl: clamp(8rem, 7.52rem + 2.07vw, 10rem);         /* 128px → 160px */
  --space-fluid-10xl: clamp(10rem, 9.52rem + 2.07vw, 12rem);       /* 160px → 192px */
  --space-fluid-11xl: clamp(12rem, 11.03rem + 4.14vw, 16rem);      /* 192px → 256px */

  /* ========================================
     10. Semantic Spacing（用途別）
  ======================================== */
  /* Header */
  --header-padding: clamp(1rem, 0.76rem + 1.04vw, 2rem);           /* 16px → 32px */

  /* Section Padding */
  --section-padding-y-sm: var(--space-fluid-xl);
  --section-padding-y: var(--space-fluid-6xl);
  --section-padding-y-lg: var(--space-fluid-8xl);
  --section-padding-x: var(--space-fluid-md);

  /* Section Gaps */
  --section-gap-sm: var(--space-fluid-lg);
  --section-gap: var(--space-fluid-2xl);
  --section-gap-lg: var(--space-fluid-3xl);

  /* Container */
  --container-padding-x: clamp(1rem, 0.27rem + 3.11vw, 4rem);      /* 16px → 64px */

  /* Component - Button */
  --button-padding-y: var(--space-fluid-sm);
  --button-padding-x: var(--space-fluid-6xl);
  --button-padding-x-md: var(--space-fluid-4xl);
  --button-padding-x-sm: var(--space-fluid-2xl);

  /* Component - Hero */
  --hero-padding-x: var(--space-4);  /* 16px（SP） */

  /* Component - Card */
  --card-padding: var(--space-6);
  --card-gap: var(--space-4);

  /* Grid/Flex Gaps - Fixed */
  --gap-xs: var(--space-2);        /* 8px */
  --gap-sm: var(--space-4);        /* 16px */
  --gap-md: var(--space-6);        /* 24px */
  --gap-lg: var(--space-8);        /* 32px */
  --gap-xl: var(--space-12);       /* 48px */
  --gap-2xl: var(--space-16);      /* 64px */
  --gap-3xl: var(--space-20);      /* 80px */

  /* Grid/Flex Gaps - Fluid */
  --gap-fluid-xs: var(--space-fluid-xs);
  --gap-fluid-sm: var(--space-fluid-sm);
  --gap-fluid-md: var(--space-fluid-md);
  --gap-fluid-lg: var(--space-fluid-lg);
  --gap-fluid-xl: var(--space-fluid-2xl);
  --gap-fluid-2xl: var(--space-fluid-3xl);
  --gap-fluid-3xl: var(--space-fluid-4xl);

  /* ========================================
     11. Effects
  ======================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 3px rgb(0 0 0 / .08);
  --shadow-md: 0 4px 12px rgb(0 0 0 / .1);
  --shadow-lg: 0 6px 20px rgb(0 0 0 / .15);
  --shadow-card: 0 8px 24px 4px rgb(0 0 0 / .08);  /* 記事カード用 */

  --blur-surface: 90px;  /* ヘッダー・パネル共通 */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ========================================
     12. Layout
  ======================================== */
  --content-w: 72rem;        /* 1152px */
  --content-w-narrow: 48rem; /* 768px */
  --content-w-wide: 90rem;   /* 1440px */
}