/* ============================================================
   HUB SUPPORT DESIGN SYSTEM — Foundations
   Colors + Typography + Spacing tokens (CSS custom properties)
   Brand: orange #F26427 · navy #18206F · green #62A87C
   Target: Japanese B2B consulting × Vietnam market entry
   Typeface: Kinto Sans (Adobe Typekit xri1vrp) — JP + Latin
   Source: Elementor global tokens from hubsupport.jp
   ============================================================ */

/* ---------- Adobe Typekit — Kinto Sans ---------- */
/* Domain-restricted kit: loads only on hubsupport.jp.
   In other environments (staging, Claude Design preview),
   falls back to the system sans-serif stack below.
   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) — hubsupport.jp global tokens
     --e-global-color-primary:   #F26427  (orange — buttons, CTAs, links)
     --e-global-color-secondary: #18206F  (navy)
     --e-global-color-text:      #1F1E1F  (body text)
     --e-global-color-accent:    #62A87C  (green accent)
     Logo gradient: #F1CF29 → #F7941D (wordmark) → #F15A29 */
  --brand-orange:        #F26427;  /* primary — site CTA / button color (Elementor primary) */
  --brand-orange-logo:   #F7941D;  /* logo wordmark "Hub" text (mid-gradient) */
  --brand-orange-deep:   #F15A29;  /* logo gradient end — red-orange */
  --brand-orange-gold:   #F1CF29;  /* logo gradient start — yellow-gold */
  --brand-navy:          #18206F;  /* secondary — Elementor secondary */
  --brand-green:         #62A87C;  /* accent green — Elementor accent */
  --brand-dark:          #414042;  /* wordmark "Support" / Elementor f185a61 */

  /* Orange ramp (base = #F26427 — Elementor primary) */
  --orange-50:   #FEF2EB;
  --orange-100:  #FCDAC8;
  --orange-200:  #FAB491;
  --orange-300:  #F78D5A;
  --orange-400:  #F47540;
  --orange-500:  #F26427;  /* base — site primary */
  --orange-600:  #D94F15;
  --orange-700:  #AD3E10;
  --orange-800:  #822F0C;
  --orange-900:  #571F08;

  /* Green ramp (base = #62A87C — Elementor accent) */
  --green-50:    #EEF7F1;
  --green-100:   #CEEBD8;
  --green-200:   #9DD6B1;
  --green-300:   #7DC196;
  --green-400:   #6DB487;
  --green-500:   #62A87C;  /* base — Elementor accent */
  --green-600:   #4D8D65;
  --green-700:   #3A6E4E;
  --green-800:   #285038;
  --green-900:   #183324;

  /* Navy ramp (base = #18206F — Elementor secondary) */
  --navy-50:    #ECEEF8;
  --navy-100:   #C8CCEC;
  --navy-200:   #9199D7;
  --navy-300:   #5A66C3;
  --navy-400:   #3040A8;
  --navy-500:   #18206F;  /* base — Elementor secondary */
  --navy-600:   #131A5C;
  --navy-700:   #0E1349;
  --navy-800:   #090D36;
  --navy-900:   #050823;

  /* ============================================================
     COLOR — NEUTRAL (warm gray with slight orange cast)
     ============================================================ */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FDFCFB;
  --neutral-50:  #F8F6F4;
  --neutral-100: #F0EDE9;
  --neutral-200: #E1DBD6;
  --neutral-300: #C9C0B9;
  --neutral-400: #A8998F;
  --neutral-500: #7D6E65;
  --neutral-600: #5C4F47;
  --neutral-700: #403630;
  --neutral-800: #28201C;
  --neutral-900: #150F0C;
  --neutral-950: #0A0705;

  /* ============================================================
     COLOR — SEMANTIC
     ============================================================ */
  --success:        #1B7C4F;  /* shares brand green */
  --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:   #1F1E1F;  /* Elementor --e-global-color-text */
  --text-secondary: #5C4F47;  /* ~7.5:1 on white — AA */
  --text-tertiary:  #6E625B;  /* darkened for WCAG AA (~4.8:1 on white); was #8C7E77 (~3.8:1, failed AA) */
  --text-disabled:  #B8AEA8;
  --text-inverse:   #FFFFFF;
  --text-brand:     #D94F15;  /* orange-600 — readable on light */
  --text-link:      #1E5FAD;
  --text-error:     #A82222;
  --text-success:   #156640;

  /* ============================================================
     COLOR — SURFACE / BORDER
     ============================================================ */
  --surface-page:    #F8F6F4;
  --surface-card:    #FFFFFF;
  --surface-sunken:  #F0EDE9;
  --surface-dark:    #1F1E1F;
  --surface-brand:   #F26427;
  --surface-overlay: rgba(26, 18, 16, 0.55);
  --border-subtle:   #F0EDE9;
  --border-default:  #E1DBD6;
  --border-strong:   #C9C0B9;
  --border-focus:    #F26427;
  --border-brand:    #F26427;

  /* ============================================================
     TYPOGRAPHY — family tokens
     ============================================================ */
  /* kinto-sans = Adobe Typekit (kit xri1vrp) — covers JP + Latin
     Falls back to Noto Sans JP / Be Vietnam Pro in non-hubsupport.jp envs */
  --font-primary: "kinto-sans", "Noto Sans JP", "Be Vietnam Pro", system-ui, sans-serif;
  --font-jp:      "kinto-sans", "Noto Sans JP", system-ui, sans-serif;
  --font-latin:   "kinto-sans", "Be Vietnam Pro", system-ui, sans-serif;
  --font-display: "kinto-sans", "Be Vietnam Pro", 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 (was 13px) */
  --fs-overline: 12px;  /* Latin uppercase labels only (was 11px) */

  /* 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 — Digital Agency: small/medium JP text needs 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(26, 18, 16, 0.06);
  --shadow-sm:     0 1px 4px rgba(26, 18, 16, 0.08), 0 1px 2px rgba(26, 18, 16, 0.05);
  --shadow-md:     0 4px 12px rgba(26, 18, 16, 0.08), 0 2px 4px rgba(26, 18, 16, 0.05);
  --shadow-lg:     0 12px 28px rgba(26, 18, 16, 0.10), 0 4px 8px rgba(26, 18, 16, 0.06);
  --shadow-xl:     0 24px 48px rgba(26, 18, 16, 0.14), 0 8px 16px rgba(26, 18, 16, 0.07);
  --shadow-orange: 0 8px 24px rgba(242, 100, 39, 0.35);
  --shadow-focus:  0 0 0 3px rgba(242, 100, 39, 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
   ============================================================ */

/* Display — hero headline, large marketing copy (Latin) */
.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);
}

/* H1 */
.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);
}

/* H2 */
.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);
}

/* H3 */
.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);
}

/* H4 */
.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);
}

/* Section title */
.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);
}

/* Body — Japanese-optimized */
.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);
}

/* Body — Latin */
.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; }