/**
 * tokens.css — CSS Custom Properties (Design Tokens)
 *
 * Single source of truth untuk:
 *   - Color palette (Brand: Trust & Energy — Navy + Orange)
 *   - Typography scale
 *   - Spacing & layout
 *   - Border radius & shadow
 *   - Animation timing
 *
 * Pakai via var(--token-name) di home.css dan stylesheet lainnya.
 * JANGAN ubah token di sini tanpa update brand spec di wireframe.md.
 */

:root {

	/* ============================================== */
	/*  COLOR — Primary (Navy: trust, profesional)    */
	/* ============================================== */
	--fo-color-primary:        #0F2C59;
	--fo-color-primary-hover:  #0A1F3F;
	--fo-color-primary-light:  #1B4F8A;
	--fo-color-primary-50:     #EFF4FB;  /* very light navy bg */

	/* ============================================== */
	/*  COLOR — Accent (Orange: energy, CTA)          */
	/* ============================================== */
	--fo-color-accent:         #FF6B1A;
	--fo-color-accent-hover:   #E55A0F;
	--fo-color-accent-light:   #FFEEDD;  /* untuk badge tipis */

	/* ============================================== */
	/*  COLOR — Semantic                              */
	/* ============================================== */
	--fo-color-success:        #10B981;  /* badge "Tersedia", check */
	--fo-color-warning:        #F59E0B;  /* badge "Terbatas" */
	--fo-color-danger:         #EF4444;  /* error, hot deal */
	--fo-color-wa:             #25D366;  /* WhatsApp green */

	/* ============================================== */
	/*  COLOR — Neutral (Background & Text)           */
	/* ============================================== */
	--fo-color-bg:             #FFFFFF;  /* main background — DOMINAN */
	--fo-color-bg-section:     #F8FAFC;  /* section variasi (slate-50) */
	--fo-color-bg-dark:        #0F2C59;  /* footer/CTA akhir = navy */

	--fo-color-text:           #1F2937;  /* body text (gray-800) */
	--fo-color-text-strong:    #111827;  /* heading dark (gray-900) */
	--fo-color-text-muted:     #6B7280;  /* secondary (gray-500) */
	--fo-color-text-subtle:    #9CA3AF;  /* placeholder (gray-400) */
	--fo-color-text-inverse:   #FFFFFF;  /* di atas bg dark */

	--fo-color-border:         #E5E7EB;  /* border halus (gray-200) */
	--fo-color-border-strong:  #D1D5DB;  /* border kuat (gray-300) */

	/* ============================================== */
	/*  TYPOGRAPHY                                    */
	/* ============================================== */
	--fo-font-heading: 'Inter', 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--fo-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont,
		'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Font size scale — mobile-first; lihat .fo-* responsive di home.css */
	--fo-text-xs:    0.75rem;     /*  12px */
	--fo-text-sm:    0.875rem;    /*  14px */
	--fo-text-base:  1rem;        /*  16px */
	--fo-text-lg:    1.125rem;    /*  18px */
	--fo-text-xl:    1.25rem;     /*  20px */
	--fo-text-2xl:   1.5rem;      /*  24px */
	--fo-text-3xl:   1.875rem;    /*  30px */
	--fo-text-4xl:   2.25rem;     /*  36px */
	--fo-text-5xl:   2.75rem;     /*  44px — hero H1 desktop */

	/* Font weight */
	--fo-fw-regular:   400;
	--fo-fw-medium:    500;
	--fo-fw-semibold:  600;
	--fo-fw-bold:      700;
	--fo-fw-extrabold: 800;

	/* Line height */
	--fo-lh-tight:    1.2;   /* heading */
	--fo-lh-snug:     1.4;
	--fo-lh-normal:   1.6;   /* body */
	--fo-lh-loose:    1.75;

	/* ============================================== */
	/*  SPACING (px scale via rem)                    */
	/* ============================================== */
	--fo-space-1:   0.25rem;   /*  4px */
	--fo-space-2:   0.5rem;    /*  8px */
	--fo-space-3:   0.75rem;   /* 12px */
	--fo-space-4:   1rem;      /* 16px */
	--fo-space-5:   1.25rem;   /* 20px */
	--fo-space-6:   1.5rem;    /* 24px */
	--fo-space-8:   2rem;      /* 32px */
	--fo-space-10:  2.5rem;    /* 40px */
	--fo-space-12:  3rem;      /* 48px */
	--fo-space-16:  4rem;      /* 64px */
	--fo-space-20:  5rem;      /* 80px */
	--fo-space-24:  6rem;      /* 96px */

	/* Section vertical padding */
	--fo-section-py:         var(--fo-space-12);  /* mobile */
	--fo-section-py-desktop: var(--fo-space-20);  /* desktop */

	/* ============================================== */
	/*  LAYOUT                                        */
	/* ============================================== */
	--fo-container-max:           1280px;   /* lebih lebar untuk feel fullwidth */
	--fo-container-narrow:        800px;    /* untuk FAQ, blog content */
	--fo-container-padding:       var(--fo-space-4);  /* mobile */
	--fo-container-padding-lg:    var(--fo-space-8);  /* desktop */

	/* Grid gap */
	--fo-grid-gap:                var(--fo-space-6);
	--fo-grid-gap-lg:             var(--fo-space-8);

	/* ============================================== */
	/*  BORDER RADIUS                                 */
	/* ============================================== */
	--fo-radius-sm:    6px;      /* badge, input */
	--fo-radius-md:    12px;     /* card */
	--fo-radius-lg:    16px;     /* hero CTA, modal */
	--fo-radius-xl:    24px;     /* large hero image */
	--fo-radius-full:  9999px;   /* pill button */

	/* ============================================== */
	/*  SHADOW                                        */
	/* ============================================== */
	--fo-shadow-sm:   0 1px 2px rgba(15, 44, 89, 0.05);
	--fo-shadow-md:   0 4px 12px rgba(15, 44, 89, 0.08);
	--fo-shadow-lg:   0 12px 24px rgba(15, 44, 89, 0.12);
	--fo-shadow-xl:   0 20px 40px rgba(15, 44, 89, 0.16);
	--fo-shadow-cta:  0 8px 16px rgba(255, 107, 26, 0.25);  /* orange glow */

	/* ============================================== */
	/*  ANIMATION                                     */
	/* ============================================== */
	--fo-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--fo-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--fo-duration-fast:    150ms;
	--fo-duration-base:    300ms;
	--fo-duration-slow:    500ms;

	/* ============================================== */
	/*  Z-INDEX                                       */
	/* ============================================== */
	--fo-z-sticky:   100;
	--fo-z-overlay:  500;
	--fo-z-modal:    1000;
	--fo-z-toast:    2000;
}

/* ============================================== */
/*  GLOBAL TYPOGRAPHY (apply ke seluruh site,     */
/*  override parent GeneratePress secukupnya)     */
/* ============================================== */

body {
	font-family: var(--fo-font-body);
	color: var(--fo-color-text);
	line-height: var(--fo-lh-normal);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fo-font-heading);
	color: var(--fo-color-text-strong);
	line-height: var(--fo-lh-tight);
}

a {
	color: var(--fo-color-primary);
	transition: color var(--fo-duration-fast) var(--fo-ease-out);
}
a:hover {
	color: var(--fo-color-accent);
}