/* ==========================================================================
   Công Viên Cá Voi — design tokens
   Ported from source/template/assets/css/style.css (the signed-off prototype).
   Do not re-author values here; change the prototype and re-port.
   ========================================================================== */

:root{
	/* Color — named per frontend-design plan */
	--deep-tide:   #0A3A3D;   /* deep ocean teal — dark sections, header, footer */
	--deep-tide-2: #082E30;   /* one step darker — gradients, footer base */
	--lagoon:      #2FD9C4;   /* lagoon cyan — primary accent, links, icons */
	--lagoon-dim:  #1FA593;   /* pressed / darker lagoon for contrast on light */
	--sunset:      #FF6B4D;   /* sunset coral — CTAs, highlights */
	--sunset-dim:  #E5502F;   /* pressed coral */
	/* Accessible pair. --sunset and --lagoon-dim are decorative values and fail
	   WCAG AA the moment they carry small text; these are the versions used
	   wherever the colour sits under paper text or is a meaningful icon on a
	   light background. Measured, not guessed — see docs/seo-geo-spec.md is not
	   the place for this, the ratios are in the comment above each swap below. */
	--sunset-strong: #C93C19; /* coral surface under paper text — 4.95:1 */
	--lagoon-ink:    #137668; /* teal text/icon on sand or paper — 4.64:1 / 5.37:1 */
	--sand:        #F4EBD8;   /* warm sand — light section background */
	--sand-2:      #ECDFC4;   /* deeper sand — dividers on light sections */
	--paper:       #FFFCF6;   /* near-white paper — cards on sand */
	--ink:         #12262A;   /* near-black, teal-tinted — body text */
	--ink-soft:    #3E5257;   /* secondary text on light */
	--paper-soft:  rgba(255,252,246,0.72); /* soft text on dark */
	--line-on-dark: rgba(255,252,246,0.16);
	--line-on-light: rgba(18,38,42,0.12);

	/* Type */
	--f-display: 'Bricolage Grotesque', 'Be Vietnam Pro', system-ui, sans-serif;
	--f-body: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;

	/* Scale */
	--container: 1240px;
	--gutter: clamp(20px, 5vw, 64px);
	--radius-s: 10px;
	--radius-m: 20px;
	--radius-l: 32px;
	--radius-full: 999px;
	--shadow-card: 0 24px 48px -24px rgba(10,58,61,0.28);
	--shadow-pop: 0 16px 32px -12px rgba(255,107,77,0.45);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);

}