/* ============================================================
   POZITIV DESIGN SYSTEM — Foundations
   Colors + Typography + Spacing tokens (CSS custom properties)
   Brand: blue #1543AA · red #FF4433 · mint #7FD1B9 · navy #00288F
   Target: Japanese B2B — Vietnam HR (技能実習・特定技能)
   Typeface: Kinto Sans (Adobe Typekit xri1vrp) — JP + Latin
   Source: Elementor global tokens from pozitiv.jp (post-6.css)
   ============================================================ */

/* ---------- Adobe Typekit — Kinto Sans ---------- */
/* Same kit as the old pozitiv.jp WordPress site (xri1vrp).
   Falls back to the system sans-serif stack elsewhere.
   HTML consumer: <link rel="stylesheet" href="https://use.typekit.net/xri1vrp.css"> */
@import url("https://use.typekit.net/xri1vrp.css");

:root {
  /* ============================================================
     COLOR — BRAND
     ============================================================ */
  /* Source: Elementor kit (post-6.css) — pozitiv.jp global tokens
     --e-global-color-primary:   #1543AA  (blue — buttons, CTAs, links)
     --e-global-color-secondary: #FF4433  (red — logo swoosh / emphasis)
     --e-global-color-text:      #0A0A0A  (body text)
     --e-global-color-accent:    #7FD1B9  (mint accent)
     Extras: #00288F (deep navy) · #ECF2FD / #C2D4FF (light blue surfaces)
     Logo: blue wordmark "POZiTiV" + red swoosh */
  --brand-blue:   #1543AA;  /* primary — site CTA / button color (Elementor primary) */
  --brand-red:    #FF4433;  /* secondary — logo swoosh / emphasis (Elementor secondary) */
  --brand-accent: #7FD1B9;  /* mint accent (Elementor accent) */
  --brand-navy:   #00288F;  /* deep navy — headings / dark bands */
  --brand-green:  #7FD1B9;  /* alias kept for shared components */
  --brand-dark:   #474747;  /* muted dark gray (Elementor f185a61) */

  /* Blue ramp (base = #1543AA — Elementor primary) */
  --blue-50:   #ECF2FD;  /* Elementor b85493e */
  --blue-100:  #C2D4FF;  /* Elementor 0ce7db5 */
  --blue-200:  #94B2F2;
  --blue-300:  #6489DB;
  --blue-400:  #3B63C4;
  --blue-500:  #1543AA;  /* base — site primary */
  --blue-600:  #103693;
  --blue-700:  #0C2A77;
  --blue-800:  #081E5A;
  --blue-900:  #05143E;

  /* Green/mint ramp (base = #7FD1B9 — Elementor accent) */
  --green-50:    #EFF9F5;
  --green-100:   #D5F0E6;
  --green-200:   #ACE2CF;
  --green-300:   #8FD8C0;
  --green-400:   #7FD1B9;  /* base — Elementor accent */
  --green-500:   #5FBBA0;
  --green-600:   #449B82;
  --green-700:   #327763;
  --green-800:   #235446;
  --green-900:   #15332B;

  /* Navy ramp (base = #00288F — deep navy) */
  --navy-50:    #E9EDF9;
  --navy-100:   #C3CDEE;
  --navy-200:   #8B9DDC;
  --navy-300:   #5470C9;
  --navy-400:   #2647AC;
  --navy-500:   #00288F;  /* base */
  --navy-600:   #002177;
  --navy-700:   #001A5E;
  --navy-800:   #001344;
  --navy-900:   #000C2B;

  /* Red ramp (base = #FF4433 — Elementor secondary) */
  --red-50:    #FFEFED;
  --red-100:   #FFD1CC;
  --red-200:   #FFA399;
  --red-300:   #FF7566;
  --red-400:   #FF5544;
  --red-500:   #FF4433;  /* base */
  --red-600:   #E02D1D;
  --red-700:   #B32316;
  --red-800:   #861A10;
  --red-900:   #59110B;

  /* ============================================================
     COLOR — NEUTRAL (cool gray with slight blue cast)
     ============================================================ */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FCFDFE;
  --neutral-50:  #F6F8FB;
  --neutral-100: #EDF0F5;
  --neutral-200: #DCE1E9;
  --neutral-300: #C0C8D4;
  --neutral-400: #97A2B3;
  --neutral-500: #6B7789;
  --neutral-600: #4E586A;
  --neutral-700: #363F4E;
  --neutral-800: #202632;
  --neutral-900: #10141C;
  --neutral-950: #070A0F;

  /* ============================================================
     COLOR — SEMANTIC
     ============================================================ */
  --success:        #1B7C4F;
  --success-bg:     #EBF5F0;
  --success-border: #93CCB1;
  --warning:        #D97B0A;
  --warning-bg:     #FEF5E7;
  --warning-border: #F5CC7A;
  --error:          #CC2E2E;
  --error-bg:       #FDEAEA;
  --error-border:   #F0AAAA;
  --info:           #1E5FAD;
  --info-bg:        #E8F0FB;
  --info-border:    #96B8E8;

  /* ============================================================
     COLOR — TEXT
     ============================================================ */
  --text-primary:   #0A0A0A;  /* Elementor --e-global-color-text */
  --text-secondary: #4E586A;  /* ~7.5:1 on white — AA */
  --text-tertiary:  #5F6B7E;  /* ≥4.5:1 on white — AA */
  --text-disabled:  #AEB7C4;
  --text-inverse:   #FFFFFF;
  --text-brand:     #1543AA;  /* blue-500 — 8.9:1 on white */
  --text-link:      #1543AA;
  --text-error:     #A82222;
  --text-success:   #156640;

  /* ============================================================
     COLOR — SURFACE / BORDER
     ============================================================ */
  --surface-page:    #F6F8FB;
  --surface-card:    #FFFFFF;
  --surface-sunken:  #ECF2FD;  /* brand light blue */
  --surface-dark:    #00288F;  /* deep navy band */
  --surface-brand:   #1543AA;
  --surface-overlay: rgba(8, 14, 32, 0.55);
  --border-subtle:   #EDF0F5;
  --border-default:  #DCE1E9;
  --border-strong:   #C0C8D4;
  --border-focus:    #1543AA;
  --border-brand:    #1543AA;

  /* ============================================================
     TYPOGRAPHY — family tokens
     ============================================================ */
  /* kinto-sans = Adobe Typekit (kit xri1vrp) — covers JP + Latin */
  --font-primary: "kinto-sans", "Noto Sans JP", system-ui, sans-serif;
  --font-jp:      "kinto-sans", "Noto Sans JP", system-ui, sans-serif;
  --font-latin:   "kinto-sans", "Noto Sans JP", system-ui, sans-serif;
  --font-display: "kinto-sans", "Noto Sans JP", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;

  /* Type scale (1.25 major-third) */
  --fs-display:  52px;
  --fs-h1:       40px;
  --fs-h2:       32px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-title:    18px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  14px;  /* JP standard: never below 14px for readable text */
  --fs-overline: 12px;  /* Latin uppercase labels only */

  /* JP-optimized size adjustments (slightly larger for readability) */
  --fs-body-jp:     17px;
  --fs-body-sm-jp:  15px;

  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;   /* recommended for JP body text */
  --lh-loose:   1.9;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-body:     0.02em;  /* CJK body — slight tracking */
  --ls-wide:     0.04em;
  --ls-overline: 0.14em;

  /* ============================================================
     RADIUS
     ============================================================ */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ============================================================
     SPACING SCALE (4px base)
     ============================================================ */
  --space-0:  0;
  --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;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;

  /* ============================================================
     SHADOW / ELEVATION
     ============================================================ */
  --shadow-xs:     0 1px 2px rgba(8, 14, 32, 0.06);
  --shadow-sm:     0 1px 4px rgba(8, 14, 32, 0.08), 0 1px 2px rgba(8, 14, 32, 0.05);
  --shadow-md:     0 4px 12px rgba(8, 14, 32, 0.08), 0 2px 4px rgba(8, 14, 32, 0.05);
  --shadow-lg:     0 12px 28px rgba(8, 14, 32, 0.10), 0 4px 8px rgba(8, 14, 32, 0.06);
  --shadow-xl:     0 24px 48px rgba(8, 14, 32, 0.14), 0 8px 16px rgba(8, 14, 32, 0.07);
  --shadow-brand:  0 8px 24px rgba(21, 67, 170, 0.35);
  --shadow-focus:  0 0 0 3px rgba(21, 67, 170, 0.32);

  /* ============================================================
     TRANSITION
     ============================================================ */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --duration-slower: 450ms;

  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-modal:   300;
  --z-toast:   400;
  --z-tooltip: 500;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.ds-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

.ds-h3 {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.ds-h4 {
  font-family: var(--font-jp);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.ds-title {
  font-family: var(--font-jp);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.ds-body-jp {
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-jp);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.ds-body-lg {
  font-family: var(--font-latin);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.ds-body {
  font-family: var(--font-latin);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

.ds-body-sm {
  font-family: var(--font-latin);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

.ds-caption {
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--text-tertiary);
}

.ds-overline {
  font-family: var(--font-latin);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-brand);
}

* { font-feature-settings: "kern" 1, "palt" 1; }