/* ============================================================
   SmileTrue design tokens
   ------------------------------------------------------------
   Top half: verbatim port of source styles.css :root (lines 5-31).
   Bottom half: semantic aliases from design-tokens.json that map to the
   source vars — these power Elementor controls without breaking the source
   CSS that references --teal-800, --gold, etc.
   ============================================================ */


/* ============================================================
   FONT FALLBACKS — metric-overridden @font-face declarations
   ------------------------------------------------------------
   These map local system fonts (Georgia / Arial / Menlo) to the
   metric envelope of our real Google Fonts so that the brief moment
   before the Google Fonts woff2 finishes loading, text renders with
   near-identical character widths and line heights. Result: no visible
   "bold flash" / FOUT, no CLS on font swap.

   Source of override values:
   - Source Serif 4 → Georgia : per the font audit (Issue 1B)
   - Inter          → Arial   : per the font audit (Issue 1C)
   - IBM Plex Mono  → Menlo/Consolas/Courier : community-tested
     (smaller visual impact since mono is only used at 10–13px in
      eyebrows / labels / topbar / footer micro text)

   These are declared BEFORE :root so they are available when the
   --serif / --sans / --mono variables reference them below.
   ============================================================ */

@font-face {
	font-family: 'Source Serif 4 Fallback';
	src: local('Georgia');
	font-weight: 100 900;
	font-style: normal;
	/* size-adjust dropped from 107% to 100% — Georgia letters now render at the
	   exact requested font-size during the (now ~100ms thanks to woff2 preload)
	   fallback window, so the brief fallback no longer reads as visibly heavier
	   than the real Source Serif 4. ascent/descent kept so line-height matches. */
	ascent-override: 84%;
	descent-override: 20%;
	line-gap-override: 0%;
	size-adjust: 100%;
}

@font-face {
	font-family: 'Source Serif 4 Fallback';
	src: local('Georgia Italic'), local('Georgia');
	font-weight: 100 900;
	font-style: italic;
	ascent-override: 84%;
	descent-override: 20%;
	line-gap-override: 0%;
	size-adjust: 100%;
}

@font-face {
	font-family: 'Inter Fallback';
	src: local('Arial');
	font-weight: 100 900;
	font-style: normal;
	ascent-override: 90%;
	descent-override: 22%;
	line-gap-override: 0%;
	size-adjust: 107%;
}

@font-face {
	font-family: 'IBM Plex Mono Fallback';
	src: local('Menlo'), local('Consolas'), local('Courier New');
	font-weight: 100 900;
	font-style: normal;
	ascent-override: 80%;
	descent-override: 20%;
	line-gap-override: 0%;
	size-adjust: 105%;
}


:root {
	/* === Source shorthand (verbatim — keep names so existing CSS ports cleanly) === */
	--teal-900:  #0a3a44;
	--teal-800:  #0d4f5c;
	--teal-700:  #146474;
	--teal-600:  #2a8190;
	--teal-500:  #4ea1ad;
	--teal-300:  #a8cdd2;
	--teal-100:  #dfecee;
	--teal-50:   #eef5f6;
	--mint:      #e8f1f1;
	--gold:      #c9a449;
	--gold-deep: #a08231;
	--gold-soft: #e2c984;
	--gold-50:   #f7f0d9;
	--paper:     #fafbfb;
	--white:     #ffffff;
	--ink:       #1a2628;
	--ink-soft:  #3e4f53;
	--ink-mute:  #6e7b80;
	--line:      #d8dfe1;
	--line-soft: #eaeef0;

	/* Font family stacks: real Google Font → metric-matched fallback → generic.
	   The fallback families are defined as @font-face above and use local()
	   system fonts under the hood with ascent/descent/size-adjust tweaks so
	   the layout doesn't reflow when the Google Font finishes loading. */
	--serif: 'Source Serif 4', 'Source Serif Pro', 'Source Serif 4 Fallback', Georgia, serif;
	--sans:  'Inter', 'Inter Fallback', system-ui, sans-serif;
	--mono:  'IBM Plex Mono', 'IBM Plex Mono Fallback', ui-monospace, Menlo, Consolas, 'Courier New', monospace;

	/* === Semantic aliases (for Elementor controls + future-proofing) === */
	--color-primary:          var(--teal-800);
	--color-primary-dark:     var(--teal-900);
	--color-primary-deep:     var(--teal-700);
	--color-primary-mid:      var(--teal-600);
	--color-primary-light:    var(--teal-500);
	--color-primary-soft:     var(--teal-300);
	--color-primary-tint:     var(--teal-100);
	--color-primary-wash:     var(--teal-50);
	--color-primary-mint:     var(--mint);

	--color-accent:           var(--gold);
	--color-accent-deep:      var(--gold-deep);
	--color-accent-soft:      var(--gold-soft);
	--color-accent-tint:      var(--gold-50);

	--color-bg:               var(--paper);
	--color-surface:          var(--white);
	--color-surface-inverse:  var(--ink);

	--color-text:             var(--ink);
	--color-text-soft:        var(--ink-soft);
	--color-text-muted:       var(--ink-mute);
	--color-text-on-dark:        #ffffff;
	--color-text-on-dark-soft:   rgba(255, 255, 255, 0.78);
	--color-text-on-dark-muted:  rgba(255, 255, 255, 0.55);

	--color-border:      var(--line);
	--color-border-soft: var(--line-soft);

	--color-focus: var(--teal-600);

	/* Typography aliases */
	--font-serif: var(--serif);
	--font-sans:  var(--sans);
	--font-mono:  var(--mono);

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

	/* Font sizes — desktop defaults (Phase 3b adds responsive overrides per widget) */
	--font-size-micro:     10px;
	--font-size-label:     11px;
	--font-size-caption:   12px;
	--font-size-small:     13px;
	--font-size-body:      14px;
	--font-size-body-md:   16px;
	--font-size-body-lg:   17px;
	--font-size-body-xl:   19px;
	--font-size-h6:        20px;
	--font-size-h5:        22px;
	--font-size-h4:        26px;
	--font-size-h3:        32px;
	--font-size-h2:        44px;
	--font-size-h1:        56px;
	--font-size-display:   72px;
	--font-size-display-xl:80px;

	--line-height-tight:   1.02;
	--line-height-snug:    1.1;
	--line-height-normal:  1.5;
	--line-height-relaxed: 1.6;
	--line-height-loose:   1.65;

	--letter-spacing-tightest: -0.03em;
	--letter-spacing-tighter:  -0.025em;
	--letter-spacing-tight:    -0.02em;
	--letter-spacing-snug:     -0.01em;
	--letter-spacing-normal:   0;
	--letter-spacing-wide:     0.1em;
	--letter-spacing-wider:    0.14em;
	--letter-spacing-widest:   0.16em;

	/* Spacing — 4-base scale from design-tokens.json */
	--space-0:  0;
	--space-px: 1px;
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-7:  28px;
	--space-8:  32px;
	--space-9:  40px;
	--space-10: 48px;
	--space-11: 56px;
	--space-12: 64px;
	--space-13: 80px;
	--space-14: 96px;
	--space-15: 110px;
	--space-16: 120px;

	/* Intent aliases — these get adjusted per-breakpoint below */
	--space-section:       110px;
	--space-section-tight: 80px;
	--space-gutter:        64px;
	--space-card:          32px;
	--space-stack:         16px;
	--space-row:           12px;

	/* Radii — source uses sharp corners; soft radii exist for buttons */
	--radius-none: 0;
	--radius-xs:   2px;
	--radius-sm:   4px;
	--radius-pill: 9999px;

	/* Shadows */
	--shadow-card:      0 20px 40px -20px rgba(13, 79, 92, 0.25);
	--shadow-call-card: 0 24px 48px -32px rgba(13, 79, 92, 0.20);

	/* Borders */
	--border-thin:       1px solid var(--color-border);
	--border-soft:       1px solid var(--color-border-soft);
	--border-accent-top: 3px solid var(--color-accent);

	/* Layout containers */
	--container-max-width: 1440px;
	--container-narrow:    1100px;
	--container-prose:     880px;
	--container-lead:      800px;
	--lede-max-width:      56ch;

	/* Motion */
	--duration-fast: 150ms;
	--duration-base: 240ms;
	--duration-slow: 480ms;

	--easing-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
	--easing-out:      cubic-bezier(0.16, 1, 0.3, 1);

	/* z-index scale */
	--z-base:   0;
	--z-raised: 10;
	--z-sticky: 50;
	--z-nav:    100;
	--z-modal:  1000;
	--z-toast:  1100;
}

/* === Responsive spacing intents (Phase 3b refines per-widget) === */

@media (max-width: 767px) {
	:root {
		--space-section:       56px;
		--space-section-tight: 48px;
		--space-gutter:        20px;
		--space-card:          20px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	:root {
		--space-section:       88px;
		--space-section-tight: 64px;
		--space-gutter:        32px;
		--space-card:          28px;
	}
}