@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300..700&display=swap');

:root {
	/* Brand Colors - User Defined */
	--cires-color-primary: #008160; /* Super Turquoise / Corporate Green */
	--cires-color-secondary: #003975; /* Ateneo Blue / Corporate Blue */
	--cires-color-heading: #1A1A1A; /* Not pure black */
	--cires-color-text: #2B2B2B; /* Not pure black */
	--cires-color-cta: #008160; /* Corporate Green */
	--cires-color-accent: #003975; /* Corporate Blue */
	--cires-color-accent-gold: #e6ddc3; /* Secondary beige */
	--cires-color-accent-gold-dark: #d6ccad;
	--cires-color-accent-gold-900: #8c8266;
	--cires-color-bg-header: #F7FAFE; /* Soft blue-white tint for elegance */
	--cires-color-announcement: #F5EAD8; /* Warm elegant beige */
	--cires-color-border-footer: #9CB4CC;

	/* Blue palette (Ateneo Blue scale) */
	--cires-blue-0: #e6ecf1;
	--cires-blue-1: #ccdae3;
	--cires-blue-2: #99b5c7;
	--cires-blue-3: #6690ab;
	--cires-blue-4: #336a8f;
	--cires-blue-5: #004573;
	--cires-blue-6: #003e68;
	--cires-blue-7: #003975; /* Corporate Blue */
	--cires-blue-8: #002e5e;
	--cires-blue-9: #002246;

	/* Turquoise palette (Corporate Green scale) */
	--cires-turquoise-0: #e6f2ef;
	--cires-turquoise-1: #cce6df;
	--cires-turquoise-2: #99cdbe;
	--cires-turquoise-3: #66b49d;
	--cires-turquoise-4: #339a7d;
	--cires-turquoise-5: #008160; /* Corporate Green */
	--cires-turquoise-6: #007456;
	--cires-turquoise-7: #00674d;
	--cires-turquoise-8: #005a43;
	--cires-turquoise-9: #004d3a;

	/* Neutrals - exact from reference */
	--cires-neutral-50: #F2F4F8;
	--cires-neutral-100: #CDD6D3;
	--cires-neutral-200: #EAECF1;
	--cires-neutral-300: #DBDEE2;
	--cires-neutral-400: #B8BBBF;
	--cires-neutral-450: #F7FAFE;
	--cires-neutral-500: #999b9f;
	--cires-neutral-600: #707276;
	--cires-neutral-700: #5C5F62;
	--cires-neutral-800: #3E4043;
	--cires-neutral-900: #1D1F22;
	--cires-white: #ffffff;

	/* Typography - Corporate Luxury Vibe */
	--cires-font-body: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--cires-font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--cires-font-alt: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;

	--cires-text-xs: 0.75rem; /* 12px - for minimal disclaimers */
	--cires-text-sm: 0.875rem; /* 14px - exactly 2px smaller than 16px base, secondary text */
	--cires-text-base: 1rem; /* 16px - standard interaction body and forms */
	--cires-text-md: 1.125rem; /* 18px - text-heavy body paragraphs */
	--cires-text-lg: 1.25rem; /* 20px - large text / excerpts */
	--cires-text-xl: 1.5rem; /* 24px - larger text, subheadings */
	--cires-text-2xl: 2rem; /* 32px - very large text */
	--cires-text-3xl: 2.5rem; /* 40px - hero text */
	--cires-text-4xl: 3.125rem; /* 50px - giant text */

	/* Heading sizes - refined corporate hierarchy with fluid clamp() */
	--cires-h1-size: clamp(1.75rem, 5vw, 3.125rem); /* 28px to 50px */
	--cires-h1-lh: 1.2;
	--cires-h2-size: clamp(1.5rem, 4vw, 2.5rem); /* 24px to 40px */
	--cires-h2-lh: 1.3;
	--cires-h3-size: clamp(1.25rem, 3vw, 1.75rem); /* 20px to 28px */
	--cires-h4-size: clamp(1.125rem, 2.5vw, 1.5rem); /* 18px to 24px */
	--cires-h5-size: clamp(1rem, 2vw, 1.25rem); /* 16px to 20px */
	--cires-heading-weight: 600;

	--cires-leading-tight: 1.25;
	--cires-leading-normal: 1.6;
	--cires-leading-relaxed: 1.8;

	/* Spacing — 4-Point Grid System */
	--cires-space-3xs: 0.125rem; /* 2px */
	--cires-space-xs: 0.25rem;   /* 4px */
	--cires-space-sm: 0.5rem;    /* 8px */
	--cires-space-3md: 0.75rem;  /* 12px (NEW) */
	--cires-space-md: 1rem;      /* 16px */
	--cires-space-5md: 1.25rem;  /* 20px (NEW) */
	--cires-space-lg: 1.5rem;    /* 24px */
	--cires-space-7md: 1.75rem;  /* 28px (NEW) */
	--cires-space-xl: 2rem;      /* 32px */
	--cires-space-2xl: 2.5rem;   /* 40px */
	--cires-space-3xl: 4rem;     /* 64px */
	--cires-space-4xl: 6rem;     /* 96px */
	--cires-space-5xl: 8rem;     /* 128px (NEW) */

	/* Semantic spacing aliases */
	--cires-space-gap-card: var(--cires-space-lg);    /* 24px */
	--cires-space-gap-section: var(--cires-space-3xl); /* 64px */
	--cires-space-pad-card: var(--cires-space-lg);     /* 24px */
	--cires-space-pad-section: var(--cires-space-4xl); /* 96px */
	--cires-space-pad-banner: var(--cires-space-2xl);  /* 40px */

	/* Layout */
	--cires-container: 1200px;
	--cires-container-wide: 1400px;
	--cires-container-narrow: 720px;
	--cires-container-readable: 850px;
	--cires-container-search: 480px;
	--cires-sidebar-width: 320px;
	--cires-section-width-max: 800px;
	--cires-section-width-wide: 680px;
	--cires-section-width-md: 650px;
	--cires-gutter: 1.5rem;

	/* Radius - softened for a modern elegant feel */
	--cires-radius-sm: 0.25rem;
	--cires-radius-md: 0.5rem;
	--cires-radius-lg: 0.75rem;
	--cires-radius-xl: 1rem;
	--cires-radius-full: 9999px;

	/* Shadows - softer elegant shadows */
	--cires-shadow-sm: 0 2px 4px rgba(0, 57, 117, 0.04);
	--cires-shadow-md: 0 4px 16px rgba(0, 57, 117, 0.08);
	--cires-shadow-lg: 0 12px 32px rgba(0, 57, 117, 0.12);
	--cires-shadow-xl: 0 20px 48px rgba(0, 57, 117, 0.15);

	/* Transitions */
	--cires-transition: 0.3s ease;
	--cires-transition-fast: 0.15s ease;

	/* Header - from Mantine AppShell config: 5.5rem */
	--cires-header-height: 5.5rem;

	/* Default Project Theme Fallbacks (Landed) */
	--project-color-primary: var(--cires-color-primary);
	--project-color-secondary: var(--cires-color-secondary);
	--project-color-bg: #ffffff;
	--project-color-card-bg: #ffffff;
	--project-color-accent: var(--cires-color-accent-gold-dark);
	--project-color-text: var(--cires-color-text);
	--project-color-heading: var(--cires-color-heading);
	--project-font-heading: var(--cires-font-heading);
	--project-color-sidebar: var(--cires-neutral-50);
	--project-glow: rgba(0, 129, 96, 0.05);

	/* Image overlays & panels — brand tones, no pure black */
	--cires-overlay-from: rgba(0, 57, 117, 0.15);
	--cires-overlay-mid: rgba(0, 57, 117, 0.35);
	--cires-overlay-to: rgba(0, 34, 70, 0.88);
	--cires-hero-panel-bg: rgba(0, 57, 117, 0.78);
	--cires-badge-overlay-bg: rgba(0, 57, 117, 0.85);
	--cires-gradient-deep: var(--cires-blue-9);
	--cires-hero-text-shadow: 0 1px 3px rgba(0, 34, 70, 0.9), 0 2px 18px rgba(0, 34, 70, 0.55);
}

@media (max-width: 48em) {
	:root {
		--cires-header-height: 4rem;
		--cires-gutter: 1rem;
		--cires-space-3xl: 3rem;    /* 48px on mobile */
		--cires-space-4xl: 4rem;    /* 64px on mobile */
	}
}

/* ── Dynamic Vibe Overrides ── */

/* 1. Landed Township Theme (Warm Eco-suburban, green-beige) */
.project-theme--landed {
	--project-color-primary: var(--cires-turquoise-5); /* Eco Turquoise/Green */
	--project-color-secondary: var(--cires-blue-7); /* Brand Blue */
	--project-color-bg: #fdfbf7; /* Warm light beige background */
	--project-color-card-bg: #ffffff;
	--project-color-accent: #d4af37; /* Warm Gold */
	--project-color-text: #333333;
	--project-color-heading: #113020; /* Forest Green Heading */
	--project-color-sidebar: #f7f5ef;
	--project-glow: rgba(0, 129, 96, 0.1);
	--cires-overlay-from: rgba(0, 129, 96, 0.15);
	--cires-overlay-mid: rgba(0, 103, 77, 0.35);
	--cires-overlay-to: rgba(17, 48, 32, 0.88);
	--cires-hero-panel-bg: rgba(0, 103, 77, 0.78);
	--cires-gradient-deep: var(--cires-turquoise-9);
	--cires-hero-text-shadow: 0 1px 3px rgba(17, 48, 32, 0.9), 0 2px 18px rgba(17, 48, 32, 0.55);
}

/* 2. High-Rise Apartment Theme (Cosmopolitan Gold & Slate Luxury - see citraplazanagoya.com) */
.project-theme--highrise {
	--project-color-primary: #c5a880; /* Champagne Gold / Warm Metallic */
	--project-color-secondary: #243b5c; /* Deep slate blue */
	--project-color-bg: #1a2d4a; /* Navy slate background */
	--project-color-card-bg: #243b5c; /* Slate card */
	--project-color-accent: #d4af37; /* Glowing Gold */
	--project-color-text: #e1e3e6; /* Soft White */
	--project-color-heading: #ffffff;
	--project-color-sidebar: #1e3558;
	--project-glow: rgba(197, 168, 128, 0.2);
	--cires-overlay-from: rgba(36, 59, 92, 0.25);
	--cires-overlay-mid: rgba(36, 59, 92, 0.45);
	--cires-overlay-to: rgba(26, 45, 74, 0.92);
	--cires-hero-panel-bg: rgba(36, 59, 92, 0.82);
	--cires-gradient-deep: #1a2d4a;
	--cires-hero-text-shadow: 0 1px 3px rgba(26, 45, 74, 0.95), 0 2px 18px rgba(26, 45, 74, 0.6);
}

/* 3. Grade-A Office Tower Theme (Executive Cool Slate - see citratower.com) */
.project-theme--office {
	--project-color-primary: var(--cires-blue-7); /* Brand Corporate Blue */
	--project-color-secondary: #002246; /* Navy blue */
	--project-color-bg: #f8fafc; /* Crisp Cool light grey/blue background */
	--project-color-card-bg: #ffffff;
	--project-color-accent: #475569; /* Slate grey */
	--project-color-text: #334155; /* Slate dark text */
	--project-color-heading: #0f172a; /* Deep Slate corporate heading */
	--project-color-sidebar: #f1f5f9;
	--project-glow: rgba(0, 57, 117, 0.1);
	--cires-overlay-from: rgba(0, 57, 117, 0.12);
	--cires-overlay-mid: rgba(0, 57, 117, 0.3);
	--cires-overlay-to: rgba(0, 34, 70, 0.9);
	--cires-hero-panel-bg: rgba(0, 57, 117, 0.78);
	--cires-gradient-deep: var(--cires-blue-9);
	--cires-hero-text-shadow: 0 1px 3px rgba(0, 34, 70, 0.9), 0 2px 18px rgba(0, 34, 70, 0.55);
}