/* =====================================================================
   DS SYSTEM — design tokens
   The single source of truth for color, type, spacing, radius, shadow.
   Reused across the marketing site and (later) the SaaS product UIs.
   ===================================================================== */
:root {
  /* ---- Brand: blue ---- */
  --c-primary-50:  #EAF1FD;
  --c-primary-100: #D2E2FB;
  --c-primary-200: #A9C6F6;
  --c-primary-300: #79A4EF;
  --c-primary-400: #4C81E6;
  --c-primary-500: #1E5FD0;   /* primary */
  --c-primary-600: #1A50B4;
  --c-primary-700: #163F90;
  --c-primary-800: #102E6B;
  --c-primary-900: #0B2A66;   /* deep navy */
  --c-primary: var(--c-primary-500);

  /* ---- Accent: teal ---- */
  --c-accent-400: #2DD4CF;
  --c-accent-500: #0EA5A4;
  --c-accent-600: #0C8B8A;
  --c-accent: var(--c-accent-500);

  /* ---- Neutrals (slate) ---- */
  --c-ink:    #0F172A;   /* headings */
  --c-body:   #334155;   /* body text */
  --c-muted:  #64748B;   /* secondary text */
  --c-line:   #E2E8F0;   /* borders */
  --c-line-2: #EEF2F7;
  --c-bg:     #FFFFFF;
  --c-bg-soft:#F5F8FC;   /* alternating section bg */
  --c-surface:#FFFFFF;

  /* ---- Dark surfaces (hero / cta / footer) ---- */
  --c-dark:   #0B1A3A;
  --c-dark-2: #112A5C;
  --c-on-dark:        #EAF1FD;
  --c-on-dark-muted:  #9DB4DA;

  /* ---- Semantic ---- */
  --c-success: #16A34A;
  --c-warning: #F59E0B;
  --c-error:   #DC2626;
  --c-info:    #0EA5E9;

  /* ---- Typography ---- */
  --font-sans: "Inter", "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
               "Yu Gothic", Meiryo, sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-x: 800;

  --fs-xs:   .75rem;    /* 12 */
  --fs-sm:   .875rem;   /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.375rem;  /* 22 */
  --fs-xl:   1.75rem;   /* 28 */
  --fs-2xl:  2.25rem;   /* 36 */
  --fs-3xl:  3rem;      /* 48 */
  --lh-tight: 1.2;
  --lh: 1.7;

  /* ---- Spacing (4px base) ---- */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;  --sp-8: 3rem;   --sp-10: 4rem;
  --sp-12: 5rem;  --sp-16: 7rem;

  /* ---- Radius ---- */
  --r-sm: 6px; --r: 12px; --r-lg: 18px; --r-pill: 999px;

  /* ---- Shadow ---- */
  --sh-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
  --sh:    0 4px 16px rgba(15,23,42,.08);
  --sh-lg: 0 18px 50px rgba(11,42,102,.14);

  /* ---- Layout ---- */
  --container: 1180px;
  --gutter: 1.25rem;
  --header-h: 66px;
}

/* Per-language CJK font preference (Han glyphs differ JP vs TC) */
body.lang-en      { --font-sans: "Inter", system-ui, -apple-system, sans-serif; }
body.lang-zh-hant { --font-sans: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; }
body.lang-zh-hans { --font-sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }