/* ============================================================
   tokens.css
   キューポイント9PTのデザイントークン。
   設計事務所トーン(明朝×ゴシック / オレンジ抑制 / 余白潤沢)を
   新システムの構造で再構成。
   ============================================================ */

@layer tokens {
  :root {
    /* --------------------------------------------------------
       Brand color
       ロゴカラーと UIカラーを分離。
       UIには彩度を少し落としたオレンジを使う。
       -------------------------------------------------------- */

    /* ロゴ表示専用 */
    --c-brand-logo: #E8743B;

    /* UI用パレット(彩度をやや落とした9段階) */
    --c-brand-900: #b3501f; /* 強調・ホバー */
    --c-brand-800: #c75e2b; /* メイン */
    --c-brand-700: #d56f3e;
    --c-brand-600: #df8758;
    --c-brand-500: #e89e76;
    --c-brand-400: #efb796;
    --c-brand-300: #f4cdb6;
    --c-brand-200: #f8dfca;
    --c-brand-100: #fcede3;
    --c-brand-50:  #fdf5ee;

    /* 役割名エイリアス */
    --c-action-primary:       var(--c-brand-800);
    --c-action-primary-hover: var(--c-brand-900);
    --c-action-on:            #ffffff;
    --c-surface-emphasis:     var(--c-brand-50);
    --c-accent:               var(--c-brand-800);

    /* --------------------------------------------------------
       Text & Surface
       -------------------------------------------------------- */
    --c-text:        #2c2c2c;
    --c-text-muted:  #6b6b6b;
    --c-text-subtle: #9a9a9a;
    --c-text-on-dark: rgba(255, 255, 255, 0.95);
    --c-text-on-dark-muted: rgba(255, 255, 255, 0.6);
    --c-text-invert: #ffffff;

    --c-bg:        #ffffff;
    --c-bg-alt:    #fafafa;
    --c-bg-dark:   #1a1a1a;
    --c-line:      #e5e5e5;
    --c-line-soft: #efefef;

    /* --------------------------------------------------------
       Typography
       明朝(Shippori Mincho)と ゴシック(Noto Sans JP)の併用
       -------------------------------------------------------- */
    --ff-display: "Shippori Mincho", "Hiragino Mincho ProN", "YuMincho", serif;
    --ff-sans:    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", sans-serif;
    --ff-num:     "Noto Sans JP", -apple-system, sans-serif;

    /* Weight */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Font size: clamp で可変、本文は固定 */
    --fs-display: clamp(2.5rem,  2.0vw + 2.0rem, 3.25rem);  /* 40-52px */
    --fs-h1:      clamp(2.0rem,  1.2vw + 1.7rem, 2.5rem);   /* 32-40px */
    --fs-h2:      clamp(1.625rem, 0.7vw + 1.4rem, 2.0rem);  /* 26-32px */
    --fs-h3:      1.25rem;       /* 20px */
    --fs-h4:      1.0625rem;     /* 17px */
    --fs-body:    1.0625rem;     /* 17px ← BtoB日本語の標準 */
    --fs-lead:    1.125rem;      /* 18px */
    --fs-small:   0.9375rem;     /* 15px */
    --fs-caption: 0.8125rem;     /* 13px */
    --fs-eyebrow: 0.6875rem;     /* 11px */

    /* Line height */
    --lh-tight:    1.3;
    --lh-heading:  1.5;
    --lh-body:     1.9;
    --lh-loose:    2.0;

    /* Letter spacing */
    --tr-display:  0.02em;   /* 明朝のディスプレイ向け */
    --tr-heading:  0.04em;   /* 明朝 h1〜h2 */
    --tr-body:     0.02em;
    --tr-wide:     0.1em;
    --tr-eyebrow:  0.25em;

    /* --------------------------------------------------------
       Spacing
       -------------------------------------------------------- */
    --sp-1: 0.25rem;  /*  4px */
    --sp-2: 0.5rem;   /*  8px */
    --sp-3: 0.75rem;  /* 12px */
    --sp-4: 1rem;     /* 16px */
    --sp-5: 1.5rem;   /* 24px */
    --sp-6: 2rem;     /* 32px */
    --sp-7: 3rem;     /* 48px */
    --sp-8: 4rem;     /* 64px */
    --sp-9: 6rem;     /* 96px */
    --sp-10: 8rem;    /* 128px */

    /* Section padding (縦余白を1段締めた値。横余白は据え置き) */
    --section-py:       clamp(2.25rem, 5vw, 4.5rem);  /* 標準 max72px */
    --section-py-tight: clamp(1.75rem, 3.5vw, 3rem);  /* 詰める */
    --section-py-loose: clamp(3.5rem, 7vw, 6rem);     /* ヒーロー後 max96px */

    /* --------------------------------------------------------
       Container
       -------------------------------------------------------- */
    --container-max:    1120px;
    --container-narrow:  880px;
    --container-read:    720px;
    --container-pad:     clamp(1rem, 3vw, 2rem);

    /* --------------------------------------------------------
       Radius / Shadow
       -------------------------------------------------------- */
    --r-sm:   2px;
    --r-md:   4px;
    --r-lg:   8px;
    --r-pill: 999px;

    --sh-sm: 0 1px 2px rgba(20, 20, 20, 0.04);
    --sh-md: 0 4px 16px rgba(20, 20, 20, 0.06);
    --sh-lg: 0 12px 32px rgba(20, 20, 20, 0.08);

    /* --------------------------------------------------------
       Motion
       -------------------------------------------------------- */
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --dur:  240ms;
    --dur-slow: 600ms;

    /* --------------------------------------------------------
       Icon
       -------------------------------------------------------- */
    --icon-sm: 1rem;
    --icon-md: 1.25rem;
    --icon-lg: 1.5rem;
    --icon-xl: 2rem;
    --icon-stroke: 1.5;

    /* 矢印アイコン(疑似要素用 data URI) */
    --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  }
}