/* ==========================================================================
   Design Tokens - 高広工業ソリューション
   ========================================================================== */

:root {

  /* ── Colors ── */
  --color-navy:         #d1d5e8;
  --color-darkblue:     #1A2B89;
  --color-darkblue-80:  #4855A1;
  --color-blue:         #006ae4;
  --color-blue-hover:   #1A2B89;
  --color-blue-light:   #e8f0fe;
  --color-red:          #c23233;
  --color-red-hover:    #a82828;

  --color-text:         #2f2f2f;
  --color-text-light:   #666666;
  --color-text-muted:   #999999;
  --color-heading:      #303030;

  --color-white:        #ffffff;
  --color-bg:           #ffffff;
  --color-bg-light:     #F7F7F7;
  --color-bg-lighter:   #fafafa;
  --color-border:       #e0e0e0;
  --color-border-light: #efefef;
  --color-border-qa:      #8C95C4;
 --color-table:           #EDF4FD;


  --color-blue-spec1:   #E0E2EC;
  --color-blue-spec2:   #DAE9FB;

  --color-dark:         #202024;
  --color-dark-overlay: rgba(30, 32, 40, 0.78);

  /* ── Typography ── */
  --font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-en:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* Font sizes – Desktop */
  --fs-5xs:    0.5rem;     /*  8px */
  --fs-4xs:    0.5625rem;  /*  9px */
  --fs-3xs:    0.625rem;   /* 10px */
  --fs-2xs:    0.6875rem;  /* 11px */
  --fs-xs:     0.75rem;    /* 12px */
  --fs-sm:     0.875rem;   /* 14px */
  --fs-md:     1rem;       /* 16px */
  --fs-md-mid: 0.9375rem;  /* 15px ※SPと共通 */
  --fs-base:   1.125rem;   /* 18px */
  --fs-lg:     1.125rem;   /* 18px */
  --fs-xl:     1.25rem;    /* 20px */
  --fs-xl-mid: 1.375rem;   /* 22px */
  --fs-2xl:    1.5rem;     /* 24px */
  --fs-3xl:    1.875rem;   /* 30px */
  --fs-3xl-mid:2rem;       /* 32px */
  --fs-4xl:    2.25rem;    /* 36px */
  --fs-5xl:    2.75rem;    /* 44px */
  --fs-6xl:    3.125rem;   /* 50px */
  --fs-hero:   5rem;       /* 80px */

  /* ── Spacing ── */
  --sp-xs:     0.25rem;  /*  4px */
  --sp-sm:     0.5rem;   /*  8px */
  --sp-sm-md:  0.75rem;  /* 12px */
  --sp-md:     1rem;     /* 16px */
  --sp-md-lg:  1.25rem;     /* 20px */
  --sp-lg:     1.5rem;   /* 24px */
  --sp-xl:     2rem;     /* 32px */
  --sp-1_5xl:  2.5rem;   /* 40px */
  --sp-2xl:    3rem;     /* 48px */
  --sp-3xl:    4rem;     /* 64px */
  --sp-4xl:    5rem;     /* 80px */
  --sp-5xl:    6rem;     /* 96px */
  --sp-6xl:    7rem;     /* 112px */
  --sp-7xl:    8rem;     /* 128px */
  --sp-8xl:    9rem;     /* 144px */
/*  --sp-section:6rem;*/     /* Section vertical padding */
  --sp-section:4rem;     /* Section vertical padding */

  /* ── Layout ── */
  --max-width-full: 100%;
  --max-width:      1200px;
  --max-width-wide: 1400px;
  --header-height:  140px;
  --sidebar-width:  260px;
  --gutter:         2rem;

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  30px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-sm-md:   0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);

  /* ── Transitions ── */
  --ease:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration: 0.3s;
}
/* ── Font sizes – Mobile overrides ── */
@media (max-width: 768px) {
  :root {
    --fs-5xs:    0.4375rem;  /*  7px */
    --fs-4xs:    0.5rem;     /*  8px */
    --fs-3xs:    0.5625rem;  /*  9px */
    --fs-2xs:    0.625rem;   /* 10px */
    --fs-xs:     0.6875rem;  /* 11px */
    --fs-sm:     0.75rem;    /* 12px */
    --fs-md:     0.875rem;   /* 14px */
    --fs-md-mid: 0.9375rem;  /* 15px */
    --fs-base:   1rem;       /* 16px */
    --fs-lg:     1rem;       /* 16px */
    --fs-xl:     1.125rem;   /* 18px */
    --fs-xl-mid: 1.25rem;    /* 20px */
    --fs-2xl:    1.375rem;   /* 22px */
    --fs-3xl:    1.5rem;     /* 24px */
    --fs-3xl-mid:1.875rem;   /* 30px */
    --fs-4xl:    2rem;       /* 32px */
    --fs-5xl:    2.25rem;    /* 36px */
    --fs-6xl:    2.75rem;    /* 44px */
    --fs-hero:   3.125rem;   /* 50px */

    
  /* ── Layout ── */
  --gutter:         0.5rem;

  }
}