/* ──────────────────────────────────────────────────────────
 * LAUREN VAN BOOM / LAUREL CALLA STUDIOS, Design Tokens
 * Base + semantic CSS variables for color, type, spacing.
 * Import this file in every artifact:
 *   <link rel="stylesheet" href="colors_and_type.css">
 * ────────────────────────────────────────────────────────── */

/* TWO-FONT SYSTEM
 * Cormorant Garamond Light, reserved for display headlines and
 *   the marquee services strip. Italic 300 carries the
 *   terracotta-accent-in-headline signature move.
 * Poppins, the universal sans for everything else: body copy,
 *   UI labels, eyebrows, nav, buttons, metadata. 5 weights loaded.
 */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300&display=swap');

@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ── BASE PALETTE ────────────────────────────────────────
   * Warm, earthbound desert tones. Bark + Terracotta is the
   * heart of the system; Cream/Linen are surfaces; Sand is a
   * neutral; Moss + Sienna are reserved accents.
   */
  --terracotta: #ce8765;   /* PRIMARY accent, CTAs, key UI */
  --cream:      #f3eee3;   /* light fg on dark bg */
  --bark:       #2e2219;   /* dark, dominant ground */
  --clay:       #7a4f35;   /* mid workhorse, sub-text, borders */
  --sand:       #d9c9b2;   /* neutral, rules, soft text */
  --moss:       #6b7355;   /* secondary accent, tags, success */
  --sienna:     #a85c38;   /* deep variant of terracotta */
  --linen:      #faf6ef;   /* paper-white surface for light pages */

  /* Soft tints, computed from the base set, for hover/wash. */
  --terracotta-12: rgba(206, 135, 101, .12);
  --terracotta-22: rgba(206, 135, 101, .22);
  --terracotta-45: rgba(206, 135, 101, .45);
  --bark-55:       rgba(46,  34,  25,  .55);
  --bark-85:       rgba(46,  34,  25,  .85);
  --bark-92:       rgba(46,  34,  25,  .92);
  --sand-08:       rgba(217, 201, 178, .08);
  --sand-20:       rgba(217, 201, 178, .20);
  --cream-08:      rgba(243, 238, 227, .08);
  --cream-65:      rgba(243, 238, 227, .65);

  /* ── SEMANTIC COLOR TOKENS ─────────────────────────────── */
  --bg-page:        var(--bark);
  --bg-page-light:  var(--linen);
  --bg-surface:     #1a110a;
  --bg-card:        #ffffff;
  --bg-card-dark:   rgba(217,201,178,.04);

  --fg-1:           var(--cream);
  --fg-1-light:     var(--bark);
  --fg-2:           var(--sand);
  --fg-3:           rgba(217,201,178,.5);
  --fg-accent:      var(--terracotta);

  --border-soft:    rgba(217,201,178,.10);
  --border-mid:     rgba(217,201,178,.22);
  --border-hairline:rgba(217,201,178,.06);

  /* ── TYPE FAMILIES ─────────────────────────────────────── */
  /* Only two. Cormorant for display + marquee. Poppins for everything else. */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-case:    'Poppins', 'Helvetica Neue', Arial, sans-serif;
  /* Legacy alias for older inline styles that asked for an italic-display quote */
  --font-quote:   var(--font-display);

  /* ── BASE TYPE STYLES ──────────────────────────────────── */
  /* Display headlines (Cormorant Light 300) */
  --display-size:    clamp(42px, 6vw, 88px);
  --display-weight:  300;
  --display-leading: 1.02;
  --display-tracking:-0.01em;

  --h1-size:    clamp(36px, 4.5vw, 64px);
  --h2-size:    clamp(30px, 3.5vw, 48px);
  --h3-size:    clamp(22px, 2.5vw, 32px);

  /* Body (Poppins) */
  --body-size:    16px;
  --body-leading: 1.65;
  --body-weight:  400;

  /* Italic accent (still Cormorant, lives inside display headlines) */
  --italic-size:   24px;

  /* UI / eyebrow / labels (Poppins) */
  --ui-size-xs:    8px;
  --ui-size-sm:    9px;
  --ui-size-md:    11px;
  --ui-tracking:   .22em;
  --ui-tracking-tight: .14em;
  --ui-tracking-wide:  .26em;

  /* ── SPACING & RADII ───────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 80px;
  --space-9: 100px;

  --radius-pill:  50px;
  --radius-card:  14px;
  --radius-soft:  10px;
  --radius-sharp: 2px;
  --radius-circle:50%;

  /* ── SHADOWS ───────────────────────────────────────────── */
  --shadow-1: 0 2px 14px rgba(46,34,25,.09);
  --shadow-2: 0 8px 32px rgba(46,34,25,.16);
  --shadow-3: 0 18px 38px rgba(46,34,25,.22);
  --shadow-cta-hover: 0 14px 40px rgba(206,135,101,.35);

  /* ── MOTION ───────────────────────────────────────────── */
  --ease-out-soft:  cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --ease-bounce:    cubic-bezier(.34, 1.56, .64, 1); /* @kind other */
  --dur-fast:  .2s; /* @kind other */
  --dur-mid:   .35s; /* @kind other */
  --dur-slow:  .8s; /* @kind other */
}

/* ── SEMANTIC TYPE CLASSES ────────────────────────────────
 * Apply these in markup instead of redefining the rules.
 */
.lcs-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--display-size);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
}
.lcs-display em { font-style: italic; color: var(--fg-accent); }

.lcs-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--h1-size);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.lcs-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--h2-size);
  line-height: 1.1;
}
.lcs-h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--h3-size);
  line-height: 1.2;
}
.lcs-h1 em, .lcs-h2 em, .lcs-h3 em { font-style: italic; color: var(--fg-accent); }

.lcs-body {
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: var(--body-leading);
}
/* Italic emphasis inside body copy is Poppins italic (the body font), not Cormorant. */
.lcs-body em { font-style: italic; color: var(--fg-accent); }

/* Pull-quote / oversized italic still goes through display (Cormorant italic) */
.lcs-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--italic-size);
  line-height: 1.6;
}

.lcs-eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--ui-size-sm);
  letter-spacing: var(--ui-tracking-wide);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.lcs-meta {
  font-family: var(--font-ui);
  font-size: var(--ui-size-xs);
  letter-spacing: var(--ui-tracking);
  text-transform: uppercase;
  color: var(--fg-2);
}
.lcs-nav-link {
  font-family: var(--font-ui);
  font-size: var(--ui-size-sm);
  letter-spacing: var(--ui-tracking);
  text-transform: uppercase;
  color: var(--fg-2);
  text-decoration: none;
}
.lcs-nav-link:hover { color: var(--fg-accent); }

.lcs-ui {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: .06em;
}

/* ── GRAIN OVERLAY (the brand's signature texture) ───────
 * Apply to body::before, see VISUAL FOUNDATIONS in README.
 */
.lcs-grain::before {
  content: '';
  position: fixed; inset: 0; z-index: 200;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
  opacity: .6;
}

/* ── WARM GLOW BACKGROUND (hero default) ───────────────── */
.lcs-warm-glow {
  background-color: var(--bark);
  background-image:
    radial-gradient(ellipse 70% 55% at 15% 25%, rgba(206,135,101,.22) 0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 85% 75%, rgba(107,115,85,.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 55% 45%, rgba(122,79,53,.14) 0%, transparent 60%);
}

/* ── HORIZONTAL HAIRLINE DIVIDER ─────────────────────── */
.lcs-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-mid), transparent);
  width: 100%;
}

/* ── ELEMENT BASE (apply to <html> or root container) ─── */
html.lcs, body.lcs {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
}
.lcs *, .lcs *::before, .lcs *::after { box-sizing: border-box; }