/* ==========================================================================
   Sunshore — Design Tokens
   海のトーン：オフホワイト基調、藍〜ペトロールの反転面、抑制したゴールドの単色アクセント。
   ========================================================================== */

/* --- Self-host 想定フォント（ファイルを配置すれば有効化）。無い環境では下のスタックにフォールバック --- */
/*
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-Variable.woff2") format("woff2");
  font-weight: 300 800; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap; font-style: normal;
}
*/

:root {
  /* Surfaces */
  --c-bg:            #F7F6F2; /* オフホワイト（ごく淡いセージ寄り） */
  --c-bg-soft:       #F1F0EA;
  --c-bg-deep:       #143240; /* ペトロール／藍（フッター・コンタクト） */
  --c-bg-deep-2:     #0E252F;

  /* Ink */
  --c-ink:           #16303B; /* ダークネイビー */
  --c-ink-soft:      #4A5D66;
  --c-ink-faint:     #8A979C;
  --c-on-deep:       #EDECE6; /* 反転（濃色面上の文字） */
  --c-on-deep-soft:  #9CB0B8;

  /* Accent（単色・低彩度のサンシャインゴールド） */
  --c-accent:        #C9A44C;
  --c-accent-soft:   #D9C088;

  /* 補助トーン（グラデ／写真領域にのみ淡く） */
  --c-turquoise:     #6FA9AE;
  --c-sand:          #D9CBB4;

  /* Lines */
  --c-line:          rgba(22, 48, 59, 0.14);
  --c-line-soft:     rgba(22, 48, 59, 0.08);
  --c-line-on-deep:  rgba(237, 236, 230, 0.18);

  /* Typography */
  --f-sans: "Hanken Grotesk", "Helvetica Neue", "Segoe UI",
            "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --f-mono: "Space Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* Rhythm */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.8rem, 1.5rem + 1.5vw, 2.8rem);
  --step-3:  clamp(2.6rem, 1.8rem + 3.6vw, 5rem);
  --step-hero: clamp(3rem, 1rem + 9vw, 9.5rem);

  /* Layout */
  --margin: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1400px;
  --radius: 6px;

  /* Motion */
  --ease-wave: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.9s;
}