/*
 * JAVAN DESIGN SYSTEM
 *
 * Every color, font size and spacing value on the site comes from this file.
 * Component styles never write a hex code or a pixel font size of their own.
 * Open /style-guide/ on the site to see every value below rendered, with its contrast ratio.
 *
 * THE RULES
 *
 *   1. Three surfaces. Text sits on cream, on dark, or on gold. Nothing else.
 *   2. One ink per surface. On cream text is --ink; secondary sentences of 15px or more may
 *      use --ink-soft. On dark everything is --paper. On gold everything is --ink.
 *      Hierarchy comes from size, weight and case, not from faint color.
 *   3. Gold is decoration. Gold fills buttons and draws rules, borders and icons.
 *      Gold is never a text color on cream (1.8:1). On dark, labels may use --gold-light.
 *   4. Links on cream are --link, underlined. That is the only second text color on cream.
 *   5. Nothing smaller than 13px, and 13px is only for bold uppercase labels.
 *      Sentences are 15px or larger. Body copy is 17px.
 *   6. Every text pair reaches at least 7:1. The one exception is white text on gold buttons
 *      (2.4:1), kept white by decision; button text is 14px and nothing smaller.
 *
 * THE PAIRS (measured)
 *
 *   --ink       on --cream   9.5 : 1       --paper      on --dark   9.5 : 1
 *   --ink-soft  on --cream   7.2 : 1       --gold-light on --dark   7.5 : 1
 *   --link      on --cream   7.2 : 1       --gold       on --dark   5.2 : 1  (icons and rules only)
 *                                          --on-gold    on --gold   2.4 : 1  (buttons, by decision)
 */

:root {

	/* ---- Brand palette (the raw colors from the brand kit) ---- */
	--cream: #E4E0CD;
	--cream-soft: #EBE6D2;
	--cream-warm: #EFEAD7;
	--gold: #C6A15B;
	--gold-bright: #E8CB3D;
	--olive: #705400;
	--taupe: #6F5A4A;

	/* ---- Surfaces ---- */
	--surface: var(--cream);          /* page background */
	--surface-soft: var(--cream-soft);
	--surface-warm: var(--cream-warm);
	--surface-card: #FBF9F3;          /* cards and panels that sit on the cream (booking, My Javan): ink 11:1 */
	--dark: #3D3128;                  /* dark sections, mobile menu, floating button */
	--gold-surface: var(--gold);      /* gold buttons */

	/* ---- Text on cream ---- */
	--ink: #3D3128;                   /* text on cream, 9.5:1 (the brand's dark brown) */
	--ink-soft: #524237;              /* secondary sentences on cream, 15px or more, 7.2:1 */
	--link: #584210;                  /* inline links on cream, 7.2:1, always underlined */

	/* ---- Text on dark ---- */
	--paper: #E4E0CD;                 /* all text on dark, 9.5:1 */
	--gold-light: #E0C48A;            /* labels on dark, 7.5:1 */

	/* ---- Text on gold ---- */
	--on-gold: #FFFFFF;               /* white, as on the old site. 2.4:1 on gold: his call, Nov 6 2026 */

	/* ---- Decoration (never text) ---- */
	--rule: rgba(61, 49, 40, .22);           /* lines on cream */
	--rule-on-dark: rgba(228, 224, 205, .25); /* lines on dark */
	--rule-strong: var(--ink);
	--shadow: 0 20px 60px rgba(61, 49, 40, .14);
	--shadow-card: 0 1px 2px rgba(61, 49, 40, .06), 0 10px 28px rgba(61, 49, 40, .07); /* cards resting on the page */
	--scrim: rgba(61, 49, 40, .78);          /* behind pop-ups */

	/* ---- Type families ---- */
	--serif: 'Cormorant Garamond', 'Times New Roman', serif;   /* headings */
	--sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;  /* sentences */
	--ui: 'Glacial Indifference', 'Helvetica Neue', Arial, sans-serif; /* labels, buttons, menus */

	/* ---- Type scale (px). Nothing on the site is smaller than --fs-label. ---- */
	--fs-label: 13px;                 /* uppercase labels: bold, tracked */
	--fs-button: 14px;  
	--fs-tabs:12pt;              /* buttons and menu links: bold, uppercase, tracked */
	--fs-small: 15px;                 /* captions, addresses, dates, footer lines */
	--fs-services-small: 12pt; 
	--fs-body: 17px;                  /* body copy */
	--fs-lead: 20px;                  /* intro paragraphs */
	--fs-h4: 22px;
	--fs-h3: 28px;
	--fs-h2: clamp(30px, 3.2vw, 42px);
	--fs-h1: clamp(38px, 5vw, 60px);

	/* ---- Label styling ---- */
	--label-weight: 700;              /* 13px labels: bold so they stay readable at the smallest size */
	--menu-weight: 400;               /* menu links and buttons at 14px: regular */
	--label-tracking: .14em;
	--eyebrow-tracking: .28em;        /* eyebrows above headings are tracked wider */

	/* ---- Line heights ---- */
	--lh-tight: 1.1;                  /* headings */
	--lh-label: 1.3;
	--lh-text: 1.65;

	/* ---- Corners ---- */
	--radius-photo: 14px;             /* rounded corners on location and portrait photos */
	--radius-card: 12px;              /* cards and panels in the booking and My Javan */

	/* ---- Layout ---- */
	--max-w: 1440px;
	--gutter: clamp(20px, 4vw, 64px);
	--section-pad: clamp(56px, 7vw, 110px);

	/* ---- Old names from the first build. They map onto the system; do not add new ones. ---- */
	--text: var(--ink);
	--text-muted: var(--ink-soft);
	--text-on-dark: var(--paper);
	--on-dark: var(--paper);
	--on-dark-muted: var(--paper);
	--accent-on-dark: var(--gold-light);
	--accent-text: var(--link);
	--brown: var(--taupe);
	--brown-deep: var(--taupe);
	--brown-darkest: var(--dark);
	--gold-deep: var(--gold);
	--line: var(--rule);
	--line-on-dark: var(--rule-on-dark);
}