/*
Theme Name:  Kalex Cura
Theme URI:   https://www.kalexcura.com
Author:      Kalex Cura
Author URI:  https://www.kalexcura.com
Description: Official WordPress theme for Kalex Cura — a modern Filipino fragrance brand. Quiet luxury, emotional storytelling, minimal editorial design.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kalex-cura
Tags:        fragrance, luxury, minimal, editorial, ecommerce
*/

/* === DESIGN TOKENS === */
:root {
  /* Color Palette */
  --kc-white:    #FFFFFF;
  --kc-ivory:    #FAFAF7;
  --kc-cream:    #F4EFE6;
  --kc-sand:     #EAE2D5;
  --kc-taupe:    #C8BAA8;
  --kc-bronze:   #8B7456;
  --kc-charcoal: #2B2B29;
  --kc-dark:     #1A1A18;
  --kc-muted:    #6A6860;
  --kc-subtle:   #9B9890;

  /* Typography */
  --font-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing Scale (8px base) */
  --sp-1:  0.5rem;    /* 8px  */
  --sp-2:  1rem;      /* 16px */
  --sp-3:  1.5rem;    /* 24px */
  --sp-4:  2rem;      /* 32px */
  --sp-5:  3rem;      /* 48px */
  --sp-6:  4.5rem;    /* 72px */
  --sp-7:  6rem;      /* 96px */
  --sp-8:  9rem;      /* 144px */

  /* Containers */
  --max-w:       1280px;
  --max-w-narrow: 900px;
  --max-w-text:  680px;

  /* Transitions */
  --ease-fast:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-base:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow:   700ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Nav height */
  --nav-h: 76px;
}

/* === GLOBAL RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--kc-charcoal);
  background: var(--kc-ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button { cursor: pointer; border: none; background: none; font-family: inherit; }

ul, ol { list-style: none; }

input, textarea, select {
  font-family: var(--font-sans);
  font-size: inherit;
}

::selection {
  background: var(--kc-sand);
  color: var(--kc-charcoal);
}