:root {

	/* =========================================================
	   JPNT ePermit Design System V0.4
	   Core Identity:
	   Forest + Institutional Black + Terengganu Gold
	   ========================================================= */


	/* =========================================================
	   01. MAIN BRAND COLOURS
	   ========================================================= */

	--jpnt-primary: #073d27;
	--jpnt-dark: #151515;
	--jpnt-accent: #d9bd22;


	/* =========================================================
	   02. TERENGGANU / STATE BRAND
	   ========================================================= */

	--jpnt-state-black: #111111;
	--jpnt-state-white: #ffffff;

	--jpnt-state-gold: #f3db16;
	--jpnt-state-gold-dark: #c9ad0f;
	--jpnt-state-gold-soft: #fff9d6;


	/* =========================================================
	   03. FOREST COLOUR FAMILY
	   ========================================================= */

	--forest-950: #042a1b;
	--forest-900: #073d27;
	--forest-800: #095031;
	--forest-700: #087342;
	--forest-600: #159052;
	--forest-500: #2a9f60;
	--forest-400: #6fa283;
	--forest-200: #bcd6c7;
	--forest-100: #e4f0e9;
	--forest-50: #f3f8f5;


	/* =========================================================
	   04. LEAF COLOUR FAMILY
	   ========================================================= */

	--leaf-500: #7db64b;
	--leaf-400: #92c165;
	--leaf-300: #a7cd77;
	--leaf-100: #eaf4e2;
	--leaf-50: #f5f9f1;


	/* =========================================================
	   05. TIMBER / WOOD COLOUR FAMILY
	   ========================================================= */

	--timber-900: #3b281d;
	--timber-800: #4e3424;
	--timber-700: #65412a;
	--timber-600: #7a4b2a;
	--timber-500: #996039;
	--timber-400: #b47a50;
	--timber-300: #c99a75;
	--timber-200: #dec0a6;
	--timber-100: #f0e3d7;
	--timber-50: #f8f2ec;


	/* =========================================================
	   06. BARK / EARTH
	   ========================================================= */

	--bark-dark: #382820;
	--bark: #594033;
	--bark-600: #964a25;
	--bark-100: #f4e8e1;

	--earth: #736052;
	--earth-soft: #ede8e3;


	/* =========================================================
	   07. GOLD COLOUR FAMILY
	   ========================================================= */

	--gold-800: #8e7611;
	--gold-700: #a78b16;
	--gold-600: #bea31c;
	--gold-500: #d9bd22;
	--gold-400: #e4cd4d;
	--gold-200: #f2e69b;
	--gold-100: #faf4d0;
	--gold-50: #fdfbf0;


	/* =========================================================
	   08. NEUTRAL / INK FAMILY
	   ========================================================= */

	--ink-950: #151515;
	--ink-900: #20221f;
	--ink-800: #30342f;
	--ink-700: #454a44;
	--ink-600: #5d635d;
	--ink-500: #747a74;
	--ink-400: #969c96;

	--neutral-300: #bec3be;
	--neutral-200: #d8ddd8;
	--neutral-150: #e5e9e5;
	--neutral-100: #eff2ef;
	--neutral-50: #f7f8f6;

	/* =========================================================
	   09. SEMANTIC — SUCCESS
	   ========================================================= */

	--success: #167847;
	--success-hover: #10633a;
	--success-bg: #e8f5ed;
	--success-border: #abd8bd;


	/* =========================================================
	   10. SEMANTIC — WARNING
	   ========================================================= */

	--jpnt-warning: #9a6800;
	--jpnt-warning-strong: #7c5100;
	--jpnt-warning-bg: #fff7d6;
	--jpnt-warning-border: #ead77e;


	/* =========================================================
	   11. SEMANTIC — DANGER / ERROR
	   ========================================================= */

	--danger: #b42318;
	--danger-hover: #931d14;
	--danger-bg: #fdecea;
	--danger-border: #edb1aa;


	/* =========================================================
	   12. SEMANTIC — INFORMATION
	   ========================================================= */

	--jpnt-info: #2466a8;
	--jpnt-info-hover: #1c548b;
	--jpnt-info-bg: #eaf2fb;
	--jpnt-info-border: #b6d1ed;


	/* =========================================================
	   13. SEMANTIC UI ALIASES
	   Use these most often when building components.
	   ========================================================= */

	--jpnt-color-primary: var(--jpnt-primary);
	--jpnt-color-primary-hover: var(--jpnt-forest-950);

	--jpnt-color-secondary: var(--jpnt-timber-600);
	--jpnt-color-secondary-hover: var(--jpnt-timber-800);

	--jpnt-color-dark: var(--jpnt-dark);

	--jpnt-color-accent: var(--jpnt-accent);
	--jpnt-color-accent-hover: var(--jpnt-gold-600);

	--jpnt-heading: var(--jpnt-ink-950);
	--jpnt-text: var(--jpnt-ink-700);
	--jpnt-text-secondary: var(--jpnt-ink-600);
	--jpnt-text-muted: var(--jpnt-ink-500);
	--jpnt-placeholder: var(--jpnt-ink-400);


	/* =========================================================
	   14. SURFACES
	   ========================================================= */

	--jpnt-page-bg: #f5f5f5;

	--jpnt-surface: #ffffff;
	--jpnt-surface-soft: #f3f6f3;

	--jpnt-surface-forest: #f3f8f5;
	--jpnt-surface-timber: #f8f2ec;
	--jpnt-surface-gold: #fdfbf0;

	--jpnt-surface-disabled: #eff2ef;


	/* =========================================================
	   15. BORDERS
	   ========================================================= */

	--border: #d8ddd8;
	--border-strong: #bec3be;

	--border-forest: #bcd6c7;
	--border-timber: #dec0a6;
	--border-gold: #f2e69b;

	--border-focus: var(--jpnt-primary);


	/* =========================================================
	   16. V0.2 CORE GRADIENTS
	   ========================================================= */

	--gradient-primary:
		linear-gradient(
			135deg,
			#073d27 0%,
			#087342 100%
		);

	--gradient-nature:
		linear-gradient(
			135deg,
			#087342 0%,
			#7db64b 100%
		);

	--gradient-state:
		linear-gradient(
			135deg,
			#f3db16 0%,
			#e5bc16 100%
		);

	--gradient-soft:
		linear-gradient(
			135deg,
			#f7faf7 0%,
			#edf5ee 100%
		);

	--gradient-hero-overlay:
		linear-gradient(
			90deg,
			rgba(7, 61, 39, 0.92) 0%,
			rgba(7, 61, 39, 0.68) 45%,
			rgba(7, 61, 39, 0.15) 100%
		);


	/* =========================================================
	   17. FOREST / TIMBER GRADIENTS
	   ========================================================= */

	--gradient-deep-forest:
		linear-gradient(
			135deg,
			#042a1b 0%,
			#073d27 52%,
			#126744 100%
		);

	--gradient-forest-black:
		linear-gradient(
			135deg,
			#073d27 0%,
			#151515 100%
		);

	--gradient-forest-gold:
		linear-gradient(
			135deg,
			#073d27 0%,
			#126744 72%,
			#d9bd22 100%
		);

	--gradient-timber:
		linear-gradient(
			135deg,
			#4e3424 0%,
			#7a4b2a 55%,
			#996039 100%
		);

	--gradient-dark-log:
		linear-gradient(
			135deg,
			#2d2018 0%,
			#4e3424 55%,
			#65412a 100%
		);

	--gradient-light-timber:
		linear-gradient(
			135deg,
			#f8f2ec 0%,
			#f0e3d7 50%,
			#dec0a6 100%
		);

	--gradient-forest-timber:
		linear-gradient(
			135deg,
			#073d27 0%,
			#0a5134 50%,
			#65412a 100%
		);

	--gradient-timber-gold:
		linear-gradient(
			135deg,
			#7a4b2a 0%,
			#a47827 60%,
			#d9bd22 100%
		);

	--gradient-soft-forest:
		linear-gradient(
			135deg,
			#f7f8f6 0%,
			#e4f0e9 100%
		);

	--gradient-soft-timber:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#f0e3d7 100%
		);

	--gradient-soft-gold:
		linear-gradient(
			135deg,
			#ffffff 0%,
			#faf4d0 100%
		);


	/* =========================================================
	   18. BUTTON GRADIENTS
	   ========================================================= */

	--jpnt-btn-gradient-primary:
		linear-gradient(
			135deg,
			#073d27 0%,
			#126744 100%
		);

	--jpnt-btn-gradient-primary-hover:
		linear-gradient(
			135deg,
			#042a1b 0%,
			#073d27 100%
		);


	--jpnt-btn-gradient-accent:
		linear-gradient(
			135deg,
			#e4cd4d 0%,
			#d9bd22 48%,
			#a78b16 100%
		);

	--jpnt-btn-gradient-accent-hover:
		linear-gradient(
			135deg,
			#d9bd22 0%,
			#bea31c 60%,
			#8e7611 100%
		);


	--jpnt-btn-gradient-log:
		linear-gradient(
			135deg,
			#2d2018 0%,
			#4e3424 55%,
			#65412a 100%
		);

	--jpnt-btn-gradient-log-hover:
		linear-gradient(
			135deg,
			#1f1712 0%,
			#382820 55%,
			#4e3424 100%
		);


	--jpnt-btn-gradient-timber-gold:
		linear-gradient(
			135deg,
			#65412a 0%,
			#7a4b2a 42%,
			#d9bd22 100%
		);

	--jpnt-btn-gradient-timber-gold-hover:
		linear-gradient(
			135deg,
			#4e3424 0%,
			#65412a 44%,
			#bea31c 100%
		);

    --btn-gold-hover:
        linear-gradient(
            135deg,
            #D9BD22 0%,
            #BEA31C 60%,
            #8E7611 100%
        );



	/* =========================================================
	   19. BUTTON BASE TOKENS
	   ========================================================= */

	--jpnt-btn-height: 48px;

	--jpnt-btn-padding-x: 19px;
	--jpnt-btn-padding-y: 11px;

	--jpnt-btn-radius: 9px;

	--jpnt-btn-font-size: 0.875rem;
	--jpnt-btn-font-weight: 700;

	--jpnt-btn-text-light: #ffffff;
	--jpnt-btn-text-dark: #151515;

	--jpnt-btn-shadow:
		0 4px 11px rgba(21, 21, 21, 0.08);

	--jpnt-btn-shadow-hover:
		0 9px 22px rgba(21, 21, 21, 0.16);



	/* =========================================================
	   21. FORM CONTROLS
	   ========================================================= */

	--jpnt-input-height: 48px;

	--jpnt-input-bg: #ffffff;
	--jpnt-input-text: var(--jpnt-ink-800);

	--jpnt-input-border: var(--jpnt-neutral-300);
	--jpnt-input-border-hover: var(--jpnt-ink-500);
	--jpnt-input-border-focus: var(--jpnt-primary);

	--jpnt-input-disabled-bg: var(--jpnt-neutral-100);
	--jpnt-input-disabled-text: var(--jpnt-ink-400);

	--jpnt-input-radius: 8px;

	--jpnt-input-padding-x: 14px;
	--jpnt-input-padding-y: 11px;

	--jpnt-form-label: var(--jpnt-ink-800);
	--jpnt-form-caption: var(--jpnt-ink-500);
	--jpnt-form-required: var(--jpnt-danger);

	--jpnt-focus-ring:
		0 0 0 3px rgba(7, 61, 39, 0.14);

	--jpnt-focus-ring-gold:
		0 0 0 3px rgba(217, 189, 34, 0.20);


	/* =========================================================
	   23. TABLES
	   ========================================================= */

	--jpnt-table-bg: #ffffff;

	--jpnt-table-header-bg:
		var(--jpnt-surface-soft);

	--jpnt-table-header-text:
		var(--jpnt-ink-800);

	--jpnt-table-border:
		var(--jpnt-neutral-150);

	--jpnt-table-row-hover:
		var(--jpnt-forest-50);

	--jpnt-table-row-selected:
		var(--jpnt-gold-50);

	--jpnt-table-cell-padding-x: 16px;
	--jpnt-table-cell-padding-y: 14px;


	/* =========================================================
	   24. BORDER RADIUS
	   ========================================================= */

	--radius-xs: 4px;
	--radius-sm: 7px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-xl: 18px;
	--radius-2xl: 24px;
	--radius-pill: 999px;


	/* =========================================================
	   25. SHADOWS
	   ========================================================= */

	--shadow-xs:
		0 1px 2px rgba(21, 21, 21, 0.04);

	--shadow-sm:
		0 4px 14px rgba(21, 21, 21, 0.07);

	--shadow-md:
		0 12px 32px rgba(21, 21, 21, 0.10);

	--shadow-lg:
		0 18px 50px rgba(21, 21, 21, 0.12);


	/* =========================================================
	   26. SPACING SCALE
	   ========================================================= */

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;


	/* =========================================================
	   27. MOTION
	   ========================================================= */

	--jpnt-transition-fast:
		150ms ease;

	--jpnt-transition-base:
		220ms cubic-bezier(0.2, 0.8, 0.2, 1);

	--jpnt-transition-slow:
		320ms ease;