/*
Theme Name:   L'Atelier Mata
Theme URI:    https://lateliermata.co.uk
Description:  Custom child theme for L'Atelier Mata — bespoke heirloom dining tables. Built on Salient. Editorial / quiet luxury direction.
Author:       L'Atelier Mata
Author URI:   https://lateliermata.co.uk
Template:     salient
Version:      0.9.10
License:      Proprietary
Text Domain:  lateliermata
*/

/* =========================================================================
   L'ATELIER MATA — DESIGN TOKENS
   The single source of truth for typography, color, spacing, motion.
   Change values here, never inline. Tokens are referenced everywhere via
   CSS custom properties.
   ========================================================================= */

:root {

  /* ---------- Color ----------------------------------------------------- */

  --lm-bone:       #F5F1EA;   /* primary background — warm off-white */
  --lm-bone-deep:  #ECE6DA;   /* alt background, subtle separation */
  --lm-ink:        #1A1A1A;   /* primary text — softened black */
  --lm-ink-mute:   #4A4A4A;   /* secondary text */
  --lm-stone:      #9A8F7E;   /* captions, dividers */
  --lm-walnut:     #3D2817;   /* brand accent */
  --lm-walnut-soft:#5A3F2A;   /* hover variant */
  --lm-gold:       #A8843A;   /* CTA / hover, used sparingly */
  --lm-line:       rgba(26,26,26,0.08); /* hairline rules */

  /* Semantic aliases — refer to these in component CSS so the palette
     can be re-themed without finding-and-replacing across files. */

  --lm-bg:         var(--lm-bone);
  --lm-text:       var(--lm-ink);
  --lm-text-mute:  var(--lm-ink-mute);
  --lm-text-soft:  var(--lm-stone);
  --lm-accent:     var(--lm-walnut);
  --lm-cta:        var(--lm-gold);
  --lm-rule:       var(--lm-line);

  /* ---------- Typography ----------------------------------------------- */

  --lm-font-display: "Cormorant Garamond", "Tiempos Headline", "EB Garamond",
                     Georgia, "Times New Roman", serif;
  --lm-font-body:    "Inter", "Söhne", -apple-system, BlinkMacSystemFont,
                     "Helvetica Neue", Arial, sans-serif;
  --lm-font-mono:    "JetBrains Mono", "SF Mono", "Menlo", monospace;

  /* Modular type scale — base 16px, ratio 1.25 (major third). Display
     headings use a steeper ratio for editorial impact. */

  --lm-fs-xs:    0.75rem;   /* 12px — micro labels, captions */
  --lm-fs-sm:    0.875rem;  /* 14px — small UI */
  --lm-fs-base:  1rem;      /* 16px — body */
  --lm-fs-md:    1.125rem;  /* 18px — lead paragraph */
  --lm-fs-lg:    1.5rem;    /* 24px — H4 / pull quotes */
  --lm-fs-xl:    2.25rem;   /* 36px — H3 */
  --lm-fs-2xl:   3.5rem;    /* 56px — H2 */
  --lm-fs-3xl:   5rem;      /* 80px — H1, hero */
  --lm-fs-display: 7rem;    /* 112px — oversized editorial display */

  /* Line height — body generous, display tight */
  --lm-lh-tight:  1.05;
  --lm-lh-snug:   1.2;
  --lm-lh-base:   1.65;
  --lm-lh-loose:  1.85;

  /* Letter spacing — uppercase eyebrow labels need a kick */
  --lm-tracking-tight:  -0.02em;
  --lm-tracking-normal: 0;
  --lm-tracking-wide:   0.08em;
  --lm-tracking-eyebrow:0.18em;

  /* ---------- Spacing scale -------------------------------------------- */
  /* 4px base unit. Use these tokens, never magic numbers. */

  --lm-s-1:   0.25rem;   /* 4 */
  --lm-s-2:   0.5rem;    /* 8 */
  --lm-s-3:   0.75rem;   /* 12 */
  --lm-s-4:   1rem;      /* 16 */
  --lm-s-5:   1.5rem;    /* 24 */
  --lm-s-6:   2rem;      /* 32 */
  --lm-s-7:   3rem;      /* 48 */
  --lm-s-8:   4rem;      /* 64 */
  --lm-s-9:   6rem;      /* 96 */
  --lm-s-10:  8rem;      /* 128 */
  --lm-s-11: 12rem;      /* 192 — hero vertical rhythm */

  /* ---------- Layout --------------------------------------------------- */

  --lm-container:      1440px;
  --lm-container-text: 720px;     /* long-form prose */
  --lm-gutter:         max(1.5rem, 4vw);

  /* ---------- Motion --------------------------------------------------- */
  /* Restrained — luxury moves slowly. */

  --lm-ease:        cubic-bezier(.2,.6,.2,1);
  --lm-dur-fast:    180ms;
  --lm-dur-base:    320ms;
  --lm-dur-slow:    600ms;

  /* ---------- Elevation ------------------------------------------------ */
  /* We do not use drop shadows. Hairlines and color contrast only. */

  --lm-rule-thin:  1px solid var(--lm-rule);
}

/* =========================================================================
   GLOBAL RESET & BASELINE
   Salient ships heavy base styles. We override at the body level and
   cascade down. Aggressive but contained — never use !important here.
   Component-specific overrides live in their own files.
   ========================================================================= */

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
body.no-js {
  background: var(--lm-bg);
  color: var(--lm-text);
  font-family: var(--lm-font-body);
  font-size: var(--lm-fs-base);
  line-height: var(--lm-lh-base);
  font-weight: 400;
  letter-spacing: var(--lm-tracking-normal);
  -webkit-font-feature-settings: "kern", "liga", "calt";
          font-feature-settings: "kern", "liga", "calt";
}

/* Headings — editorial serif, tight leading, weight 400 (NOT bold) */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--lm-font-display) !important;
  font-weight: 400 !important;       /* serif at 400 reads more refined */
  line-height: var(--lm-lh-tight) !important;
  letter-spacing: var(--lm-tracking-tight) !important;
  color: var(--lm-text);
  margin: 0 0 var(--lm-s-5);
  /* !important needed: Salient's skin stylesheets target headings with
     selector chains higher-specificity than plain h1..h6. We win the
     base treatment globally; component-level overrides come later. */
}

h1 { font-size: clamp(2.75rem, 6vw, var(--lm-fs-3xl)); }
h2 { font-size: clamp(2rem, 4.5vw, var(--lm-fs-2xl)); }
h3 { font-size: clamp(1.5rem, 3vw, var(--lm-fs-xl)); }
h4 { font-size: var(--lm-fs-lg); }
h5 { font-size: var(--lm-fs-md); }
h6 {
  font-family: var(--lm-font-body);
  font-size: var(--lm-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--lm-tracking-eyebrow);
  color: var(--lm-text-soft);
}

p {
  margin: 0 0 var(--lm-s-5);
  max-width: 65ch;          /* readable measure */
}

p.lm-lead {
  font-size: var(--lm-fs-md);
  line-height: var(--lm-lh-loose);
  color: var(--lm-text-mute);
  max-width: 60ch;
}

/* Links — subdued, no underline by default, walnut accent */

a {
  color: var(--lm-accent);
  text-decoration: none;
  transition: color var(--lm-dur-fast) var(--lm-ease);
}
a:hover { color: var(--lm-cta); }

/* In-prose links get a hairline underline so they don't disappear */
.lm-prose a,
article a {
  border-bottom: 1px solid currentColor;
}

/* Lists — strip Salient's default bullet styling */
ul, ol {
  margin: 0 0 var(--lm-s-5);
  padding-left: 1.25em;
}

/* Images — full-width responsive by default */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Selection — match brand */
::selection {
  background: var(--lm-walnut);
  color: var(--lm-bone);
}

/* =========================================================================
   LAYOUT PRIMITIVES
   Reusable containers, grids, and rhythm helpers.
   ========================================================================= */

.lm-container {
  width: 100%;
  max-width: var(--lm-container);
  margin: 0 auto;
  padding-left: var(--lm-gutter);
  padding-right: var(--lm-gutter);
}

.lm-container--narrow {
  max-width: var(--lm-container-text);
}

/* Vertical rhythm utility — section padding */
.lm-section       { padding-top: var(--lm-s-9); padding-bottom: var(--lm-s-9); }
.lm-section--lg   { padding-top: var(--lm-s-11); padding-bottom: var(--lm-s-11); }
.lm-section--sm   { padding-top: var(--lm-s-7); padding-bottom: var(--lm-s-7); }

/* Hairline rule — used between sections instead of borders/shadows */
.lm-rule { border: 0; border-top: var(--lm-rule-thin); margin: 0; }

/* Eyebrow label — small uppercase preceder above headings */
.lm-eyebrow {
  display: block;
  font-family: var(--lm-font-body);
  font-size: var(--lm-fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--lm-tracking-eyebrow);
  color: var(--lm-text-soft);
  margin-bottom: var(--lm-s-4);
}

/* =========================================================================
   COMPONENTS — MINIMAL FIRST PASS
   We're starting with primitives. Component CSS gets split into
   /assets/css/components/* as the build progresses.
   ========================================================================= */

/* Buttons — no rounded corners, no shadows, generous padding */

.lm-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--lm-s-3);
  font-family: var(--lm-font-body);
  font-size: var(--lm-fs-sm);
  font-weight: 500;
  letter-spacing: var(--lm-tracking-wide);
  text-transform: uppercase;
  color: var(--lm-bone);
  background: var(--lm-ink);
  padding: var(--lm-s-4) var(--lm-s-6);
  border: 1px solid var(--lm-ink);
  cursor: pointer;
  transition:
    background var(--lm-dur-base) var(--lm-ease),
    color var(--lm-dur-base) var(--lm-ease),
    border-color var(--lm-dur-base) var(--lm-ease);
}

.lm-btn:hover {
  background: transparent;
  color: var(--lm-ink);
  border-color: var(--lm-ink);
}

.lm-btn--ghost {
  background: transparent;
  color: var(--lm-ink);
  border-color: var(--lm-ink);
}
.lm-btn--ghost:hover {
  background: var(--lm-ink);
  color: var(--lm-bone);
}

/* Pull quote / large editorial statement */
.lm-pullquote {
  font-family: var(--lm-font-display);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  line-height: 1.15;
  letter-spacing: var(--lm-tracking-tight);
  font-style: italic;
  color: var(--lm-text);
  margin: var(--lm-s-9) auto;
  max-width: 28ch;
}

/* =========================================================================
   SALIENT OVERRIDES
   Targeted resets to neutralise Salient defaults that fight our system.
   Add specificity only as needed. Avoid !important — fix at root if hit.
   ========================================================================= */

/* Salient wraps everything in #ajax-content-wrap; reset its default font */
#ajax-content-wrap,
.container-wrap,
#footer-outer {
  font-family: var(--lm-font-body);
  color: var(--lm-text);
  background: var(--lm-bg);
}

/* Salient's H1 is hot pink in some skins. Kill it. */
h1, h2, h3, h4, h5, h6 { color: var(--lm-text) !important; } /* TEMP — remove once Salient skin is set to "ascend" or custom */

/* =========================================================================
   ACCESSIBILITY
   ========================================================================= */

/* Focus ring — visible, on-brand, never removed */
*:focus-visible {
  outline: 2px solid var(--lm-cta);
  outline-offset: 3px;
}

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

/* =========================================================================
   END FOUNDATION — v0.1.0
   Next: header.php, footer.php, front-page.php, page templates.
   ========================================================================= */