/* ============================================================
   @layer 宣言（読み込み順に関わらず優先度を固定）
   ============================================================ */
@layer reset, tokens, global, layout, components, utilities;


/* ============================================================
   Design Token — Primitive
   ============================================================ */
@layer tokens {
  :root {
    /* Color — Primitive */
    --_color-brand-700: #1a4a7a;
    --_color-brand-700-rgb: 26 74 122;
    --_color-brand-400: #4a7ba8;
    --_color-brand-400-rgb: 74 123 168;
    --_color-brand-200: #b8d4e8;
    --_color-brand-200-rgb: 184 212 232;
    --_color-line: #06c755;
    --_color-plant: #5a8c5a;
    --_color-ink: #2c2c2c;
    --_color-ink-rgb: 44 44 44;
    --_color-neutral-50: #f8fafb;
    --_color-neutral-mid: #6e6e6e;
    --_color-neutral-mid-rgb: 110 110 110;
    --_color-white: #ffffff;
    --_color-white-rgb: 255 255 255;
  }

  /* Color — Semantic */
  :root {
    --color-brand:       var(--_color-brand-700);
    --color-brand-rgb:   var(--_color-brand-700-rgb);
    --color-brand-mid:   var(--_color-brand-400);
    --color-brand-light: var(--_color-brand-200);
    --color-line:        var(--_color-line);
    --color-plant:       var(--_color-plant);
    --color-ink:         var(--_color-ink);
    --color-ink-rgb:     var(--_color-ink-rgb);
    --color-bg-light:    var(--_color-neutral-50);
    --color-white:       var(--_color-white);
    --color-white-rgb:   var(--_color-white-rgb);
    --color-focus:           var(--_color-brand-400);
    --color-border:          #e5e5e5;
    --color-neutral-mid:     var(--_color-neutral-mid);
    --color-neutral-mid-rgb: var(--_color-neutral-mid-rgb);
  }

  /* Typography */
  :root {
    --font-sans:  'Noto Sans JP', sans-serif;
    --font-serif: 'Noto Serif JP', serif;

    /* Text sizes（375px → 1440px） */
    --text-sm:      0.875rem;  /* 14px  ボタン・キャプション */
    --text-base:    1rem;      /* 16px  本文（固定） */
    --text-lg:      clamp(1rem,    calc(0.912rem + 0.376vw), 1.25rem);   /* 16→20px philosophy本文 */
    --text-xl:      clamp(1.125rem, calc(0.993rem + 0.563vw), 1.5rem);   /* 18→24px 引用 */
    --text-2xl:     clamp(1.25rem,  calc(0.986rem + 1.127vw), 2rem);     /* 20→32px H3 */
    --text-3xl:     clamp(1.375rem, calc(1.089rem + 1.221vw), 2.1875rem);/* 22→35px H2 */
    --text-logo:    clamp(1.375rem, calc(1.199rem + 0.751vw), 1.875rem); /* 22→30px ロゴ */
    --text-display: clamp(1.875rem, calc(1.435rem + 1.878vw), 3.125rem); /* 30→50px philosophy強調 */
  }

  /* Spacing */
  :root {
    --space-1:  0.25rem;  /* 4px  */
    --space-2:  0.5rem;   /* 8px  */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.875rem; /* 30px */
    --space-7:  2.5rem;   /* 40px */
    --space-8:  2.8125rem;/* 45px */
    --space-section: clamp(3.125rem, calc(2.025rem + 4.695vw), 6.25rem); /* 50→100px */
  }

  /* Layout */
  :root {
    --container-max: 75rem;   /* 1200px */
    --container-pad: clamp(1.25rem, calc(-0.938rem + 9.39vw), 7.5rem); /* 20→120px */
    --header-height: 4.625rem; /* 74px */
  }

  /* Border */
  :root {
    --radius-sm:   0.375rem; /* 6px  */
    --radius-md:   0.625rem; /* 10px */
    --radius-lg:   1rem;     /* 16px */
    --radius-xl:   1.25rem;  /* 20px */
    --radius-full: 9999px;
  }

  /* Shadow */
  :root {
    --shadow-card:  0px 8px 10px rgb(0 0 0 / 0.03), 0px 10px 25px rgb(0 0 0 / 0.05);
    --shadow-image: 0px 4px 6px rgb(0 0 0 / 0.10), 0px 10px 15px rgb(0 0 0 / 0.10);
  }
}


/* ============================================================
   Global
   ============================================================ */
@layer global {
  html {
    font-family: var(--font-sans);
    font-size: 100%;
    color: var(--color-ink);
    background-color: var(--color-white);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-size: var(--text-base);
    line-height: 2; /* 32px / 16px */
    overflow-x: hidden;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  :focus {
    outline: none;
  }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  @media (prefers-reduced-motion: no-preference) {
    :root {
      scroll-behavior: smooth;
    }
  }
}


/* ============================================================
   Layout Utilities
   ============================================================ */
@layer layout {
  .container {
    width: min(var(--container-max), calc(100% - 2 * var(--container-pad)));
    margin-inline: auto;
  }

  .section {
    padding-block: var(--space-section);
  }
}