/*
Theme Name: GeneratePress Child
Theme URI: https://skincareclarity.com/
Description: Child theme for Skincare Clarity. Use this stylesheet for global CSS, reusable components, and local font declarations.
Author: Skincare Clarity
Template: generatepress
Version: 1.0.0
Text Domain: generatepress-child
*/

/*
Skincare Clarity build note:
Inter may be loaded through GeneratePress/Google Fonts during the build phase.
Before launch, self-host Inter and replace external Google Fonts loading with local @font-face declarations.
*/

:root {
  /* Surfaces */
  --bg: #fcfcfa;
  --surface: #ffffff;
  --neutral-card: #f7f6f3;
  --surface-soft: #f4f3ee;
  --text: #1f1f1f;
  --muted: #4a4d52;
  --muted-2: #6b6e74;
  --border: #e5e3dc;
  --border-soft: #ececea;

  /* Brand palette */
  --olive: #5c7a4f;
  --olive-deep: #4a6741;
  --olive-soft: #e8eee2;
  --olive-border: #c8d3bd;

  --brick: #a83a2a;
  --brick-deep: #8a3022;
  --brick-soft: #f5e3df;
  --brick-border: #ecc8c0;

  /* Ingredient-page support */
  --clarity-blue: #edf4f8;
  --clarity-blue-text: #1a4f6e;

  /* Shape and layout */
  --radius-xl: 32px;
  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 16px;
  --max: 1180px;

  /* Typography */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-sm: 0 1px 2px rgba(60,64,67,.04);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

strong {
  font-weight: 600;
  color: var(--text);
}