/* ==========================================================================
   KHAREN PINHEIRO — WEBFONTS
   NOTE (font substitution flag): the brand manual shows the wordmark set in a
   high-contrast serif and labels in a light, wide-tracked sans, but no font
   files or family names were supplied. We substituted the closest Google
   Fonts matches: Playfair Display (display serif — matches the wordmark's
   contrast and proportions), Cormorant Garamond (a softer secondary serif for
   quotes/long-form), and Montserrat (geometric sans for labels/UI/body).
   Ask the studio for the original font files if these should be swapped.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   KHAREN PINHEIRO — COLOR TOKENS
   Source: brand manual (uploads/Manual marca pessoal Kharen Pinheiro correto.png)
   Base palette: Deep Forest Green, Light Sand Beige, Sálvia Claro, Dourado Fosco
   ========================================================================== */

:root {
  /* ---- Primitives: Forest Green (primary) ---- */
  --kp-green-900: #1D2820;
  --kp-green-800: #2A3A2C; /* Deep Forest Green — brand base */
  --kp-green-700: #37492F;
  --kp-green-600: #46603F;
  --kp-green-500: #5A7752;
  --kp-green-400: #7C9470;

  /* ---- Primitives: Sálvia (sage, secondary green) ---- */
  --kp-sage-600: #8B9C7E;
  --kp-sage-500: #A7B59A; /* Sálvia Claro — brand base */
  --kp-sage-300: #C6D0BC;
  --kp-sage-100: #E5EADE;

  /* ---- Primitives: Sand Beige (neutral / paper) ---- */
  --kp-beige-900: #C7B393;
  --kp-beige-700: #DCCBAE;
  --kp-beige-500: #EADECD; /* Light Sand Beige — brand base */
  --kp-beige-300: #F1E8DB;
  --kp-beige-100: #F8F3EB;

  /* ---- Primitives: Dourado Fosco (matte gold accent) ---- */
  --kp-gold-800: #A3813F;
  --kp-gold-600: #C8A96B; /* Dourado Fosco — brand base */
  --kp-gold-400: #DDC393;
  --kp-gold-200: #EFDFC2;

  /* ---- Primitives: neutrals / paper white ---- */
  --kp-white: #FFFFFF;
  --kp-ink: #22271F;

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--kp-beige-300);
  --surface-card: var(--kp-white);
  --surface-card-alt: var(--kp-beige-100);
  --surface-sunken: var(--kp-sage-100);
  --surface-inverse: var(--kp-green-800);
  --surface-inverse-alt: var(--kp-green-900);

  /* ---- Semantic: text ---- */
  --text-primary: var(--kp-green-900);
  --text-secondary: var(--kp-green-600);
  --text-muted: #6C7A67;
  --text-inverse: var(--kp-beige-100);
  --text-inverse-muted: var(--kp-sage-300);
  --text-accent: var(--kp-gold-800);

  /* ---- Semantic: borders ---- */
  --border-subtle: var(--kp-beige-700);
  --border-default: var(--kp-sage-500);
  --border-strong: var(--kp-green-800);
  --border-inverse: rgba(234, 222, 205, 0.28);

  /* ---- Semantic: accent / interactive ---- */
  --accent-primary: var(--kp-green-800);
  --accent-primary-hover: var(--kp-green-700);
  --accent-primary-press: var(--kp-green-900);
  --accent-gold: var(--kp-gold-600);
  --accent-gold-hover: var(--kp-gold-800);
  --focus-ring: var(--kp-gold-600);

  /* ---- Semantic: state ---- */
  --state-success: #5C7A52;
  --state-warning: var(--kp-gold-800);
  --state-error: #A24B3F;
  --state-info: var(--kp-sage-600);
}

/* ==========================================================================
   KHAREN PINHEIRO — TYPE TOKENS
   Display/logo serif paired with a light, wide-tracked sans for labels & UI.
   ========================================================================== */

:root {
  /* ---- Font families ---- */
  --font-serif-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-serif-secondary: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;

  /* ---- Sizes ---- */
  --text-display-xl: 64px;
  --text-display-lg: 48px;
  --text-display-md: 36px;
  --text-heading-lg: 30px;
  --text-heading-md: 24px;
  --text-heading-sm: 20px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-label: 13px;
  --text-eyebrow: 12px;

  /* ---- Line heights ---- */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.22em;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* ==========================================================================
   KHAREN PINHEIRO — SPACING, RADIUS & SHADOW TOKENS
   Generous, airy spacing; soft low-contrast shadows; mostly rounded/pill shapes.
   ========================================================================== */

:root {
  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Shadows (soft, warm, forest-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(42, 58, 44, 0.06), 0 1px 1px rgba(42, 58, 44, 0.04);
  --shadow-md: 0 8px 24px rgba(42, 58, 44, 0.10), 0 2px 6px rgba(42, 58, 44, 0.06);
  --shadow-lg: 0 20px 48px rgba(42, 58, 44, 0.14), 0 4px 12px rgba(42, 58, 44, 0.08);
  --shadow-inset: inset 0 0 0 1px rgba(42, 58, 44, 0.08);

  /* ---- Borders ---- */
  --border-width-hairline: 1px;
  --border-width-default: 1.5px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-normal: 240ms; /* @kind other */
  --duration-slow: 400ms; /* @kind other */
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-page); color: var(--text-primary); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
::selection { background: var(--kp-gold-200); color: var(--kp-green-900); }
@keyframes kpfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
a { color: inherit; }

@media (max-width: 480px) {
  .kp-nav-logo { height: 30px !important; }
  .kp-nav-name { font-size: 14.5px !important; }
  .kp-nav-sub { display: none !important; }
  .kp-nav-cta { padding: 8px 14px !important; font-size: 13px !important; gap: 6px !important; }
  .kp-nav-cta svg { width: 14px !important; height: 14px !important; }
  .kp-nav-row { gap: 8px !important; }
}
@media (max-width: 380px) {
  .kp-nav-name { font-size: 13.5px !important; }
}