/* ==========================================================================
   P'COZY — Nội thất Biên Hòa · design tokens (ported from source/template/assets/css/style.css)
   Ported from the signed-off prototype. Every value here is a decision
   somebody approved: change one only with the client, never to tidy up.

   Design idea
   -----------
   P'COZY measures a room, draws it, then builds the furniture in its own
   workshop. The site is built around the *materials* that come out of that
   workshop — oak, walnut, linen, bouclé, leather, stone — photographed close
   and warm, and around one long scroll story where a line drawing turns into
   the finished room. Everything else is quiet: plaster surfaces, walnut dark
   bands, one green for actions, a soft serif for headlines.

   Contrast (WCAG AA, measured):
     ink #1C1714 on page #F6F3EE     16.1:1
     muted #675E55 on page           5.8:1
     green #175A52 on page           7.3:1  · page on green 7.3:1
     oak-deep #8A5E34 on page        5.1:1
     linen #F6F3EE on walnut #2B1F18 13.7:1
     danger #A93226 on page          6.0:1
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
	/* surfaces */
	--mona-page:      #F6F3EE;   /* plaster wall */
	--mona-linen:     #ECE6DC;   /* linen band */
	--mona-linen-2:   #E1D9CC;   /* deeper linen — hairlines on linen, swatch chips */
	--mona-walnut:    #2B1F18;   /* dark band */
	--mona-walnut-2:  #3A2C23;   /* elevated surface on dark */
	--mona-walnut-3:  #4A3A2F;
	/* text */
	--mona-ink:       #1C1714;
	--mona-muted:     #675E55;
	--mona-on-dark:   #F6F3EE;
	--mona-on-dark-2: rgba(246,243,238,.72);
	/* materials as colour */
	--mona-oak:       #C9A175;   /* a surface, not a text colour */
	--mona-oak-soft:  #E3CFB0;
	--mona-oak-deep:  #8A5E34;   /* text-safe wood */
	/* action */
	--mona-green:     #175A52;
	--mona-green-deep:#0F4640;
	--mona-green-soft:#DCE8E3;
	--mona-green-lite:#8FC7BC;   /* links and ticks on dark — 8.6:1 on walnut */
	/* feedback */
	--mona-danger:    #A93226;
	--mona-danger-soft:#F5E1DD;
	--mona-ok:        #2E6B3F;
	--mona-ok-soft:   #DDEBDF;
	/* lines */
	--mona-line:        rgba(28,23,20,.12);
	--mona-line-strong: rgba(28,23,20,.26);
	/* Interactive boundaries need 3:1 (WCAG 1.4.11); --mona-line-strong composites
	   to #BDB9B4 on the page = 1.8:1 and is decorative only. This is #8E8783 = 3.2:1. */
	--mona-line-field:  rgba(28,23,20,.5);
	--mona-line-dark:   rgba(246,243,238,.16);
	/* .55, not .32: an outlined control on walnut measured 2.72:1 at .32, under the
	   3:1 WCAG 1.4.11 asks of a component boundary. */
	--mona-line-dark-2: rgba(246,243,238,.55);

	/* type */
	--mona-display: 'Fraunces', 'Times New Roman', Georgia, serif;
	--mona-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mona-fs-body: 1.0625rem;                      /* 17px */
	--mona-fs-small: .9rem;
	--mona-fs-tiny: .8rem;
	--mona-fs-lead: clamp(1.1rem, 1rem + .4vw, 1.25rem);
	--mona-fs-h4: 1.3rem;
	--mona-fs-h3: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
	--mona-fs-h2: clamp(2rem, 1.35rem + 2.7vw, 3.5rem);
	--mona-fs-h1: clamp(2.6rem, 1.5rem + 4.8vw, 5.6rem);

	/* layout */
	--mona-container: 1360px;
	--mona-container-wide: 1560px;
	--mona-gutter: clamp(20px, 4.5vw, 64px);
	--mona-section: clamp(72px, 9.5vw, 136px);
	--mona-r-img: clamp(14px, 1.8vw, 24px);
	--mona-r-panel: clamp(20px, 2.6vw, 36px);
	--mona-r-pill: 999px;

	/* motion */
	--mona-ease: cubic-bezier(.22,.61,.36,1);
	--mona-ease-out: cubic-bezier(.16,1,.3,1);
	--mona-dur: .5s;

	--mona-hdr-h: 84px;
	/* Desktop nav breakpoint. main.js reads this value; keep it equal to the
	   @media queries in "--- Header ---". prototype-check compares the two. */
	--mona-nav-bp: 1200px;
}
@media (max-width: 720px){
	:root{ --mona-fs-body: 1rem; --mona-hdr-h: 68px; }
}
/* Very large displays. Below this the page is deliberately capped; from here the
   dead margin either side of a 1232px column is over 600px, so the whole system
   steps up one size rather than the text staying phone-sized on a 4K panel.
   Every clamp() that had already reached its ceiling is re-ceilinged here. */
@media (min-width: 2200px){
	:root{
		--mona-container: 1680px;
		--mona-container-wide: 1900px;
		--mona-gutter: 80px;
		--mona-hdr-h: 96px;
		--mona-fs-body: 1.15rem;
		--mona-fs-lead: 1.4rem;
		--mona-fs-h1: 6.4rem;
		--mona-fs-h2: 4rem;
		--mona-fs-h3: 2.2rem;
		--mona-section: 160px;
	}
}