/**
 * Tree Plast / Brand Guideline — Design Tokens
 * Source: assets/brand/brand-guideline.pdf (April 2026)
 *
 * Primary: Army Green · Onyx · Sand · White · Charcoal
 * Type: Freight Display · Lora · Montserrat
 *
 * Components must consume these variables — do not hardcode brand colors.
 */

:root {
	/* ── Raw palette (Brand Guideline) ── */
	--brand-army-green: #4b7c59;
	--brand-army-green-rgb: 75, 124, 89;
	--brand-onyx: #151515;
	--brand-onyx-rgb: 21, 21, 21;
	--brand-sand: #c9b89a;
	--brand-sand-rgb: 201, 184, 154;
	--brand-white: #ffffff;
	--brand-white-rgb: 255, 255, 255;
	--brand-charcoal: #2c2d2c;
	--brand-charcoal-rgb: 44, 45, 44;

	/* Derived */
	--brand-army-green-light: #5e9a6f;
	--brand-army-green-dark: #3a6146;
	--brand-sand-light: #d9cdb5;
	--brand-sand-dark: #b0a07e;
	--brand-cream: #f7f6f2;
	--brand-cream-rgb: 247, 246, 242;
	--brand-cream-dark: #eceae4;
	--brand-border: #d4d3cd;
	--brand-muted: #6b6b65;

	/* ── Semantic tokens ── */
	--color-primary: var(--brand-army-green);
	--color-primary-hover: var(--brand-army-green-dark);
	--color-primary-light: var(--brand-army-green-light);
	--color-primary-muted: rgba(var(--brand-army-green-rgb), 0.16);

	--color-secondary: var(--brand-sand);
	--color-secondary-hover: var(--brand-sand-dark);
	--color-secondary-light: var(--brand-sand-light);

	--color-accent: var(--brand-sand);
	--color-accent-hover: var(--brand-sand-dark);

	--color-background: var(--brand-cream);
	--color-background-dark: var(--brand-onyx);
	--color-surface: var(--brand-white);
	--color-surface-raised: var(--brand-cream);
	--color-surface-dark: var(--brand-charcoal);
	--color-card: var(--brand-white);
	--color-card-hover: var(--brand-cream-dark);

	--color-border: var(--brand-border);
	--color-border-strong: rgba(var(--brand-onyx-rgb), 0.18);
	--color-border-focus: var(--brand-army-green);

	--color-ink: var(--brand-onyx);
	--color-text-primary: var(--brand-onyx);
	--color-text-secondary: var(--brand-charcoal);
	--color-text-muted: var(--brand-muted);
	--color-text-inverse: var(--brand-white);
	--color-text-on-primary: var(--brand-white);
	--color-text-on-dark: var(--brand-cream);

	--color-fog: var(--brand-cream);
	--color-mist: var(--brand-sand);
	--color-footer-bg: var(--brand-onyx);
	--color-footer-fg: var(--brand-sand-light);

	--color-success: #27ae60;
	--color-warning: #c47d1a;
	--color-danger: #c0392b;
	--color-error: var(--color-danger);

	/* Legacy aliases (style.css / Tailwind) */
	--color-army-green: var(--brand-army-green);
	--color-army-green-light: var(--brand-army-green-light);
	--color-army-green-dark: var(--brand-army-green-dark);
	--color-onyx: var(--brand-onyx);
	--color-sand: var(--brand-sand);
	--color-sand-light: var(--brand-sand-light);
	--color-sand-dark: var(--brand-sand-dark);
	--color-white: var(--brand-white);
	--color-charcoal: var(--brand-charcoal);
	--color-gray-100: var(--brand-cream);
	--color-gray-200: var(--brand-cream-dark);
	--color-gray-300: var(--brand-border);
	--color-gray-400: #a8a8a0;
	--color-gray-500: var(--brand-muted);

	/* ── Typography (Brand Guideline) ── */
	--font-display: "Freight Display", Georgia, "Times New Roman", serif;
	--font-heading: "Freight Display", Georgia, "Times New Roman", serif;
	--font-body: "Lora", Georgia, "Times New Roman", serif;
	--font-ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-arabic: "Rubik", "Montserrat", sans-serif;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-heading: 500;

	/* Type scale */
	--text-display-xl: 3.5rem;
	--text-display-lg: 2.75rem;
	--text-display-md: 2.25rem;
	--text-heading-lg: 1.875rem;
	--text-heading-md: 1.5rem;
	--text-heading-sm: 1.25rem;
	--text-body-lg: 1.125rem;
	--text-body: 1rem;
	--text-body-sm: 0.875rem;
	--text-label: 0.6875rem;
	--text-button: 0.75rem;

	/* Radius / shadow / motion */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-full: 9999px;

	--shadow-sm: 0 1px 2px rgba(21, 21, 21, 0.06);
	--shadow-md: 0 4px 12px rgba(21, 21, 21, 0.08);
	--shadow-lg: 0 8px 24px rgba(21, 21, 21, 0.12);

	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--ease-brand: cubic-bezier(0.12, 0.23, 0.5, 1);

	/*
	 * Glass system — master reference = Our Services (.tk-hero__cta--ghost).
	 * Default / on-dark = light frosted glass over dark hero.
	 * on-light = readable twin for scrolled header over light sections.
	 * Header remaps active --glass-* via .is-invert-light / .is-invert-dark.
	 */
	--glass-bg-on-dark: rgba(var(--brand-white-rgb), 0.12);
	--glass-bg-hover-on-dark: rgba(var(--brand-sand-rgb), 0.22);
	--glass-bg-active-on-dark: rgba(var(--brand-sand-rgb), 0.28);
	--glass-fg-on-dark: var(--color-text-on-dark);
	--glass-fg-muted-on-dark: rgba(var(--brand-cream-rgb), 0.72);
	--glass-border-on-dark: rgba(var(--brand-sand-rgb), 0.45);
	--glass-accent-on-dark: var(--brand-sand);
	--glass-accent-hover-on-dark: var(--brand-sand-light);

	--glass-bg-on-light: rgba(var(--brand-onyx-rgb), 0.08);
	--glass-bg-hover-on-light: rgba(var(--brand-army-green-rgb), 0.16);
	--glass-bg-active-on-light: rgba(var(--brand-army-green-rgb), 0.24);
	--glass-fg-on-light: var(--brand-onyx);
	--glass-fg-muted-on-light: rgba(var(--brand-onyx-rgb), 0.62);
	--glass-border-on-light: rgba(var(--brand-onyx-rgb), 0.22);
	--glass-accent-on-light: var(--brand-army-green);
	--glass-accent-hover-on-light: var(--brand-army-green-dark);

	--glass-bg: var(--glass-bg-on-dark);
	--glass-bg-hover: var(--glass-bg-hover-on-dark);
	--glass-bg-active: var(--glass-bg-active-on-dark);
	--glass-fg: var(--glass-fg-on-dark);
	--glass-fg-muted: var(--glass-fg-muted-on-dark);
	--glass-border: var(--glass-border-on-dark);
	--glass-accent: var(--glass-accent-on-dark);
	--glass-accent-hover: var(--glass-accent-hover-on-dark);
	--glass-blur: 8px;
	--glass-radius: 4px;
	--glass-pad-y: 4px;
	--glass-pad-x: 8px;
	--glass-height: 28px;
	--glass-duration: 0.4s;
	--glass-ease: var(--ease-brand);
	--glass-color-duration: 0.25s;

	/*
	 * Framer token bridges — templates reference these IDs.
	 * Remap to Tree Plast palette without editing every PHP file.
	 */
	--token-298644eb-3fe0-49aa-b8cb-c3344e3ab8d7: var(--brand-onyx); /* was Marby ink */
	--token-4ee3acd3-c018-4be0-998c-2fa74728fc08: var(--brand-cream); /* was Marby fog */
	--token-a57d3b9c-0f65-42ac-b59d-88929fbad5a0: var(--brand-sand); /* was Marby mist */
	--token-cb2982f0-838d-4452-9b5d-5a4f2ff7e5a2: var(--brand-white);

	/*
	 * Marby component bridges (header / hero / pages).
	 * Existing --tk-* vars keep working; values become brand.
	 */
	--tk-hdr-ink: var(--brand-onyx);
	--tk-hdr-ink-soft: var(--brand-onyx);
	--tk-hdr-mute: var(--brand-muted);
	--tk-hdr-mute-soft: var(--brand-sand-dark);
	--tk-hdr-fog: var(--brand-cream);
	--tk-hdr-mist: var(--brand-sand);
	--tk-hdr-white: var(--brand-white);
	--tk-hdr-invert-dark: var(--brand-onyx);
	--tk-hdr-invert-light: var(--brand-cream);
	--tk-hdr-font: var(--font-ui);
	--tk-hdr-btn-radius: var(--radius-sm);

	--tk-hero-ink: var(--brand-onyx);
	--tk-hero-fog: var(--brand-cream);
	--tk-hero-green: var(--brand-army-green);
	--tk-hero-font-display: var(--font-heading);
	--tk-hero-font-ui: var(--font-ui);

	--tk-ft-navy: var(--brand-onyx);
	--tk-ft-fog: var(--brand-cream);
	--tk-ft-mist: var(--brand-sand);
	--tk-ft-ink: var(--brand-onyx);
	--tk-ft-link: var(--brand-sand);
	--tk-ft-font: var(--font-heading);
	--tk-ft-font-btn: var(--font-ui);
}

html[dir="rtl"] {
	--font-display: var(--font-arabic);
	--font-heading: var(--font-arabic);
	--font-body: var(--font-arabic);
	--font-ui: var(--font-arabic);
}