/* ==========================================================================
   Dima Group - Design Tokens
   Source of truth: Figma design system (desktop 1440px).
   Values are copied verbatim from the design. Do not "tidy" or reorder them.
   ========================================================================== */

:root {
	/* ----------------------------------------------------------------------
	   Color - Gold ramp
	   ---------------------------------------------------------------------- */
	--dima-color-gold-50: #FFFDF5;
	--dima-color-gold-100: #FBEFC9;
	--dima-color-gold-200: #F6D64A;
	--dima-color-gold-300: #D9AE47;
	--dima-color-gold-400: #C3A55D;
	--dima-color-gold-500: #B29243;
	--dima-color-gold-600: #937633;
	--dima-color-gold-700: #7A6530;
	--dima-color-gold-800: #54441F;
	--dima-color-gold-900: #332A12;

	/* Error / invalid.

	   NOT FROM FIGMA. The design file has no error colour at all, which only
	   becomes a gap once the site has a form. Two steps rather than one,
	   because no single red clears 4.5:1 on both the ivory and the ink
	   grounds - the same reason the gold ramp needs more than one step.

	   Measured: error-600 is 7.27:1 on ivory-50 and 7.13:1 on gold-50;
	   error-300 is 7.33:1 on ink-800 and 5.75:1 on gold-900. */
	--dima-color-error-600: #A3291B;
	--dima-color-error-300: #E98C7C;

	/* ----------------------------------------------------------------------
	   Color - Ink ramp
	   ---------------------------------------------------------------------- */

	/* FIGMA DEFECT: The ink ramp is non-monotonic. ink-500 (#333333, luminance
	   ~20.0%) is LIGHTER than ink-600 (#383838, luminance ~21.8%)... in fact the
	   whole pair is inverted relative to the naming convention, where a higher
	   step number must be darker. Any code that assumes "higher number = darker"
	   (hover states, computed overlays, automated contrast checks) will produce
	   a visually wrong result between these two steps.
	   Reported to design; reproduced verbatim here pending a token fix.
	   Do NOT silently swap these values - downstream Figma components reference
	   them by name and would drift out of sync. */
	--dima-color-ink-300: #9E9E9E;
	--dima-color-ink-400: #6E6E6E;
	--dima-color-ink-500: #333333; /* FIGMA DEFECT: lighter than ink-600 - see note above. */
	--dima-color-ink-600: #383838; /* FIGMA DEFECT: darker than ink-500 - see note above. */
	--dima-color-ink-700: #2F2F2F;
	--dima-color-ink-750: #222222;
	--dima-color-ink-800: #161616;
	--dima-color-ink-850: #121212;
	--dima-color-ink-900: #0D0D0D;
	--dima-color-ink-950: #080808;

	/* ----------------------------------------------------------------------
	   Color - Ivory
	   ---------------------------------------------------------------------- */
	--dima-color-ivory-50: #FFFFFF;
	--dima-color-ivory-100: #F7F4EC;

	/* ----------------------------------------------------------------------
	   Semantic aliases - the DEFAULT (light) page ground
	   These are theme-level decisions, not Figma tokens. No ramp value above
	   is touched here; this block only decides which step each role points at.

	   The Figma artboard fill is #FFFFFF and almost every section is
	   transparent, so the default ground is LIGHT: body copy ink-700
	   (#2F2F2F), headings ink-800 (#161616).

	   Only four zones are not white - the header and mega menu (ink-900), the
	   Home "our services" section (ink-800), the CTA band (gold-900) and the
	   warm off-white blocks (gold-50). Those opt in with a ground modifier
	   (.dima-section--dark / --warm / --gold-dark, see base.css) which
	   re-declares the aliases below locally. Components read the aliases, never
	   a ramp step, so they adapt to whichever ground they land on.
	   ---------------------------------------------------------------------- */
	--dima-surface: var(--dima-color-ivory-50); /* #FFFFFF */
	--dima-surface-raised: var(--dima-color-gold-50); /* #FFFDF5 */
	--dima-surface-light: var(--dima-color-ivory-100);
	--dima-text: var(--dima-color-ink-700); /* #2F2F2F body copy */
	--dima-text-heading: var(--dima-color-ink-800); /* #161616 headings */
	--dima-text-muted: var(--dima-color-ink-400);
	--dima-text-on-light: var(--dima-color-ink-900);
	--dima-text-on-dark: var(--dima-color-ivory-100);
	--dima-border: rgba(22, 22, 22, 0.14);
	--dima-accent: var(--dima-color-gold-300);
	--dima-accent-strong: var(--dima-color-gold-400);
	--dima-accent-soft: var(--dima-color-gold-100);

	/* The gold the design uses for accent TEXT is gold-300 (#D9AE47), which is
	   ~1.9:1 on white and unreadable. On a light ground the accent text role
	   steps to gold-700 (#7A6530, ~4.9:1) and the dark grounds put gold-300
	   back. Same hue family, legible on both.
	   TODO(design): confirm the light-ground accent step. */
	--dima-accent-on-ground: var(--dima-color-gold-700);
	--dima-focus-ring: var(--dima-color-gold-600);

	/* Partner and brand marks are exported near-black. They are flattened to
	   an ivory silhouette ONLY on a dark ground; on white they show as
	   designed. Ground modifiers set this. */
	--dima-logo-filter: none;

	/* ----------------------------------------------------------------------
	   Typography - families
	   Two families only.
	   ---------------------------------------------------------------------- */
	--dima-font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--dima-font-body: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* FIGMA DEFECT: The h3-subsection style specifies the font family "Playfair"
	   rather than "Playfair Display", which every other heading style uses.
	   "Playfair" and "Playfair Display" are two distinct Google Fonts families
	   with different metrics, so this is almost certainly an authoring slip in
	   Figma rather than an intentional mix. Reproduced verbatim below; the
	   fallback chain still degrades to a serif. See also the line-height defect
	   flagged on --dima-line-height-h3-subsection.
	   TODO(design): confirm whether h3-subsection should use "Playfair Display".
	   Until then "Playfair" is NOT loaded from Google Fonts (we do not ship an
	   extra family for a suspected typo), so this style currently falls through
	   to "Playfair Display". */
	--dima-font-display-h3: "Playfair", "Playfair Display", "Iowan Old Style", Georgia, serif;

	/* ----------------------------------------------------------------------
	   Typography - text styles (9 total)
	   ---------------------------------------------------------------------- */

	/* display-h1 */
	--dima-font-size-display-h1: 60px;
	--dima-line-height-display-h1: 64px;
	--dima-letter-spacing-display-h1: 0;
	--dima-font-weight-display-h1: 600;

	/* h2-section */
	--dima-font-size-h2-section: 48px;
	--dima-line-height-h2-section: 56px;
	--dima-letter-spacing-h2-section: -0.96px;
	--dima-font-weight-h2-section: 600;

	/* h2-emphasis */
	--dima-font-size-h2-emphasis: 36px;
	--dima-line-height-h2-emphasis: 40px;
	--dima-letter-spacing-h2-emphasis: -0.72px;
	--dima-font-weight-h2-emphasis: 500;

	/* h3-subsection */
	--dima-font-size-h3-subsection: 32px;

	/* FIGMA DEFECT: line-height 28.8px is SMALLER than the 32px font-size
	   (ratio 0.9). Any h3-subsection that wraps to two or more lines will have
	   its lines overlap and become unreadable. This looks like a "90%" line
	   height applied to the wrong base. A safe value would be ~1.2 (38.4px).
	   Reproduced verbatim as specified; see .dima-h3-subsection in base.css for
	   the opt-in safe override utility.
	   TODO(design): confirm intended line-height for h3-subsection. */
	--dima-line-height-h3-subsection: 28.8px;
	--dima-letter-spacing-h3-subsection: -0.64px;
	--dima-font-weight-h3-subsection: 700;
	/* Non-Figma escape hatch: opt-in safe line-height for multi-line h3s. */
	--dima-line-height-h3-subsection-safe: 38.4px;

	/* h4-card-title */
	--dima-font-size-h4-card-title: 22px;
	--dima-line-height-h4-card-title: 28.6px;
	--dima-letter-spacing-h4-card-title: 0.22px;
	--dima-font-weight-h4-card-title: 700;

	/* body-large */
	--dima-font-size-body-large: 18px;
	--dima-line-height-body-large: 31.5px;
	--dima-letter-spacing-body-large: 0;
	--dima-font-weight-body-large: 400;

	/* body */
	--dima-font-size-body: 16px;
	--dima-line-height-body: 25.6px;
	--dima-letter-spacing-body: 0;
	--dima-font-weight-body: 400;

	/* eyebrow-label */
	--dima-font-size-eyebrow-label: 14px;
	--dima-line-height-eyebrow-label: 16.1px;
	--dima-letter-spacing-eyebrow-label: 1.12px;
	--dima-font-weight-eyebrow-label: 600;

	/* micro-button */
	--dima-font-size-micro-button: 12px;
	--dima-line-height-micro-button: 15.6px;
	--dima-letter-spacing-micro-button: 0.96px;
	--dima-font-weight-micro-button: 600;

	/* ----------------------------------------------------------------------
	   Layout
	   The Figma artboard is 1440px wide with a 170px left gutter on the mega
	   menu, which gives a 1100px content column. We use that as the container.
	   ---------------------------------------------------------------------- */
	--dima-layout-artboard: 1440px;
	--dima-layout-gutter: 170px;
	--dima-layout-container: 1100px;

	/* The designed content row: 1328px inside the 1440px artboard, i.e. a 56px
	   gutter on each side (1440 - 2 x 56 = 1328). Every full-bleed section
	   centres this row, and it never grows past the design width, so the type
	   scale is used at exactly the sizes it was drawn at. */
	--dima-layout-row: 1328px;
	--dima-layout-row-gutter: 56px;
	--dima-header-height: 112px;
	--dima-mega-menu-height: 248px;
	--dima-hero-height: 720px;

	/* ----------------------------------------------------------------------
	   Spacing scale (derived from the auto-layout gaps observed in Figma)
	   ---------------------------------------------------------------------- */
	--dima-space-1: 4px;
	--dima-space-2: 8px;
	--dima-space-3: 16px;
	--dima-space-4: 24px;
	--dima-space-5: 32px;
	--dima-space-6: 48px;
	--dima-space-7: 50px;
	--dima-space-8: 56px;
	--dima-space-9: 64px;

	/* ----------------------------------------------------------------------
	   Motion

	   NOT FROM FIGMA. The design file specifies no motion at all - no easing,
	   no durations, no entrance behaviour. These values are an engineering
	   decision and are the only invented values in this file.

	   The curves are deliberately asymmetric. The CSS keyword "ease" is the
	   browser default and is symmetric, so every transition accelerates and
	   decelerates by the same amount; that even, mechanical quality is exactly
	   what reads as unconsidered.
	   --dima-ease-out leaves immediately and settles slowly, which is how a
	   surface responds to a pointer. --dima-ease-entrance overshoots nothing
	   but decelerates harder, for elements arriving on screen.

	   Durations follow the same reasoning: a state the user asked for (hover)
	   should feel instant; an element arriving unasked can afford to take its
	   time.
	   ---------------------------------------------------------------------- */
	--dima-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dima-ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1);

	--dima-transition-fast: 150ms var(--dima-ease-out);
	--dima-transition-base: 240ms var(--dima-ease-out);
	--dima-transition-slow: 420ms var(--dima-ease-out);

	/* Entrance choreography. --dima-stagger is the delay BETWEEN siblings, not
	   a total; the reveal helper multiplies it by the element's index. */
	--dima-duration-entrance: 760ms;
	--dima-stagger: 95ms;
	--dima-entrance-rise: 32px;
}