@use "sass:math";

// ===========================================================================
// Responsive foundation  (Tozai Yakkyoku)
// ---------------------------------------------------------------------------
//   PC : html { font-size: 62.5% }            -> 1rem = 10px (fixed)
//   SP : html { font-size: calc(100vw / 39) } -> 1rem = 10px at 390px, fluid
//
//   => Author every w / m / p / fz in rem. Design px maps 1:1 to rem:
//        100px -> rem(100) -> 10rem
//      On PC those rem are fixed px. On SP the vw-root turns the SAME rem unit
//      into fluid vw (1rem = 100vw/39).
//
//   PC and SP often differ in RATIO (e.g. inner pad 100px PC -> 60px SP,
//   body 14px PC -> 16px SP). Because the ratios differ, you can NOT rely on
//   one rem value auto-scaling — write the SP value explicitly inside @sp{}.
//      .block { padding-inline: rem(100); @include sp { padding-inline: rem(60); } }
//      -> PC 100px (fixed) / SP 60px@390 (fluid by vw)
// ===========================================================================

$sp-base: 390; // SP design width (px) — divisor for the vw root
$sp-divisor: math.div($sp-base, 10); // 39 -> calc(100vw / 39) makes 1rem = 10px at 390px
$bp-sp: 768px; // PC <-> SP breakpoint (rem -> vw root switch)
$bp-tab: 1024px; // tablet breakpoint (nav -> hamburger, smaller gutters)

// px -> rem  (1rem = 10px on both PC and SP-at-base)
@function rem($px) {
	@return math.div($px, 10) * 1rem;
}

// Fluid font-size: clamps between $min and $max (px), reaching $max around 1100px.
@function fz($min, $max) {
	@return clamp($min * 1px, math.div($max, 11) * 1vw, $max * 1px);
}

@mixin sp {
	@media (max-width: $bp-sp) {
		@content;
	}
}

// Tablet-and-below (<= 1024): nav collapses to hamburger, gutters shrink.
@mixin tab {
	@media (max-width: $bp-tab) {
		@content;
	}
}

// PC-only helper (mirror of @sp) for the rare PC-specific override.
@mixin pc {
	@media (min-width: ($bp-sp + 1)) {
		@content;
	}
}

// ---------------------------------------------------------------------------
// Optical centring for CSS triangles (the circle "arrow" used across buttons).
// A triangle's visual centroid sits 1/3 of its size from the BASE, so a
// geometrically-centred triangle looks shifted toward its base (▶ → left, ▼ →
// up). Nudge it 1/6 of its size toward the apex to look truly centred.
// Size-independent: 1/6 ≈ 16.67% of the triangle's own box on that axis, so
// the same value works for any arrow regardless of px. Use on the ::before
// that draws the triangle (must not already set `transform`; otherwise compose
// with $tri-nudge manually).
// ---------------------------------------------------------------------------
$tri-nudge: 16.67%;

@mixin tri-center-x {
	transform: translateX($tri-nudge); // ▶ right-pointing
}

@mixin tri-center-y {
	transform: translateY($tri-nudge); // ▼ down-pointing
}

// ---------------------------------------------------------------------------
// circle-arrow — round disc with an optically-centred right-pointing triangle
// (▶). The single source for every circle arrow site-wide (button arrows,
// shop bar, chart cards, …). $bg = disc fill, $fg = triangle colour — both
// accept custom props (var(--fg)/var(--bg)) so hover-inverting buttons just
// pass those. Transitions are always declared (harmless when nothing inverts).
// Site-specific positioning (margin-left:auto / absolute) stays at the call.
// ---------------------------------------------------------------------------
@mixin circle-arrow($size: 30, $bg: $color-green, $fg: $color-white, $tw: 5, $tl: 8) {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: rem($size);
	height: rem($size);
	border-radius: 50%;
	background: $bg;
	transition: background-color 0.3s;

	&::before {
		content: "";
		border-style: solid;
		border-width: rem($tw) 0 rem($tw) rem($tl);
		border-color: transparent transparent transparent $fg;
		transition: border-color 0.3s;
		@include tri-center-x;
	}
}

// ---------------------------------------------------------------------------
// hover-invert — outline control that swaps its two colours on hover.
// Exposes the swap via --bg / --fg custom props so child icons/arrows (see
// circle-arrow) invert with it. The element still picks where to apply the
// colours (border etc. stay site-specific); this sets bg/text + the transition
// + the hover swap (--bg⇆--fg). Defaults to white→green; pass $bg/$fg to start
// the other way (e.g. a filled submit button: green→white). $hover widens the
// selector (e.g. "&:not(.is-disabled):hover"); $duration tunes the timing.
// ---------------------------------------------------------------------------
@mixin hover-invert($hover: "&:hover", $duration: 0.3s, $bg: $color-white, $fg: $color-green) {
	--bg: #{$bg};
	--fg: #{$fg};
	background: var(--bg);
	color: var(--fg);
	transition: background-color $duration, color $duration;

	#{$hover} {
		--bg: #{$fg};
		--fg: #{$bg};
		text-decoration: none;
	}
}

// ---------------------------------------------------------------------------
// Colors  (from the TOP design — Figma has no published variables)
// ---------------------------------------------------------------------------
$color-green: #006933; // brand green — headings / buttons / borders / footer
$color-green-70: rgba(0, 105, 51, 0.7); // green @70% — image overlays
$color-lime: #87b829; // light-green accent — badges / pills
$color-gold: #e9bf00; // gold accent — tabs / highlights
$color-bg-tint: #fffff5; // pale section background band (used at 0.9 alpha via .deco-bg)

$color-white: #fff;
$color-text: #1a1a1a; // body text (design uses near-black)
$color-heading: $color-green; // headings are brand green
$color-link: $color-green;
$color-border: $color-green; // single border style: 1px solid green
$color-line: #d5d5d5; // thin neutral divider (news list rows etc.)
$color-rule: #bebebe; // dashed list-row rule (voice/case/faq/books/original/...)

// ---------------------------------------------------------------------------
// Layout  (.inner = gutter layer / .inner-box = content cap)
//   .inner     : full width + min side gutter (PC 50px / SP 20px)
//   .inner-box : centered content cap. Default 1240px; several width patterns.
//     On a 1440 screen: 1240 box centered inside the 50px-gutter inner
//     -> 100px effective inset, matching the design.
// ---------------------------------------------------------------------------
$inner-pad-pc: rem(50); // .inner horizontal gutter (PC)
$inner-pad-sp: rem(20); // .inner horizontal gutter (SP @390)

// .inner-box width patterns (max-width). Add/adjust as the design dictates.
$box-width: rem(1240); // default content column
$box-width-narrow: rem(1024); // text/article column (news list, article detail) — 208 inset @1440
$box-width-wide: rem(1440); // full design-frame width (provisional)

// Fixed header height (used for body offset / scroll-padding)
$header-h-pc: rem(130);
$header-h-sp: rem(80);
$z-header: 1000;
$z-nav: 1100;

// Card-grid gaps from the design
$grid-gap-pc: rem(40); // 3-col card gap
$grid-gap-pc-sm: rem(20); // 4-col card gap
$grid-gap-sp: rem(24); // default SP gap

// ---------------------------------------------------------------------------
// Spacing scale (px keys -> used by utilities & components)
// ---------------------------------------------------------------------------
$spacers: 0, 4, 8, 12, 16, 20, 24, 30, 40, 50, 60, 80, 100, 120;

// Border radius
$radius-sm: rem(10); // cards / chips
$radius-md: rem(20); // CTA buttons
$radius-pill: rem(30); // pills / "more" buttons
$radius-lg: rem(40); // footer top corners

// ---------------------------------------------------------------------------
// Typography
// ---------------------------------------------------------------------------
$font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", sans-serif;
$font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

$font-sizes: 10, 12, 14, 16, 18, 20, 24, 28, 30; // px scale seen in the design

$fz-body-pc: rem(14); // body / base  (PC)
$fz-body-sp: rem(16); // body / base  (SP @390)
$line-height: 1.75;