/* ==========================================================================
   Famitra Design System — Colors & Type
   "人生100年時代のコンシェルジュ"
   ========================================================================== */

/* --- Webfonts ------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");

:root {
  /* ----- Brand Color ----- */
  --famitra-teal:          #1EADAC; /* Primary brand color — from logo guidelines (HEX #1EADAC / RGB 30,173,173 / CMYK 73,12,38,0) */
  --famitra-teal-alt:      #2D9C8E; /* Alternate teal used on section covers & photo overlays */
  --famitra-gold:          #FAD550; /* Secondary brand — from logo guidelines (HEX #FAD550) */
  --famitra-gold-soft:     #F2C94C; /* Soft gold — resolution / "To-Be" asset color */
  --famitra-black:         #000000; /* Tertiary brand — from logo guidelines */

  /* ----- Semantic Foundations ----- */
  --fg-1:                  #333333; /* Primary text — Dark Gray */
  --fg-2:                  #555555; /* Secondary text */
  --fg-3:                  #8A8A8A; /* Tertiary / captions / meta */
  --fg-4:                  #C5C5C5; /* Disabled / non-registered state (from codebase $non-registered) */
  --fg-on-brand:           #FFFFFF; /* Reversed text on teal */
  --fg-brand:              var(--famitra-teal); /* Brand emphasis text */

  --bg-1:                  #FFFFFF; /* Content slide background */
  --bg-2:                  #F7F9F9; /* Page wash, alternate rows */
  --bg-3:                  #E0F2F1; /* Pale Teal — table row highlight, sub-accent wash */
  --bg-cover:              var(--famitra-teal-alt); /* Cover / section break BG */

  /* ----- Functional / Status ----- */
  --risk:                  #EB5757; /* Salmon Red — As-Is risks (asset freeze, dementia) */
  --risk-bg:               #FDECEC; /* Risk container wash */
  --solution:              var(--famitra-gold-soft); /* Gold — To-Be / resolved state */
  --solution-bg:           #FEF7DF; /* Gold wash */
  --success:               var(--famitra-teal);
  --info:                  #2D8CFF; /* Kept from codebase ($zoom) for integrations */
  --warning:               var(--famitra-gold);
  --danger:                #E86B79; /* From codebase ($pink) */

  /* ----- Borders / Dividers ----- */
  --border-1:              #E5E7E8;
  --border-2:              #D1D5D6;
  --border-strong:         #333333;
  --border-brand:          var(--famitra-teal);

  /* ----- Type Stack ----- */
  --font-jp:               "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-en:               "Zen Kaku Gothic New", "Helvetica Neue", Arial, sans-serif;
  --font-num:              "Zen Kaku Gothic New", "Helvetica Neue", Arial, sans-serif;

  /* ----- Weights ----- */
  --w-regular:             400;  /* Body — 視認性が高く、ふところが広い */
  --w-medium:              500;
  --w-bold:                700;  /* Headings — 幾何学的で現代的 */
  --w-black:               900;

  /* ----- Type Scale (base-16, slide-aware) ----- */
  --step-display:          clamp(44px, 6vw, 72px);  /* cover slide titles */
  --step-h1:               clamp(32px, 3.6vw, 44px);
  --step-h2:               clamp(24px, 2.6vw, 32px);
  --step-h3:               20px;
  --step-h4:               18px;
  --step-body-lg:          18px;
  --step-body:             16px;
  --step-caption:          14px;
  --step-micro:            12px; /* footers / copyright only */

  /* ----- Line Heights ----- */
  --lh-tight:              1.25;   /* display / h1 */
  --lh-snug:               1.4;    /* h2 / h3 */
  --lh-body:               1.75;   /* body paragraphs */
  --lh-dense:              1.5;    /* captions / UI */

  /* ----- Letter Spacing ----- */
  --ls-jp-tight:          -0.01em;
  --ls-jp-body:            0.02em;
  --ls-jp-loose:           0.08em; /* ALL-CAPS ENGLISH CAPTIONS */
  --ls-en-caps:            0.12em;

  /* ----- Spacing ----- */
  --space-1:               4px;
  --space-2:               8px;
  --space-3:               12px;
  --space-4:               16px;
  --space-5:               24px;
  --space-6:               32px;
  --space-7:               48px;
  --space-8:               64px;
  --space-9:               96px;

  /* ----- Radii ----- */
  --r-sm:                  4px;    /* informational grouping — per brand guide */
  --r-md:                  8px;
  --r-lg:                  12px;
  --r-pill:                999px;

  /* ----- Elevation (gentle — warmth, not dramatic) ----- */
  --shadow-1: 0 1px 2px rgba(30, 48, 56, 0.06), 0 1px 1px rgba(30, 48, 56, 0.04);
  --shadow-2: 0 4px 12px rgba(30, 48, 56, 0.08), 0 2px 4px rgba(30, 48, 56, 0.04);
  --shadow-3: 0 12px 28px rgba(30, 48, 56, 0.10), 0 4px 10px rgba(30, 48, 56, 0.05);
  --shadow-brand: 0 8px 24px rgba(30, 173, 172, 0.22);

  /* ----- Motion ----- */
  --ease-out:              cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-standard:         cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:              120ms;
  --dur-med:               220ms;
  --dur-slow:              360ms;
}

/* --- Base --------------------------------------------------------------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-jp);
  font-weight: var(--w-regular);
  font-size: var(--step-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-jp-body);
  color: var(--fg-1);
  background: var(--bg-1);
  text-wrap: pretty;
}

/* --- Semantic type primitives ------------------------------------------- */
.ds-display {
  font-family: var(--font-jp);
  font-weight: var(--w-bold);
  font-size: var(--step-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-jp-tight);
}
.ds-h1 { font: var(--w-bold) var(--step-h1)/var(--lh-tight) var(--font-jp); letter-spacing: var(--ls-jp-tight); }
.ds-h2 { font: var(--w-bold) var(--step-h2)/var(--lh-snug) var(--font-jp); letter-spacing: var(--ls-jp-tight); }
.ds-h3 { font: var(--w-bold) var(--step-h3)/var(--lh-snug) var(--font-jp); }
.ds-h4 { font: var(--w-bold) var(--step-h4)/var(--lh-snug) var(--font-jp); }
.ds-body-lg { font: var(--w-regular) var(--step-body-lg)/var(--lh-body) var(--font-jp); }
.ds-body { font: var(--w-regular) var(--step-body)/var(--lh-body) var(--font-jp); }
.ds-caption { font: var(--w-regular) var(--step-caption)/var(--lh-dense) var(--font-jp); color: var(--fg-2); }
.ds-micro { font: var(--w-regular) var(--step-micro)/var(--lh-dense) var(--font-jp); color: var(--fg-3); }
.ds-caption-en {
  font: var(--w-medium) var(--step-caption)/var(--lh-dense) var(--font-en);
  text-transform: uppercase;
  letter-spacing: var(--ls-en-caps);
  color: var(--fg-brand);
}

/* --- Emphasis helpers --------------------------------------------------- */
.ds-brand { color: var(--fg-brand); }
.ds-risk  { color: var(--risk); }
.ds-solution { color: var(--solution); }
.ds-invert { color: var(--fg-on-brand); }

/* --- Links -------------------------------------------------------------- */
a { color: var(--fg-brand); text-decoration-color: color-mix(in srgb, var(--fg-brand) 35%, transparent); text-underline-offset: 3px; }
a:hover { color: color-mix(in srgb, var(--fg-brand) 85%, black); }