/* ============================================
   Teocalli Guesthouse — design tokens

   Source of truth: the Claude Design project
   "CB Guesthouse Design System" (tokens/colors.css,
   typography.css, spacing.css, effects.css, motion.css).
   Keep this file in sync with it; put component rules
   in style.css, not here.
   ============================================ */

/* ---------- Colors ----------
   Sampled from the badge logo (assets/logo.png). The preliminary site used a
   forest green (#2c5f4f); the logo has no green in it, so the palette is now
   badge black + parchment cream + wood brown + cold mountain slate. */
:root {
  /* Base */
  --ink: #121110;             /* badge outline black — text, footer, navbar */
  --ink-soft: #55504a;        /* secondary text, warm grey */
  --cream: #f1ece1;           /* parchment field of the badge — page background */
  --paper: #faf7f0;           /* lighter cream — cards and raised surfaces */
  --white: #ffffff;

  /* Brand accents */
  --wood: #724c36;            /* dark timber of the cabin — primary action colour */
  --wood-hover: #5b3c2b;      /* pressed / hover timber */
  --tan: #b08050;             /* sunlit cedar cladding — highlights, rules, glyphs */
  --lamp: #f0d090;            /* lit window glow — small warm highlights only */
  --slate: #8fa0ae;           /* cold glass and snow shadow */
  --slate-deep: #4a5a66;      /* deep slate — secondary emphasis on cream */

  /* Neutral support */
  --hairline: #e2dbcc;        /* dividers on cream surfaces */
  --footer-bg: #121110;
  --footer-ink: #d6d0c4;
  --footer-ink-dim: #8b857b;
  --img-placeholder: #ddd6c8;
  --hero-fallback: #121110;

  /* Semantic aliases */
  --accent: var(--wood);
  --accent-hover: var(--wood-hover);
  --bg: var(--cream);
  --text-body: var(--ink);
  --text-muted: var(--ink-soft);
  --text-on-accent: var(--paper);
  --text-on-dark: var(--paper);
  --surface-page: var(--cream);
  --surface-card: var(--paper);
  --surface-alt: var(--white);      /* alternating section band */
  --surface-inverse: var(--footer-bg);
  --border-subtle: var(--hairline);
  --brand-primary: var(--ink);      /* the badge itself is black — chrome is black */
  --brand-primary-hover: #2a2724;

  /* Translucent / overlay values */
  --navbar-bg: rgba(18, 17, 16, 0.96);
  --scrim-top: rgba(18, 17, 16, 0.28);
  --scrim-bottom: rgba(18, 17, 16, 0.62);
  --scrim-page-top: rgba(18, 17, 16, 0.38);
  --scrim-page-bottom: rgba(18, 17, 16, 0.66);
  --tint-on-dark: rgba(241, 236, 225, 0.09);
  --rule-on-dark: rgba(241, 236, 225, 0.12);
  --nav-link-idle: rgba(241, 236, 225, 0.55);

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, var(--wood) 0%, var(--wood-hover) 100%);
  --gradient-hero-scrim: linear-gradient(180deg, var(--scrim-top) 0%, var(--scrim-bottom) 100%);
  --gradient-page-scrim: linear-gradient(180deg, var(--scrim-page-top) 0%, var(--scrim-page-bottom) 100%);
}

/* ---------- Typography ----------
   Driven by the badge logo: heavy condensed uppercase display over a warm
   serif body. Fonts load from Google Fonts (linked in each page head). */
:root {
  --font-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;  /* wordmark + headings, always uppercase */
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;                    /* all running copy */
  --font-serif: var(--font-body);
  --font-ui: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Fluid display sizes */
  --text-hero: clamp(2.5rem, 6vw, 5rem);
  --text-hero-sub: clamp(1.1rem, 2.2vw, 1.6rem);
  --text-page-hero: clamp(2.2rem, 5vw, 4rem);
  --text-page-hero-sub: clamp(1rem, 2vw, 1.4rem);
  --text-section-title: clamp(2rem, 4vw, 2.8rem);

  /* Fixed steps */
  --text-cta-h2: 2.4rem;
  --text-card-title: 1.6rem;
  --text-feature-title: 1.4rem;
  --text-cta-body: 1.2rem;
  --text-section-sub: 1.15rem;
  --text-nav: 1.05rem;
  --text-btn-lg: 1.1rem;
  --text-footer-title: 1.1rem;
  --text-body-md: 1rem;
  --text-specs: 0.95rem;
  --text-legal: 0.9rem;
  --text-bullet: 0.85rem;
  --text-eyebrow: 0.6rem;

  /* Weights, leading, tracking */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-body: 1.6;
  --leading-hero: 1.05;
  --tracking-brand: 0.06em;    /* "TEOCALLI" — condensed and slightly open */
  --tracking-display: 0.02em;  /* large uppercase headings */
  --tracking-eyebrow: 0.28em;  /* "GUESTHOUSE" under the wordmark */
  --tracking-specs: 0.1em;     /* uppercase spec lines */
  --tracking-btn: 0.08em;      /* buttons, nav links, tabs */
}

/* ---------- Spacing ---------- */
:root {
  --space-1: 0.4rem;
  --space-2: 0.5rem;
  --space-3: 0.6rem;
  --space-4: 0.75rem;
  --space-5: 1rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 3.5rem;
  --space-11: 4rem;
  --space-12: 5rem;

  --section-y: 5rem;            /* section padding, desktop */
  --section-y-sm: 3.5rem;       /* section padding, <=768px */
  --card-pad: 2rem;
  --gap-grid: 1rem;             /* gallery grid gap */
  --gap-bootstrap-g4: 1.5rem;   /* .row.g-4 gutter */

  --measure-subtitle: 720px;    /* .section-subtitle max-width */
  --measure-hero-copy: 700px;   /* .hero-content p max-width */
  --gallery-col-min: 280px;     /* auto-fill minmax */

  --h-nav-logo: 46px;
  --h-nav-logo-sm: 38px;
  --h-footer-logo: 84px;
  --h-property-img: 280px;
  --h-gallery-img: 260px;
  --h-gallery-img-sm: 220px;
  --h-hero-min: 540px;
  --h-page-hero-min: 400px;
  --size-social: 40px;
  --size-social-icon: 20px;
}

/* ---------- Effects: shadows, radii, blur, borders ---------- */
:root {
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);   /* card at rest */
  --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.12);   /* card hover */
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.18);  /* reserved, modals/overlays */

  --text-shadow-hero: 0 4px 30px rgba(0, 0, 0, 0.6);
  --text-shadow-hero-sub: 0 2px 20px rgba(0, 0, 0, 0.7);

  --radius: 12px;        /* cards, gallery tiles */
  --radius-sm: 0.375rem; /* outline button only — inherited from the preliminary site */
  --radius-pill: 999px;  /* every button and tab */
  --radius-circle: 50%;  /* social buttons */

  --blur-nav: blur(8px);
  --border-tab-width: 2px;
}

/* ---------- Motion ----------
   Short CSS transitions only — no keyframes, no bounce, no spring. */
:root {
  --dur-fast: 0.2s;     /* color, background, small transforms */
  --dur-med: 0.3s;      /* card lift */
  --dur-slow: 0.4s;     /* gallery image zoom */
  --dur-crossfade: 0.6s;/* hero carousel */
  --ease-default: ease;
  --ease-image: ease;
  --lift-card: translateY(-6px);
  --lift-button: translateY(-1px);
  --lift-social: translateY(-2px);
  --zoom-gallery: scale(1.06);
}