@charset "UTF-8";

/* ==========================================================================
   tokens.css
   全てのデザインバリエーションは、この変数から派生する。
   既存トップのデザインを崩さないよう、値は実測ベースで設定。
   ========================================================================== */

/* レイヤー宣言（最初に1度） */
@layer reset, tokens, typography, layout, components, a11y, gutenberg, pages, utilities;

@layer tokens {
  :root {

    /* ----------------------------------------
       Color: Brand
       ----------------------------------------
       ロゴ実色は #0081BF（青）。UIではやや彩度を抑えた
       brand-800（#1A5D8C系）を主役にしてBtoBらしい落ち着きを出す。
    */
    --c-brand-logo: #0081BF;     /* ロゴ表示専用 */

    --c-brand-900: #0a3b5c;      /* 濃：ホバー */
    --c-brand-800: #0b67a2;      /* メイン（既存と一致） */
    --c-brand-700: #2e80b5;
    --c-brand-600: #4a96c5;
    --c-brand-500: #6cabd2;
    --c-brand-300: #a8c8de;
    --c-brand-200: #c5d8e6;
    --c-brand-100: #dde8f0;
    --c-brand-50:  #eef3f7;

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

    /* ----------------------------------------
       Color: Text
       ---------------------------------------- */
    --c-text:        #1a1f2b;
    --c-text-muted:  #5a6473;
    --c-text-subtle: #8b95a5;
    --c-text-invert: #ffffff;
    --c-on-dark:     255, 255, 255;  /* 暗い面に重ねる白のRGB。半透明は rgba(var(--c-on-dark), α) で使用 */

    /* ----------------------------------------
       Color: Surface
       ---------------------------------------- */
    --c-bg:         #ffffff;
    --c-bg-alt:     #f7f8fa;
    --c-bg-deep:    #0e1622;       /* フッターなど黒に近い面 */
    --c-line:       #e4e7ec;
    --c-line-soft:  #eef0f3;

    /* ----------------------------------------
       Color: Status
       ---------------------------------------- */
    --c-badge-important: #c54040;  /* 重要なお知らせ */
    --c-badge-notice:    #5a6473;  /* お知らせ */
    --c-badge-press:     var(--c-brand-700);

    /* ----------------------------------------
       Typography: Family
       ---------------------------------------- */
    --ff-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
    --ff-num:  "Inter", "Helvetica Neue", Arial, sans-serif;

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

    /* ----------------------------------------
       Typography: Size
       BtoB日本語サイトに合わせて本文17px基準。
       ---------------------------------------- */
    --fs-display: clamp(2.125rem, 1.6vw + 1.7rem, 2.875rem);  /* 34-46 */
    --fs-h1:      clamp(1.875rem, 1.0vw + 1.6rem, 2.25rem);   /* 30-36 */
    --fs-h2:      clamp(1.5rem, 0.6vw + 1.3rem, 1.75rem);     /* 24-28 */
    --fs-h3:      1.25rem;        /* 20 */
    --fs-h4:      1.0625rem;      /* 17 */
    --fs-body:    1.0625rem;      /* 17 */
    --fs-lead:    1.125rem;       /* 18 */
    --fs-small:   0.9375rem;      /* 15 */
    --fs-caption: 0.875rem;       /* 14 */
    --fs-eyebrow: 0.75rem;        /* 12 */

    /* ----------------------------------------
       Typography: Line-height / letter-spacing
       ---------------------------------------- */
    --lh-tight:   1.3;
    --lh-heading: 1.5;
    --lh-body:    1.8;
    --lh-loose:   1.95;

    --tr-display: -0.005em;
    --tr-heading: 0;
    --tr-body:    0.02em;
    --tr-wide:    0.08em;
    --tr-eyebrow: 0.14em;

    /* ----------------------------------------
       Spacing (8px grid)
       ---------------------------------------- */
    --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-py:       clamp(3rem, 7vw, 5.5rem);
    --section-py-tight: clamp(2rem, 4vw, 3.5rem);
    --section-py-loose: clamp(4rem, 10vw, 8rem);

    /* ----------------------------------------
       Container
       既存トップが max-width 1200px 運用なので合わせる。
       ---------------------------------------- */
    --container-max:    1200px;
    --container-narrow: 960px;
    --container-read:   760px;
    --container-pad:    clamp(1rem, 3vw, 2rem);

    /* MV内側の最大幅は既存実装に合わせて広め */
    --container-wide:   1440px;

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

    /* ----------------------------------------
       Shadow
       ---------------------------------------- */
    --sh-sm: 0 1px 2px rgba(20, 30, 50, 0.04);
    --sh-md: 0 4px 16px rgba(20, 30, 50, 0.06);
    --sh-lg: 0 12px 32px rgba(20, 30, 50, 0.08);
    --sh-cta: 0 4px 16px rgba(11, 103, 162, 0.4);

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

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

    /* ----------------------------------------
       Layout
       ---------------------------------------- */
    --header-h:    72px;
    --header-h-sp: 60px;
    --z-header:    100;
    --z-fab:       90;
    --z-modal:     200;

    /* ----------------------------------------
       Icons as data URI (mask用)
       ---------------------------------------- */
    --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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
    --icon-search:      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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    --icon-mail:        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.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
    --icon-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  }
}