/* ------------------------------------------------------------------
   NSD Design System — Core Tokens
   Brand: 株式会社日本システムデザイン (Nihon System & Design, Inc.)
   Mode:  Light only
------------------------------------------------------------------ */

/* Webfont: Yu Gothic is a system font on Japanese Windows/macOS and is
   NOT distributable. For web previews and decks rendered outside Office,
   we substitute Noto Sans JP — it has nearly identical metrics, the
   same humanist-gothic feel, and ships every weight we use. Bundled as
   a self-hostable @font-face below; falls through to Yu Gothic when
   the user has it locally (this is preferred — keeps native rendering
   on Japanese systems). */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root {
  /* ============================================================
     COLORS — taken verbatim from the official PPTX template + logo
     ============================================================ */

  /* — Brand primaries — */
  --nsd-blue-deep:   #054F9F;  /* Logo "NSD" wordmark — primary brand color */
  --nsd-blue:        #009DDA;  /* Accent cyan-blue — links, highlights, the cloud line */
  --nsd-yellow:      #FFDB00;  /* Logo star — celebratory accent */
  --nsd-yellow-warm: #F6AB00;  /* Warm amber accent (color taxonomy bar) */
  --nsd-orange:      #EA5504;  /* Secondary accent */
  --nsd-green:       #45B035;  /* Secondary accent (success-leaning) */
  --nsd-green-lime:  #8FC31F;  /* Lime accent — energetic */

  /* — Neutrals — */
  --nsd-ink:         #1A1A1A;  /* Body text on light */
  --nsd-graphite:    #3C413B;  /* Master "almost-black" — used for chrome */
  --nsd-charcoal:    #3F3F3F;  /* Heading bar / dark UI fill */
  --nsd-gray-700:    #5A5A5A;
  --nsd-gray-500:    #A6A6A6;  /* Secondary text, dividers */
  --nsd-gray-300:    #D3D3D3;  /* Hairline borders */
  --nsd-gray-100:    #EFEFEF;  /* Subtle surface tint */
  --nsd-paper:       #FFFFFF;  /* App background — pure white per template */

  /* — Semantic foreground / background — */
  --fg-1:            var(--nsd-ink);
  --fg-2:            var(--nsd-gray-700);
  --fg-3:            var(--nsd-gray-500);
  --fg-on-dark:      #FFFFFF;
  --fg-link:         var(--nsd-blue-deep);
  --fg-link-hover:   var(--nsd-blue);

  --bg-1:            var(--nsd-paper);
  --bg-2:            var(--nsd-gray-100);
  --bg-dark:         var(--nsd-charcoal);
  --bg-brand:        var(--nsd-blue-deep);

  --border-hairline: var(--nsd-gray-300);
  --border-strong:   var(--nsd-gray-500);

  /* — Semantic status (mapped to accent palette) — */
  --status-success:  var(--nsd-green);
  --status-warning:  var(--nsd-yellow-warm);
  --status-error:    var(--nsd-orange);
  --status-info:     var(--nsd-blue);

  /* ============================================================
     TYPE
     ============================================================ */

  /* Font stacks — keep native Yu Gothic first so JP users get the
     real thing; Noto Sans JP picks up everywhere else. */
  --font-sans:
    "Yu Gothic", "游ゴシック", "YuGothic", "游ゴシック体",
    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Meiryo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-mono:
    "SF Mono", "Cascadia Mono", "Consolas",
    "Yu Gothic", "游ゴシック", monospace;

  /* Type scale — matches PPT template sizes (pt → ~px at 1.333) */
  --fs-display:  56px;  /* cover title           (was 36–48pt) */
  --fs-h1:       40px;  /* section break / title (24pt slide) */
  --fs-h2:       28px;  /* slide heading bar     (20pt) */
  --fs-h3:       20px;  /* component heading     (14pt bold) */
  --fs-h4:       16px;  /* small heading         (12pt) */
  --fs-body:     15px;  /* body                  (10–11pt) */
  --fs-small:    13px;  /* caption / footer      (9pt) */
  --fs-micro:    11px;  /* copyright             (8pt) */

  --lh-tight:    1.2;
  --lh-snug:     1.35;
  --lh-normal:   1.6;
  --lh-loose:    1.75;

  /* Tracking — Yu Gothic is naturally a little tight in CJK and a
     touch wide in Latin caps. These are deliberate. */
  --ls-display:  -0.01em;
  --ls-body:     0.01em;
  --ls-caps:     0.08em;

  /* Weights — Yu Gothic ships R(400)/M(500)/B(700); Noto Sans JP
     adds 900. Reach for Black only at display sizes. */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-black:    900;

  /* ============================================================
     SHAPE — radii, borders, shadows
     ============================================================ */

  /* The PPTX template is overwhelmingly rectangular — sharp corners
     are part of the brand's "blocky / pixel cube" visual language.
     We allow a small radius for web ergonomics but never go bigger
     than 6px on chrome and never round images. */
  --radius-none:   0;
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     6px;
  --radius-pill:   999px;     /* badges / status chips only */

  --border-w:        1px;
  --border-w-strong: 2px;
  --border-accent-w: 6px;     /* color taxonomy bar on slide cards */

  /* Shadows are used sparingly — the brand is flat. These are for
     interactive elevation only (menus, popovers). */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:    0 12px 32px rgba(0,0,0,0.12);

  /* ============================================================
     SPACING — 4px base grid
     ============================================================ */
  --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;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;
}

/* ------------------------------------------------------------------
   Semantic element styles — drop-in defaults
------------------------------------------------------------------ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-5);
}
h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-4);
}
h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-3);
}
h4, .h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-2);
}
p {
  margin: 0 0 var(--space-4);
  line-height: var(--lh-normal);
}
small, .small { font-size: var(--fs-small); color: var(--fg-2); }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); border-bottom-color: currentColor; }

hr {
  border: 0;
  border-top: 1px solid var(--border-hairline);
  margin: var(--space-6) 0;
}