/* =====================================================================
   WAIFI — Design Tokens (variables.css)
   ---------------------------------------------------------------------
   Single source of truth for ALL visual values.
   No raw hex/px values may appear in any other CSS file.
   Every component MUST reference tokens defined here.
   Source: branding.md (palette/typography), uiux.md (radius/spacing/
   motion), frontend.md §7 (CSS Variables), §18 (accessibility).
   Load order: this file loads FIRST (see index.html).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. COLOR — PRIMITIVE SCALE
   Brand palette from branding.md §9. Stored as raw reference values;
   components never use these directly — they use semantic tokens (§2).
   --------------------------------------------------------------------- */
:root {
    /* Brand */
    --color-yellow-500: #facc15; /* Brand Yellow — primary CTA bg */
    --color-yellow-600: #eab308; /* Hover: slightly darker (branding.md §15) */
    --color-green-500: #84cc16;  /* Secondary Green — accent/badge bg only */
    --color-green-600: #4d7c0f;  /* Contrast-safe green for TEXT/icon (AA on white) */

    /* Functional accents (semantic colors beyond brand) */
    --color-red-500: #ef4444;    /* Error bg / icon */
    --color-red-600: #dc2626;    /* Error text (AA on white) */
    --color-amber-500: #f59e0b;  /* Warning bg / icon */
    --color-amber-600: #b45309;  /* Warning text (AA on white) */
    --color-blue-500: #3b82f6;   /* Info bg / icon */
    --color-blue-600: #1d4ed8;   /* Info text (AA on white) */

    /* Neutral scale */
    --color-white: #ffffff;
    --color-gray-50: #f9fafb;   /* Section background */
    --color-gray-100: #f3f4f6;  /* Light card background */
    --color-gray-200: #e5e7eb;  /* Borders / dividers */
    --color-gray-300: #d1d5db;  /* Form borders */
    --color-gray-400: #9ca3af;  /* Disabled / placeholder */
    --color-gray-500: #6b7280;  /* Body text (medium gray) — meets AA */
    --color-gray-700: #374151;  /* Headings (dark gray) */
    --color-gray-900: #111827;  /* Footer / dark background */
}

/* ---------------------------------------------------------------------
   2. COLOR — SEMANTIC TOKENS
   Components reference THESE, never the primitives above. This layer
   lets the palette change in one place without touching components.
   --------------------------------------------------------------------- */
:root {
    /* Actions */
    --color-primary: var(--color-yellow-500);
    --color-primary-hover: var(--color-yellow-600);
    --color-secondary: var(--color-green-500);
    --color-secondary-hover: var(--color-green-600);
    --color-secondary-bg: var(--color-green-500); /* soft-tint bg source (was missing) */

    /* Functional */
    --color-success: var(--color-green-600);
    --color-success-bg: var(--color-green-500);
    --color-warning: var(--color-amber-600);
    --color-warning-bg: var(--color-amber-500);
    --color-error: var(--color-red-600);
    --color-error-bg: var(--color-red-500);
    --color-info: var(--color-blue-600);
    --color-info-bg: var(--color-blue-500);

    /* Soft (semi-transparent) backgrounds for badges, icon chips, taglines.
       Solid fallback FIRST (older engines without color-mix), then color-mix
       overrides it on modern engines. Last valid declaration wins. */
    --color-success-soft: #dcfce7;
    --color-success-soft: color-mix(in srgb, var(--color-success-bg) 18%, transparent);
    --color-info-soft: #dbeafe;
    --color-info-soft: color-mix(in srgb, var(--color-info-bg) 18%, transparent);
    --color-warning-soft: #fef3c7;
    --color-warning-soft: color-mix(in srgb, var(--color-warning-bg) 18%, transparent);
    --color-secondary-soft: #eef9d6;
    --color-secondary-soft: color-mix(in srgb, var(--color-secondary-bg) 14%, transparent);

    /* Surfaces */
    --color-bg: var(--color-white);
    --color-bg-alt: var(--color-gray-50);   /* Alternating section */
    --color-surface: var(--color-white);    /* Card */
    --color-surface-alt: var(--color-gray-100);
    --color-footer: var(--color-gray-900);

    /* Text — contrast-safe pairings (review R3) */
    --color-heading: var(--color-gray-700);
    --color-text: var(--color-gray-500);
    --color-text-on-primary: var(--color-gray-700); /* Dark gray on yellow */
    --color-text-on-dark: var(--color-gray-100);    /* Light text on footer */
    --color-muted: var(--color-gray-500);           /* NEVER gray-50/100 as text */

    /* Lines */
    --color-border: var(--color-gray-200);
    --color-border-strong: var(--color-gray-300);

    /* Accessibility */
    --color-focus-ring: var(--color-green-600);
}

/* ---------------------------------------------------------------------
   3. TYPOGRAPHY
   Poppins (heading) + Inter (body), self-hosted subset preferred
   (frontend.md §12). Scale uses clamp() for fluid mobile-first sizing.
   --------------------------------------------------------------------- */
:root {
    --font-heading: "Poppins", "Manrope", system-ui, sans-serif;
    --font-body: "Inter", "Nunito Sans", system-ui, sans-serif;

    /* Weights (branding.md §10, uiux.md §4) */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Fluid size scale — min grows to max across breakpoints */
    --font-size-base: 1rem;        /* 16px root */
    --font-size-body: 1rem;        /* Body */
    --font-size-body-lg: 1.125rem; /* Body Large / lede */
    --font-size-sm: 0.875rem;      /* Small */
    --font-size-caption: 0.75rem;  /* Caption / legal */

    --font-size-h1: clamp(2.25rem, 1.5rem + 3vw, 3.25rem);
    --font-size-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
    --font-size-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --font-size-h4: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);

    /* Line height */
    --line-height-tight: 1.2;   /* Headings */
    --line-height-normal: 1.5;  /* UI */
    --line-height-relaxed: 1.7; /* Body paragraphs */

    /* Letter spacing */
    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0;
}

/* ---------------------------------------------------------------------
   4. SPACING
   4px base unit (matches 4-space indentation philosophy). Section
   vertical rhythm from uiux.md §8 (100–140px).
   --------------------------------------------------------------------- */
:root {
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px — card padding (uiux.md §8) */
    --space-6: 2rem;     /* 32px */
    --space-7: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */
    --space-9: 5rem;     /* 80px */
    --space-10: 6rem;    /* 96px */
    --space-11: 8rem;    /* 128px */
    --space-section: clamp(4.5rem, 1rem + 8vw, 7rem); /* 72–112px (uiux §8) */

    /* Container */
    --container-width: 1200px;
    --container-padding: var(--space-4); /* 24px desktop (frontend.md §8) */
}

/* ---------------------------------------------------------------------
   5. BORDER RADIUS
   uiux.md §5.
   --------------------------------------------------------------------- */
:root {
    --radius-sm: 8px;
    --radius-md: 14px;   /* Input (uiux.md §5) */
    --radius-lg: 16px;   /* Button (uiux.md §5) */
    --radius-xl: 20px;   /* Card (uiux.md §5) */
    --radius-3xl: 24px;  /* Large card / FAQ progressive-disclosure card */
    --radius-full: 999px;/* Badge / pill (uiux.md §5) */
}

/* ---------------------------------------------------------------------
   6. SHADOW — soft, no harsh black (uiux.md §6, branding.md §16)
   --------------------------------------------------------------------- */
:root {
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);        /* Small */
    --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.06);       /* Medium — resting card */
    --shadow-lg: 0 12px 28px rgba(17, 24, 39, 0.10);      /* Large — hover lift */
    --shadow-hover: 0 12px 28px rgba(17, 24, 39, 0.10);   /* Hover (alias of lg) */
    --shadow-floating: 0 8px 24px rgba(17, 24, 39, 0.15); /* Floating WhatsApp btn */
}

/* ---------------------------------------------------------------------
   7. LAYOUT METRICS
   --------------------------------------------------------------------- */
:root {
    --header-height: 72px;            /* Sticky nav height */
    --header-height-scrolled: 64px;   /* When compressed on scroll */
    --scroll-offset: var(--header-height); /* Anchor scroll padding */
}

/* ---------------------------------------------------------------------
   8. TRANSITION & MOTION
   uiux.md §22, §30. Durations 300–500ms; smooth easing; no flashing.
   --------------------------------------------------------------------- */
:root {
    --transition-fast: 150ms ease;       /* Fast — micro interactions */
    --transition-normal: 250ms ease;     /* Normal — default */
    --transition-slow: 400ms ease;       /* Slow — reveal (300–500ms) */
    --transition-base: 250ms ease;       /* Alias of normal */
    --transition-reveal: 400ms ease;     /* Reveal animations (300–500ms) */
    --transition-accordion: 200ms ease;  /* FAQ (uiux.md §17) */

    /* Easing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------------------------------------------------------------------
   9. Z-INDEX — layered scale to prevent magic-number stacking wars
   --------------------------------------------------------------------- */
:root {
    --z-base: 1;
    --z-header: 100;      /* Sticky navbar */
    --z-dropdown: 200;    /* Mobile menu overlay */
    --z-floating: 300;    /* Floating WhatsApp + back-to-top */
    --z-modal: 900;       /* Modal (future) */
    --z-toast: 950;       /* Toast (future) — above modal */
    --z-skip-link: 1000;  /* Skip to content — always on top */
}

/* ---------------------------------------------------------------------
   10. BORDERS
   --------------------------------------------------------------------- */
:root {
    --border-width: 1px;
    --border: var(--border-width) solid var(--color-border);
    --border-strong: var(--border-width) solid var(--color-border-strong);
}

/* ---------------------------------------------------------------------
   10b. TEXTURE — subtle background patterns (uiux.md §11 "pattern halus")
   Dot-grid overlay for depth on alt sections / hero. Semi-transparent via
   the opacity baked into the gradient; applied on ::before pseudo-elements.
   --------------------------------------------------------------------- */
:root {
    /* Dot grid: soft green points on a transparent field.
       Solid fallback first (older engines), color-mix override on modern. */
    --texture-dot: radial-gradient(var(--color-gray-200) 1px, transparent 1px);
    --texture-dot: radial-gradient(color-mix(in srgb, var(--color-secondary) 18%, transparent) 1.5px, transparent 1.5px);
    /* Tile size — 24px grid of dots */
    --texture-dot-size: 24px;

    /* Hero warm gradient (kuning → hijau → putih, uiux.md §11). Valid now that
       --color-secondary-bg is defined. Solid fallback precedes the override. */
    --gradient-hero: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-primary) 16%, var(--color-white)) 0%,
        color-mix(in srgb, var(--color-secondary-bg) 12%, var(--color-white)) 55%,
        var(--color-white) 100%
    );
}

/* ---------------------------------------------------------------------
   11. BREAKPOINTS (reference only — Mobile First uses min-width)
   frontend.md §9, uiux.md §24. NOT imported; documented here as tokens.
   Use in media queries as: @media (min-width: 48rem) etc.
   --------------------------------------------------------------------- */
:root {
    --bp-tablet: 48rem;   /* 768px */
    --bp-laptop: 64rem;   /* 1024px */
    --bp-desktop: 80rem;  /* 1280px */
}

/* ---------------------------------------------------------------------
   12. REDUCED MOTION — honor user preference (review R4, a11y)
   Disables reveal/hover transforms for users who request it.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-normal: 0ms;
        --transition-slow: 0ms;
        --transition-base: 0ms;
        --transition-reveal: 0ms;
        --transition-accordion: 0ms;
    }
}