/* =========================================================
   GFI PORTAL / base.css
   Responsibility: design tokens / reset / typography / utilities
   Brand: GFI BLUE
========================================================= */
:root{
  --gfi-blue:#0784c6;
  --gfi-blue-dark:#08699f;
  --gfi-blue-deep:#0b3858;
  --gfi-blue-soft:#eaf6fc;
  --gfi-blue-pale:#f5fbfe;
  --gfi-sky:#79bfde;

  --gfi-primary:var(--gfi-blue);
  --gfi-accent:#1677ff;
  --gfi-warning:#f59e0b;

  --navy:#102c40;
  --navy-light:#1a4d6f;
  --bg:#f4f8fb;
  --surface:#ffffff;
  --white:#ffffff;
  --text:#263746;
  --text-light:#667984;
  --border:#dce7ee;
  --border-strong:#c9dbe6;

  /* legacy aliases: existing page CSS compatibility */
  --emerald:var(--gfi-blue);
  --emerald-dark:var(--gfi-blue-dark);
  --emerald-light:var(--gfi-blue-soft);
  --emerald-10:rgba(7,132,198,.10);
  --emerald-20:rgba(7,132,198,.20);

  --danger:#dc2626;
  --danger-light:#fef2f2;
  --warning:#d97706;

  --font-body:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --font-head:"Poppins","Noto Sans JP",system-ui,sans-serif;

  --header-height:72px;
  --content-max:1160px;
  --reading-max:920px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow:0 8px 24px rgba(20,70,100,.07);
  --shadow-lg:0 18px 48px rgba(20,70,100,.13);

  --icon-xs:1rem;
  --icon-sm:1.25rem;
  --icon-md:1.5rem;
  --icon-lg:2rem;
  --icon-xl:2.5rem;
  --icon-primary:var(--gfi-primary);
  --icon-accent:var(--gfi-accent);
  --icon-warning:var(--gfi-warning);
  --icon-danger:var(--danger);
  --icon-dark:var(--navy);
  --icon-muted:var(--text-light);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.85;letter-spacing:.018em;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;overflow-x:hidden}
body.nav-open{overflow:hidden;overscroll-behavior:none}
body.is-scrolling-by-script .scroll-indicator,body.is-scrolling-by-script .current-section{transition:none!important}
a{color:var(--gfi-blue-dark);text-underline-offset:.18em}
a:hover{color:var(--gfi-blue)}
img,svg{max-width:100%}
img{height:auto;vertical-align:middle}
button,input,select,textarea{font:inherit}
button{color:inherit}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,figure,blockquote{margin-top:0}
h1,h2,h3,.page-header-title,.w-h2,.seg button{font-family:var(--font-head);letter-spacing:.025em;color:var(--navy)}
h1{line-height:1.25} h2,h3{line-height:1.45}
strong,.bold{font-weight:700}
::selection{background:rgba(7,132,198,.18)}
:focus-visible{outline:3px solid rgba(7,132,198,.35);outline-offset:3px}

.icon-svg{width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor;stroke:none}
.icon--xs{width:var(--icon-xs);height:var(--icon-xs)}
.icon--sm{width:var(--icon-sm);height:var(--icon-sm)}
.icon--md{width:var(--icon-md);height:var(--icon-md)}
.icon--lg{width:var(--icon-lg);height:var(--icon-lg)}
.icon--xl{width:var(--icon-xl);height:var(--icon-xl)}

.u-textCenter,.text-center{text-align:center}
.u-textLeft,.text-left{text-align:left}
.u-textRight,.text-right{text-align:right}
.u-mt0,.mt-0{margin-top:0!important}.mt-1{margin-top:.5rem!important}.mt-2{margin-top:1rem!important}.mt-3{margin-top:1.5rem!important}.mt-4{margin-top:2rem!important}
.u-mb0,.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:.5rem!important}.mb-2{margin-bottom:1rem!important}.mb-3{margin-bottom:1.5rem!important}.mb-4{margin-bottom:2rem!important}
.hidden{display:none!important}.visible{display:block!important}
.grid{display:grid;gap:1.5rem}.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}

@media (min-width:768px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}