/* ============================================================
   福翔 Design System — Color tokens
   Palette (from the corporate-site reference):
   Navy (primary) + warm Gold/tan (accent) + Sage green (community/education)
   + Sky blue (drone brand). White / light blue-grey / cream surfaces.
   ============================================================ */

:root {
  /* ---- Brand: base palette (design.md 2026-07 確定版) ---- */
  --color-navy: #1B6FB3;        /* Primary スカイブルー — headings, primary buttons, links */
  --color-navy-deep: #0E2A47;   /* Primary Dark ディープブルー — footer, dark bands */
  --color-navy-hover: #15598F;  /* primary button hover */

  --color-sky: #4A93CC;         /* lighter blue accents */
  --color-sky-soft: #DCEBF6;    /* drone-brand card wash, soft chips */
  --color-sky-tint: #F4F8FB;    /* very light blue section bg */

  --color-gold: #C2A368;        /* Accent — photo-studio brand, warm CTAs */
  --color-gold-deep: #A8884B;   /* gold hover / press */
  --color-gold-soft: #F3ECDD;   /* cream card wash, gold chips */
  --color-cream: #F6F0E4;       /* warm section bg */

  --color-green: #6E8E57;       /* Community / education accent */
  --color-green-deep: #5A7647;  /* green hover */
  --color-green-soft: #EBF1E3;  /* education card wash, green chips */

  /* ---- Neutrals ---- */
  --color-white: #FFFFFF;        /* base background */
  --color-bg-sub: #F4F8FB;       /* alternating section bg, card bg (light blue-grey) */
  --color-border: #E2E8EE;       /* rules, card borders, dividers */
  --color-border-strong: #C9D6E2;/* stronger separators, input borders */
  --color-text-main: #1A2A38;    /* body & heading base text (navy-grey) */
  --color-text-sub: #5B6B7A;     /* captions, supporting text (grey) */
  --color-text-faint: #8A98A6;   /* placeholders, disabled text */

  /* ---- Semantic aliases ---- */
  --primary: var(--color-navy);
  --primary-strong: var(--color-navy-deep);
  --accent: var(--color-teal);
  --accent-green: var(--color-green);

  --surface-page: var(--color-white);
  --surface-sub: var(--color-bg-sub);
  --surface-card: var(--color-white);
  --surface-dark: var(--color-navy-deep);
  --surface-sky: var(--color-sky-tint);
  --surface-cream: var(--color-cream);

  --text-heading: var(--color-text-main);
  --text-body: var(--color-text-main);
  --text-muted: var(--color-text-sub);
  --text-on-dark: var(--color-white);
  --text-on-accent: var(--color-white);

  --link: var(--color-navy);
  --link-hover: var(--color-navy-deep);

  --border-default: var(--color-border);
  --border-strong: var(--color-border-strong);
  --divider: var(--color-border);

  --focus-ring: rgba(27, 111, 179, 0.32);

  /* ---- Teal accent (design.md 確定：CTAアクセント) ---- */
  --color-teal: #2DB8B0;
  --color-teal-hover: #249B94;
  --color-teal-soft: #E0F4F3;

  /* ---- Legacy aliases (kept so older components resolve) ---- */
  --color-sky-blue: var(--color-navy);
  --color-sky-blue-hover: var(--color-navy-hover);
  --color-sky-blue-soft: var(--color-sky-soft);
  --color-deep-blue: var(--color-navy-deep);
}
/* ============================================================
   福翔 Design System — Typography tokens
   Gothic (sans-serif). One family per screen. No decorative fonts.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-jp: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-latin: "Montserrat", "Noto Sans JP", system-ui, sans-serif;

  /* Semantic family aliases */
  --font-heading: var(--font-jp);      /* JP headings — Bold/Black */
  --font-body: var(--font-jp);         /* JP body — Regular */
  --font-display: var(--font-latin);   /* Latin display / numerals */

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

  /* ---- Type scale (PC baseline, px) ---- */
  --fs-hero: 52px;     /* H1 / hero 40–56 */
  --fs-h1: 40px;
  --fs-h2: 32px;       /* section heading 28–36 */
  --fs-h3: 22px;       /* sub-heading 20–24 */
  --fs-lead: 19px;     /* lead paragraph */
  --fs-body: 16px;     /* body 16–17 */
  --fs-body-lg: 17px;
  --fs-caption: 13px;  /* caption 13–14 */
  --fs-eyebrow: 13px;  /* eyebrow label */

  /* Big stat number */
  --fs-stat: 64px;

  /* ---- Line heights ---- */
  --lh-tight: 1.25; /* @kind other */ /* headings */
  --lh-snug: 1.45;     /* @kind other */
  --lh-body: 1.8; /* @kind other */ /* JP body — roomy 1.7–1.8 */

  /* ---- Letter spacing ---- */
  --ls-tight: -0.01em;
  --ls-normal: 0; /* @kind other */
  --ls-eyebrow: 0.16em; /* uppercased Latin eyebrows */
  --ls-wide: 0.04em;
}
/* ============================================================
   福翔 Design System — Spacing, layout & radii tokens
   Generous whitespace. 12-col grid. Max content 1140–1200px centered.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Section rhythm ---- */
  --section-y: 96px;        /* vertical padding per section (PC) */
  --section-y-sm: 56px;     /* mobile */

  /* ---- Layout ---- */
  --container-max: 1180px;  /* content max width */
  --container-pad: 24px;    /* gutter */
  --grid-cols: 12; /* @kind other */
  --grid-gap: 24px;

  /* ---- Radii (subtle, 8–12px) ---- */
  --radius-sm: 6px;
  --radius-md: 8px;     /* buttons */
  --radius-lg: 12px;    /* cards */
  --radius-xl: 16px;
  --radius-pill: 999px;
}
/* ============================================================
   福翔 Design System — Effects: shadows, borders, transitions
   Light, soft shadows. Gentle float. No heavy drops.
   ============================================================ */

:root {
  /* ---- Shadows (soft, deep-blue tinted) ---- */
  --shadow-xs: 0 1px 2px rgba(14, 42, 71, 0.06);
  --shadow-sm: 0 2px 8px rgba(14, 42, 71, 0.06);
  --shadow-card: 0 4px 16px rgba(14, 42, 71, 0.08);   /* spec default */
  --shadow-md: 0 8px 24px rgba(14, 42, 71, 0.10);
  --shadow-lg: 0 16px 40px rgba(14, 42, 71, 0.14);

  /* ---- Borders ---- */
  --border-width: 1px; /* @kind other */
  --border-card: 1px solid var(--color-border);
  --border-input: 1px solid var(--color-border-strong);

  /* ---- Focus ---- */
  --focus-shadow: 0 0 0 3px var(--focus-ring);

  /* ---- Motion (calm, trustworthy — fades & soft eases, no bounce) ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-standard); /* @kind other */
}