@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

:root {

    /* Fonts */
    --font-base: 'Nunito Sans', 'Arial', sans-serif;
    --font-base-weight: 400;
    --font-accent: 'Nunito Sans', 'Arial', sans-serif;
    --font-accent-weight: 700;

    --color-red: #98002E;
    --color-slate: #7E8082;
    --color-charcoal: #303C42;
    --color-navy: #003146;
    --color-navy-darker: #001f2b;
    --color-merlot: #4E131E;
    --color-frost: #A9C3CB;
    --color-sky: #009AD9;
    --color-bright-red: #CD1442;

    /* BRAND COLORS (UPDATED) */
    --color-brand-primary: var(--color-red);
    --color-brand-secondary: var(--color-slate);
    --color-brand-accent: var(--color-merlot);
    /* Lee red accent */

    --color-black: var(--color-navy-darker);
    /* bukan pure black */
    --color-white: #ffffff;

    --color-gray-dark: #2f3e46;
    --color-gray-light: #d9e1e5;

    /* BODY */
    --body-bg: var(--color-black);
    --body-text: #ffffff;
    --body-hr: var(--color-brand-primary);

    /* GRADIENT (IMPORTANT - match section pages) */
    --left-column-gradient-start: rgba(15, 26, 31, 0.9);
    --left-column-gradient-end: rgba(15, 26, 31, 0);

    /* LINKS */
    --link-normal: var(--body-text);
    --link-hover: var(--color-brand-secondary);

    /* BUTTON PRIMARY (TEAL) */
    --button-primary-bg: var(--color-brand-primary);
    --button-primary-text: #ffffff;
    --button-primary-hover-bg: var(--color-brand-secondary);
    --button-primary-hover-text: #ffffff;

    /* BUTTON SECONDARY (LIGHT) */
    --button-secondary-bg: #ffffff;
    --button-secondary-text: var(--color-brand-primary);
    --button-secondary-hover-bg: #e6eef2;
    --button-secondary-hover-text: var(--color-brand-primary);

    /* CTA (USE RED ACCENT) */
    --button-cta-bg: var(--color-brand-accent);
    --button-cta-text: #ffffff;
    --button-cta-hover-bg: #a50d24;
    --button-cta-hover-text: #ffffff;

    /* SWITCHER */
    --switcher-bg: var(--color-black);
    --switcher-item--active-bg: var(--color-brand-primary);

    /* POPUP */
    --popup-bg: rgba(15, 26, 31, 0.85);
    --popup-text: #ffffff;
    --popup-border: #ffffff20;

    /* MENU */
    --menu-bg: var(--color-black);
    --menu-header-bg: var(--color-black);
    --menu-item-active-bg: var(--color-brand-primary);
    --menu-item-hover-bg: var(--color-brand-secondary);
    --menu-item-hover-text: #ffffff;

    /* SLIDE NAV */
    --slide-navigator-item-active: var(--color-brand-primary);
    --slide-navigator-item-hover: var(--color-brand-secondary);

    /* HEADERS */
    --header-project-title-text: #ffffff;
    --header-slide-number-text: var(--color-white);

    /* START PAGE */
    --start-button-bg: rgba(15, 26, 31, 0.7);
    --start-button-hover-bg: var(--color-brand-primary);
    --start-tagline-text: var(--color-white);
    --start-hr: var(--color-brand-secondary);

    /* SITE SUMMARY (KEEP CLEAN LINE STYLE) */
    --site-summary-stroke: var(--color-brand-primary);
    --site-summary-fill: var(--color-brand-primary);
    --site-summary-stroke-width: 1rem;
    --site-summary-stroke-dasharray: 30 40;
    --site-summary-linecap: round;
    /* --site-summary-animation: dashMove 1s linear infinite; */


    /* MAP POI (ADJUST TO MORE MUTED, NOT TOO COLORFUL) */
    --poi-type-recreation: #6c9a8b;
    --poi-type-transit: #3a6f81;
    --poi-type-education: #5c4b8a;
    --poi-type-shopping: #a67c52;
    --poi-type-medical: #4a6fa5;
    --poi-type-arterials: #6b4f3b;
    --poi-type-employers: #3f7f7a;
    --poi-type-logistics: #c9a227;
    --poi-type-petrol: #b04a3a;
    --poi-type-fb: #c05a7a;
    --poi-type-port: #2f6f9f;
    --poi-type-airport: #5aa6c8;

    /* FORM (IMPORTANT: CLEAN WHITE LIKE PDF) */
    --form-bg: #ffffff;
    --form-text: var(--color-black);
    --form-title: var(--color-brand-primary);
    --form-border: var(--color-brand-primary);

    /* PROPERTY DETAILS */
    --property-details-image-background-color: var(--color-brand-primary);

}