/* ============================================================
 * SKIN AESTHETICS BY KRYSTIAN - BRAND TOKENS v1.0
 * Forest-green system extracted from existing logomark.
 * Import first in every file.
 * ============================================================ */

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

:root {
  /* ---------- Color · Primary forest palette ---------- */
  --sk-forest-900: #1F3328;   /* Deepest. Hover-pressed, dark body bg. */
  --sk-forest-800: #2F4A3A;   /* ★ PRIMARY. Extracted from SKIN logomark. */
  --sk-forest-700: #3D5E4A;   /* Secondary. Headings on light, body accents. */
  --sk-forest-500: #6B8576;   /* Muted. Borders, subtle accents. */
  --sk-forest-200: #C7D3CC;   /* Hairlines on forest surfaces. */
  --sk-forest-100: #E4ECE7;   /* Soft tinted backgrounds, chips. */

  /* ---------- Color · Warm neutrals ---------- */
  --sk-bg:         #F5F3EE;   /* Warm off-white. Default page bg. */
  --sk-cream:      #EDE8DE;   /* Alt section bg. */
  --sk-surface:    #FFFFFF;   /* Cards. */
  --sk-ink-900:    #1A1A19;   /* Body text on light. Near-black warm. */
  --sk-ink-700:    #34322D;   /* Secondary body. */
  --sk-ink-500:    #6B665D;   /* Muted text, meta. */
  --sk-ink-300:    #D7D2C6;   /* Dividers. */

  /* ---------- Color · Light theme (cream / champagne, per client 5 Aug 2026) ----------
     Var names kept so every consumer keeps working. Dark values in tokens.css.dark.bak. */
  --sk-bg-dark:    #F3EFE5;   /* Cream page bg. Hero, footer, feature sections. */
  --sk-bg-darker:  #EAE4D7;   /* Champagne. Nav scroll-state, base layers. */
  --sk-paper:      #1F3328;   /* Forest ink for editorial contrast on cream. */
  --sk-bone:       #3D5E4A;   /* Mid-forest accent on cream. */
  --sk-forest-glow: rgba(107,133,118,0.35);   /* Glow ring on focus/hover on dark. */
  --sk-ink-on-dark: rgba(31,51,40,0.90);   /* Body text on cream. */
  --sk-ink-on-dark-muted: rgba(76,72,64,0.88);

  /* ---------- Color · Gold accent (★ replaces forest-green accent per 15 May call with Steven King) ---------- */
  /* Var names kept (--sk-green-accent / --sk-green-glow) for backwards compat with every consumer. */
  --sk-green-accent: #C9A961; /* ★ ACCENT (gold). Lines, ornaments, CTA borders, hover states. */
  --sk-green-glow:   rgba(201,169,97,0.32);
  /* Accent for TEXT on cream. The champagne above stays for fills, borders and
     glows, where it still reads. As text on cream it measures 1.76:1. */
  --sk-accent-ink:   #7A5C33;
  /* Knockout text sitting ON a champagne or forest fill. */
  --sk-on-accent:    #1F3328;

  /* ---------- Color · Legacy accent (kept for backward-compat in archive folders only) ---------- */
  --sk-champagne:  #C9AA79;   /* DEPRECATED. Do not use in new pages. */
  --sk-bronze:     #8E6F45;   /* DEPRECATED. Do not use in new pages. */

  /* ---------- Shadows ---------- */
  --sk-shadow-sm:   0 1px 2px rgba(31,51,40,0.04);
  --sk-shadow:      0 4px 20px rgba(31,51,40,0.07);
  --sk-shadow-lg:   0 14px 40px rgba(31,51,40,0.10);
  --sk-shadow-xl:   0 28px 56px rgba(31,51,40,0.14);
  --sk-shadow-cta:       0 6px 16px rgba(47,74,58,0.30), 0 1px 2px rgba(47,74,58,0.20);
  --sk-shadow-cta-hover: 0 12px 26px rgba(47,74,58,0.38), 0 2px 4px rgba(47,74,58,0.22);

  /* ---------- Radius ---------- */
  --sk-r-xs:   2px;
  --sk-r-sm:   4px;
  --sk-r:      8px;
  --sk-r-md:   12px;
  --sk-r-lg:   16px;
  --sk-r-xl:   24px;
  --sk-r-full: 999px;

  /* ---------- Spacing ---------- */
  --sk-sp-1:  4px;
  --sk-sp-2:  8px;
  --sk-sp-3:  12px;
  --sk-sp-4:  16px;
  --sk-sp-6:  24px;
  --sk-sp-8:  32px;
  --sk-sp-12: 48px;
  --sk-sp-16: 64px;
  --sk-sp-24: 96px;
  --sk-sp-32: 128px;

  /* ---------- Type stacks ---------- */
  --sk-font-display: 'Cormorant Garamond', 'Times New Roman', serif;   /* Editorial serif */
  --sk-font-ui:      'Inter', -apple-system, system-ui, sans-serif;
  --sk-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type sizes ---------- */
  --sk-text-xs:   0.75rem;
  --sk-text-sm:   0.875rem;
  --sk-text-base: 1rem;
  --sk-text-lg:   1.125rem;
  --sk-text-xl:   1.25rem;
  --sk-text-2xl:  1.5rem;
  --sk-text-3xl:  1.875rem;
  --sk-text-4xl:  2.5rem;
  --sk-text-5xl:  3.25rem;
  --sk-text-6xl:  4.5rem;
  --sk-text-display: clamp(3rem, 5vw + 1rem, 6.5rem);
  --sk-text-editorial: clamp(4rem, 8vw + 1rem, 10rem);

  /* ---------- Tracking ---------- */
  --sk-track-display:   -0.035em;
  --sk-track-h:         -0.015em;
  --sk-track-body:       0;
  --sk-track-mono:       0.06em;
  --sk-track-caps:       0.14em;
  --sk-track-eyebrow:    0.22em;

  /* ---------- Transitions ---------- */
  --sk-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --sk-ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --sk-dur-fast:   0.18s;
  --sk-dur:        0.28s;
  --sk-dur-slow:   0.6s;
  --sk-dur-reveal: 0.9s;
}

html, body {
  font-family: var(--sk-font-ui);
  color: var(--sk-ink-900);
  background: var(--sk-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}