/* ============================================================
   NDP — 南天ドローンパーク (Nanten Drone Park)
   Design System · colors_and_type.css
   ------------------------------------------------------------
   Grounded in the live site (Bulma 0.9.4 + custom overrides).
   Brand blue is the identity; the logo RED is promoted to a
   dedicated CONVERSION accent to drive 問い合わせ (inquiries).
   ============================================================ */

/* -------- Fonts --------
   The live site uses the Bulma/system sans stack (no webfont).
   On Japanese OSes this resolves to Hiragino Kaku Gothic / Yu
   Gothic / Meiryo. For cross-platform fidelity we pin "Noto
   Sans JP" as the nearest Google-Fonts match (SUBSTITUTION —
   see README). Remove the @import to fall back to system only. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root {
  /* ---------- Brand palette ---------- */
  --ndp-navy:        #0F4C81;   /* primary identity blue (headings, links) */
  --ndp-navy-deep:   #0a3a64;   /* pressed / deep navy */
  --ndp-blue:        #2a8ac8;   /* mid blue — gradient partner */
  --ndp-sky:         #89CFF0;   /* light "baby blue" — hero overlay, accents */
  --ndp-sky-pale:    #e6f3fb;   /* tint — light buttons, cards */
  --ndp-sky-paler:   #e0f2fe;   /* tint — notifications */
  --ndp-ink-blue:    #055189;   /* text on pale-blue surfaces */

  /* ---------- Logo red (brand MARK only — never a CTA) ---------- */
  --ndp-red:         #C8102E;   /* appears only inside the logo artwork */

  /* ---------- Conversion accent ----------
     A SINGLE hot CTA color, deliberately NOT a red+green pair —
     a local competitor (droneschool.okinawa) owns red/orange + green.
     Default = confident orange, the complement of the brand blue, so
     it pops hard without clashing. The phone / secondary action uses
     the brand NAVY (not green). Tweakable live in the UI kit. */
  --ndp-cta:         #D35500;   /* PRIMARY CTA resting (rich orange) */
  --ndp-cta-hover:   #F26100;   /* hover → brightens to vivid orange */
  --ndp-cta-press:   #B84A00;
  --ndp-cta-ink:     #ffffff;   /* text on CTA */
  --ndp-tel:         #1063C0;   /* phone CTA resting */
  --ndp-tel-hover:   #1577E0;   /* hover → brightens to vivid blue */

  /* ---------- Card accent: soft orange tint (二等 / standard course card) ----------
     A PALE orange TINT used only as a light card accent (border / badge / light
     button). Ties to the brand CTA hue but is far lighter than the solid orange
     CTA, so it never competes with the CTA button or the blue phone CTA, and is
     distinct from the 一等 card's sky tint. Lightness matches the sky tints. */
  --ndp-stdcard:      #fcebdd;  /* light warm fill */
  --ndp-stdcard-line: #f2b084;  /* border / accent line (sky-equivalent lightness) */
  --ndp-stdcard-ink:  #b4530a;  /* readable amber text on light tint */

  /* ---------- Neutrals ---------- */
  --ndp-ink:         #222222;   /* body text */
  --ndp-ink-soft:    #4a4f55;   /* secondary text */
  --ndp-grey:        #7a7a7a;   /* logo grey / muted / captions */
  --ndp-line:        #F2F4F6;   /* hairline borders, header divider */
  --ndp-bg:          #ffffff;   /* page background */
  --ndp-bg-alt:      #f7f9fb;   /* alternating section background */
  --ndp-bg-light:    #fafafa;   /* Bulma has-background-light */

  /* ---------- Semantic ---------- */
  --ndp-warning-bg:  #fff8e1;
  --ndp-warning-fg:  #8a6d00;

  /* ---------- Gradients ---------- */
  --ndp-grad-primary:  linear-gradient(to bottom right, #0F4C81, #2a8ac8); /* @kind color */
  --ndp-grad-primary-h:linear-gradient(to bottom right, #1a6aa8, #89CFF0); /* @kind color */
  /* hero scrim: bright, airy wash with a GENTLE falloff (4 stops) so the
     transition isn't abrupt; keeps text legible, lets the photo stay vivid */
  --ndp-grad-hero:     linear-gradient(115deg, rgba(255,255,255,.93) 0%, rgba(238,246,252,.72) 36%, rgba(186,222,246,.42) 68%, rgba(137,207,240,.16) 100%); /* @kind color */
  --ndp-hero-filter:   saturate(1.14) contrast(1.04); /* @kind other */ /* make the photo pop */
  /* hero title fill — smooth navy → vivid-blue across the full width */
  --ndp-grad-hero-title: linear-gradient(100deg, #0F4C81 0%, #1577E0 100%); /* @kind color */
  /* heading underline accent */
  --ndp-grad-underline:linear-gradient(to right, transparent, #89CFF0 20%, #89CFF0 80%, transparent); /* @kind color */

  /* ---------- Radii ---------- */
  --ndp-radius-sm:  4px;    /* notifications, inputs */
  --ndp-radius-md:  6px;    /* boxes / cards (Bulma default) */
  --ndp-radius-lg:  12px;   /* feature cards, price cards */
  --ndp-radius-pill: 9999px;/* rounded buttons (is-rounded) */

  /* ---------- Shadows ---------- */
  --ndp-shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --ndp-shadow-md: 0 6px 20px rgba(15,76,129,.10);
  --ndp-shadow-lg: 0 14px 40px rgba(15,76,129,.16);
  --ndp-shadow-cta:0 8px 22px rgba(242,97,0,.32);   /* orange CTA lift */
  --ndp-shadow-up: 0 -2px 8px rgba(0,0,0,.20);        /* floating bottom bar */

  /* ---------- Spacing scale (Bulma-aligned, rem) ---------- */
  --ndp-space-1: .25rem;
  --ndp-space-2: .5rem;
  --ndp-space-3: .75rem;
  --ndp-space-4: 1rem;
  --ndp-space-5: 1.5rem;
  --ndp-space-6: 2rem;
  --ndp-space-7: 3rem;
  --ndp-space-8: 4rem;   /* default .section vertical padding */

  /* ---------- Type ---------- */
  --ndp-font-sans: "Noto Sans JP", BlinkMacSystemFont, -apple-system,
                   "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic",
                   Meiryo, Roboto, Helvetica, Arial, sans-serif;

  --ndp-fs-hero:   2.5rem;   /* h1 hero title (Bulma .title is ~2rem; hero lifts) */
  --ndp-fs-h1:     2rem;
  --ndp-fs-h2:     1.75rem;  /* .title.is-3 section headers */
  --ndp-fs-h3:     1.25rem;  /* .title.is-4 sub-headers */
  --ndp-fs-h4:     1.125rem; /* .title.is-5 */
  --ndp-fs-lead:   1.25rem;  /* subtitle / lead */
  --ndp-fs-body:   1rem;     /* 16px base */
  --ndp-fs-sm:     .875rem;
  --ndp-fs-xs:     .75rem;

  --ndp-lh-tight: 1.3; /* @kind font */
  --ndp-lh-body:  1.7; /* @kind font */ /* site body line-height */

  --ndp-fw-regular: 400; /* @kind font */
  --ndp-fw-medium:  500; /* @kind font */
  --ndp-fw-bold:    700; /* @kind font */
  --ndp-fw-black:   900; /* @kind font */
}

/* ============================================================
   Base type — semantic element styles
   ============================================================ */
.ndp-root,
.ndp-type {
  font-family: var(--ndp-font-sans);
  color: var(--ndp-ink);
  line-height: var(--ndp-lh-body);
  font-size: var(--ndp-fs-body);
  -webkit-font-smoothing: antialiased;
}

.ndp-h1 { font-size: var(--ndp-fs-h1); font-weight: var(--ndp-fw-bold); line-height: var(--ndp-lh-tight); color: var(--ndp-ink); letter-spacing: .01em; }
.ndp-h2 { font-size: var(--ndp-fs-h2); font-weight: var(--ndp-fw-bold); line-height: var(--ndp-lh-tight); color: var(--ndp-ink); }
.ndp-h3 { font-size: var(--ndp-fs-h3); font-weight: var(--ndp-fw-bold); color: var(--ndp-navy); }
.ndp-h4 { font-size: var(--ndp-fs-h4); font-weight: var(--ndp-fw-bold); color: var(--ndp-ink); }
.ndp-lead { font-size: var(--ndp-fs-lead); color: var(--ndp-ink-soft); line-height: 1.6; }
.ndp-body { font-size: var(--ndp-fs-body); color: var(--ndp-ink); }
.ndp-small { font-size: var(--ndp-fs-sm); color: var(--ndp-grey); }
.ndp-caption { font-size: var(--ndp-fs-xs); color: var(--ndp-grey); }
.ndp-link { color: var(--ndp-navy); text-decoration: none; }
.ndp-link:hover { color: var(--ndp-blue); text-decoration: underline; }

/* Centered section header with soft blurred sky underline (site signature) */
.ndp-section-title {
  font-size: var(--ndp-fs-h2);
  font-weight: var(--ndp-fw-bold);
  text-align: center;
  color: var(--ndp-ink);
  position: relative;
  display: inline-block;
  padding-bottom: .6em;
}
.ndp-section-title::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--ndp-grad-underline);
  filter: blur(.5px);
}


/* NDP static hover (React handlers replaced by CSS) */
button{transition:filter .18s ease, background .18s ease;}
button:hover{filter:brightness(1.06);}
a[href]{transition:color .18s ease;}