/*
 * MiraeLaw Design System — CSS Custom Properties
 * Source of truth: /wp-content/Home-2.html ("Editorial / Prestige" variation)
 * Do not hardcode values that already exist below — reference the variable instead.
 */

:root {

	/* ---------------------------------------------------------------
	 * Color — brand
	 * ------------------------------------------------------------- */
	--ml-primary: #142638;          /* navy — headings, body text, dark sections */
	--ml-primary-dark: #0E1B29;     /* footer background */
	--ml-secondary: #1F4E8C;        /* blue — links, secondary actions */
	--ml-accent: #C05B33;           /* terracotta — CTAs, links on hover */
	--ml-accent-dark: #A84A26;      /* terracotta — CTA hover/active */
	--ml-accent-light: #E8B49A;     /* terracotta tint — text/links on dark bg hover */
	--ml-tertiary: #3E7561;         /* green — trust/label accents */
	--ml-tertiary-light: #7FA893;   /* green tint — labels on dark bg */
	--ml-tertiary-lighter: #5E8C7A; /* green tint — labels on darkest bg (footer) */
	--ml-primary-tint: #1B3048;     /* navy-on-navy — decorative watermark text (hero) */

	/* Color — neutral text scale (light-mode surfaces) */
	--ml-neutral-900: #142638; /* primary text */
	--ml-neutral-700: #3D4C5A; /* secondary text, FAQ answers */
	--ml-neutral-600: #4A5A68; /* body copy, blurbs */
	--ml-neutral-500: #748291; /* captions, fine print */

	/* Color — neutral text scale (dark-mode surfaces) */
	--ml-neutral-300: #8FA5BB; /* muted labels on navy */
	--ml-neutral-200: #B9C6D3; /* body copy on navy */
	--ml-neutral-100: #8FA0B0; /* muted copy on darkest navy (footer) */

	/* Color — background / surface */
	--ml-background: #F7F4EE;  /* page background, cream */
	--ml-surface: #FFFFFF;     /* card / form / panel surface */
	--ml-surface-dark: #142638;   /* hero / contact section surface */
	--ml-surface-darker: #0E1B29; /* footer surface */
	--ml-surface-hover: #EDE8DD;  /* warm tint — hover background on light interactive rows (e.g. language switcher) */

	/* Color — border */
	--ml-border: #142638;       /* structural rule, light surfaces */
	--ml-border-warm: #C9C2B2;  /* hairline rule on cream background */
	--ml-border-cool: #DEE5EA;  /* hairline rule on white background */
	--ml-border-muted: #C4CFD8; /* dropdown border, nav underline */
	--ml-border-dark: #24405C;  /* hairline rule on navy background */
	--ml-border-darker: #3E5875; /* outline-button border on navy background */

	/* Color — semantic (Success/Info reuse brand hues; Warning/Error are not
	   present in the source design and are assumed from the existing palette) */
	--ml-success: #3E7561;
	--ml-info: #1F4E8C;
	--ml-warning: #B7791F; /* ASSUMPTION — no warning color in source */
	--ml-error: #B3261E;   /* ASSUMPTION — no error color in source */

	/* Color — focus */
	--ml-focus-ring: #C05B33; /* default focus-visible outline color */

	/* ---------------------------------------------------------------
	 * Typography
	 * ------------------------------------------------------------- */
	--ml-font-heading: 'Source Serif 4', Georgia, serif;
	--ml-font-body: 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
	--ml-font-mono: 'IBM Plex Mono', Menlo, monospace;

	--ml-font-weight-regular: 400;
	--ml-font-weight-medium: 500;
	--ml-font-weight-semibold: 600;
	--ml-font-weight-bold: 700;

	/* Type scale */
	--ml-text-2xs: 11.5px; /* hero stat labels, eyebrow-style micro labels */
	--ml-text-xs: 12.5px;  /* mono labels, fine print (corrected to exact source value) */
	--ml-text-sm: 13.5px;  /* small mono labels, form labels, hero eyebrow */
	--ml-text-base: 15px;  /* body copy, inputs, nav */
	--ml-text-md: 16px;    /* buttons, lede paragraphs */
	--ml-text-lg: 17px;    /* intro paragraphs */
	--ml-text-xl: 22px;    /* card / list-row titles */
	--ml-text-2xl: 24px;   /* testimonial quote (max) */
	--ml-text-3xl: 30px;   /* stat numbers */
	--ml-text-h2: clamp(32px, 4.4vw, 48px); /* section headings */
	--ml-text-h1: clamp(40px, 6vw, 76px);   /* hero heading */
	--ml-text-hero-lead: clamp(17px, 2vw, 20px); /* hero subheading */
	--ml-text-watermark: clamp(180px, 26vw, 340px); /* hero decorative watermark */

	/* Line height */
	--ml-leading-tight: 1.04;   /* hero h1 */
	--ml-leading-snug: 1.2;     /* card / list-row titles */
	--ml-leading-normal: 1.5;   /* body copy, card blurbs */
	--ml-leading-comfortable: 1.6; /* section subtitles */
	--ml-leading-relaxed: 1.65; /* long-form paragraphs */
	--ml-leading-h2: 1.08;      /* section h2 headings (shared across sections) */

	/* Letter spacing */
	--ml-tracking-tight: -0.015em; /* hero h1 */
	--ml-tracking-normal: 0;
	--ml-tracking-wide: 0.06em;
	--ml-tracking-wider: 0.12em;
	--ml-tracking-wide-plus: 0.14em; /* hero eyebrow line */
	--ml-tracking-widest: 0.16em; /* eyebrow / label text */

	/* ---------------------------------------------------------------
	 * Spacing
	 * ------------------------------------------------------------- */
	--ml-spacing-0: 0;
	--ml-spacing-3xs: 4px;
	--ml-spacing-2xs: 8px;
	--ml-spacing-xs: 12px;
	--ml-spacing-sm: 16px;
	--ml-spacing-md: 24px;
	--ml-spacing-lg: 32px;
	--ml-spacing-xl: 48px;
	--ml-spacing-2xl: 64px;
	--ml-spacing-3xl: 96px;

	/* Fluid section spacing (matches clamp() values used for section padding) */
	--ml-spacing-section-sm: clamp(3rem, 6vw, 4.5rem);  /* ~48–72px */
	--ml-spacing-section-md: clamp(3.5rem, 8vw, 6rem);  /* ~56–96px */
	--ml-spacing-section-lg: clamp(4rem, 9vw, 7.5rem);  /* ~64–120px, hero top padding */

	/* ---------------------------------------------------------------
	 * Border radius — the source design is intentionally square-cornered
	 * (editorial style). The scale is provided for completeness; every
	 * component default currently resolves to --ml-radius-none.
	 * ------------------------------------------------------------- */
	--ml-radius-none: 0;
	--ml-radius-sm: 0;
	--ml-radius-md: 0;
	--ml-radius-lg: 0;
	--ml-radius-full: 9999px;

	/* ---------------------------------------------------------------
	 * Shadows
	 * ------------------------------------------------------------- */
	--ml-shadow-none: none;
	--ml-shadow-card: 6px 6px 0 rgba(20, 38, 56, 0.12); /* hard offset shadow, e.g. dropdown panel */
	--ml-shadow-focus-accent: 0 0 0 3px rgba(192, 91, 51, 0.35);
	--ml-shadow-focus-secondary: 0 0 0 3px rgba(31, 78, 140, 0.25);
	--ml-focus-ring-secondary-color: rgba(31, 78, 140, 0.25); /* same color/opacity as --ml-shadow-focus-secondary, exposed as a bare color for outline-based focus rings */

	/* ---------------------------------------------------------------
	 * Transitions / animation — ASSUMPTION: the source markup swaps hover
	 * states without a defined duration. Values below are conventional
	 * defaults for smoothing those state changes in real CSS.
	 * ------------------------------------------------------------- */
	--ml-transition-fast: 150ms ease;
	--ml-transition-base: 200ms ease;
	--ml-transition-slow: 350ms ease;
	--ml-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

	--ml-anim-duration-fast: 200ms;
	--ml-anim-duration-base: 400ms;
	--ml-anim-duration-slow: 600ms;

	/* ---------------------------------------------------------------
	 * Breakpoints — ASSUMPTION: the source design is fluid (clamp() and
	 * auto-fit grids) and defines no @media breakpoints. These are
	 * conventional reference values; CSS custom properties cannot be used
	 * inside @media conditions, so hardcode the matching px value there.
	 * ------------------------------------------------------------- */
	--ml-bp-sm: 480px;
	--ml-bp-md: 768px;
	--ml-bp-lg: 1024px;
	--ml-bp-xl: 1240px;

	/* ---------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------- */
	--ml-container-width: 1240px;   /* standard section container */
	--ml-container-narrow: 880px;   /* testimonial / narrow reading column */
	--ml-container-padding: 24px;   /* container side gutter */

	/* ---------------------------------------------------------------
	 * Icon sizes
	 * ------------------------------------------------------------- */
	--ml-icon-xs: 10px; /* dropdown caret */
	--ml-icon-sm: 12px; /* accordion/FAQ caret */
	--ml-icon-md: 18px; /* inline arrow link */
	--ml-icon-lg: 24px; /* ASSUMPTION — reserved for future nav/menu icons */
	--ml-icon-xl: 52px; /* decorative quote mark */

	/* ---------------------------------------------------------------
	 * Buttons
	 * ------------------------------------------------------------- */
	--ml-btn-padding-y: 15px;
	--ml-btn-padding-x: 30px;
	--ml-btn-padding-x-lg: 34px;
	--ml-btn-font-size: var(--ml-text-md);
	--ml-btn-font-weight: var(--ml-font-weight-bold);
	--ml-btn-radius: var(--ml-radius-none);

	--ml-btn-primary-bg: var(--ml-accent);
	--ml-btn-primary-bg-hover: var(--ml-accent-dark);
	--ml-btn-primary-color: var(--ml-surface);

	--ml-btn-secondary-bg: transparent;
	--ml-btn-secondary-border: var(--ml-border-darker);
	--ml-btn-secondary-color: var(--ml-background);
	--ml-btn-secondary-border-hover: var(--ml-accent);
	--ml-btn-secondary-color-hover: var(--ml-accent-light);

	--ml-btn-dark-bg: var(--ml-primary);
	--ml-btn-dark-bg-hover: var(--ml-secondary);
	--ml-btn-dark-color: var(--ml-background);

	/* ---------------------------------------------------------------
	 * Inputs
	 * ------------------------------------------------------------- */
	--ml-input-bg: var(--ml-surface);
	--ml-input-color: var(--ml-primary);
	--ml-input-border-width: 1px;
	--ml-input-border-color: var(--ml-primary);
	--ml-input-border-color-focus: var(--ml-secondary);
	--ml-input-focus-ring: var(--ml-shadow-focus-secondary);
	--ml-input-padding-y: 12px;
	--ml-input-padding-x: 14px;
	--ml-input-font-size: var(--ml-text-base);
	--ml-input-radius: var(--ml-radius-none);
	--ml-input-label-size: var(--ml-text-sm);
	--ml-input-label-weight: var(--ml-font-weight-bold);

	/* ---------------------------------------------------------------
	 * Cards / panels
	 * ------------------------------------------------------------- */
	--ml-card-bg: var(--ml-background);
	--ml-card-border-width: 1px;
	--ml-card-border-color: var(--ml-border);
	--ml-card-padding: 26px 24px;
	--ml-card-radius: var(--ml-radius-none);
	--ml-card-shadow: var(--ml-shadow-none);

	--ml-card-quote-border: 1.5px dashed var(--ml-border-muted);
	--ml-card-quote-padding: clamp(28px, 5vw, 48px);
}