/* ============================================================
   Jules Transactions — Colors & Type
   Source: julestransactionsbrandguide.lovable.app (v0.2, 2026-05-24)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Sacramento&display=swap');

:root {
  /* --- Color: locked palette (seven hex values) ----------- */
  --ink:           #0B0B0D;  /* Primary text */
  --bay-teal:      #174F4C;  /* Brand anchor */
  --cream:         #F4EFE6;  /* Default background */
  --sand:          #E6DBCC;  /* Surface / accent */
  --muted-coral:   #DF959F;  /* Human accent — one per layout */
  --sage:          #A9B7A6;  /* Supporting tone */
  --bay-wash:      #D8E3E1;  /* Light accent */

  /* --- Color: derived states ------------------------------ */
  --bay-teal-hover:    #0F3D3B;   /* Bay Teal -8% L on hover */
  --bay-teal-active:   #0B2E2C;   /* deeper press state */
  --coral-hover:       #D17F8B;
  --coral-active:      #C26978;

  /* --- Semantic tokens ------------------------------------ */
  --bg:            var(--cream);
  --bg-alt:        var(--sand);
  --bg-reverse:    var(--bay-teal);

  --fg-1:          var(--ink);                       /* primary text */
  --fg-2:          rgba(11, 11, 13, 0.72);           /* secondary text */
  --fg-3:          rgba(11, 11, 13, 0.55);           /* tertiary / captions */
  --fg-eyebrow:    rgba(11, 11, 13, 0.60);           /* section labels */
  --fg-on-teal:    var(--cream);

  --accent:        var(--bay-teal);                  /* default headline accent */
  --accent-warm:   var(--muted-coral);               /* one-per-layout warmth */
  --accent-soft:   var(--sage);
  --accent-wash:   var(--bay-wash);

  --rule:          rgba(11, 11, 13, 0.12);           /* hairline separators */
  --rule-strong:   var(--bay-teal);

  /* --- Type families -------------------------------------- */
  --font-display:  "Playfair Display", "Iowan Old Style", "Palatino", Georgia, serif;
  --font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-script:   "Sacramento", "Snell Roundhand", "Apple Chancery", cursive;

  /* --- Type scale (locked) -------------------------------- */
  --fs-display:    64px;
  --fs-h1:         48px;
  --fs-h2:         32px;
  --fs-h3:         22px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-eyebrow:    12px;
  --fs-caption:    13px;

  --lh-display:    1.05;
  --lh-heading:    1.15;
  --lh-body:       1.6;
  --lh-tight:      1.3;

  --tracking-eyebrow: 0.18em;
  --tracking-caps:    0.08em;

  /* --- Spacing scale (8px base) --------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* --- Radii ---------------------------------------------- */
  --r-sm:   4px;     /* buttons, inputs */
  --r-md:   8px;     /* cards */
  --r-pill: 999px;   /* tags, status chips */

  /* --- Elevation (used sparingly) ------------------------- */
  --shadow-soft:  0 1px 2px rgba(11, 11, 13, 0.04),
                  0 8px 24px rgba(11, 11, 13, 0.06);
  --shadow-hover: 0 2px 4px rgba(11, 11, 13, 0.05),
                  0 16px 40px rgba(11, 11, 13, 0.08);

  /* --- Motion --------------------------------------------- */
  --ease:        cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-quick:   160ms;
  --dur-base:    240ms;
  --dur-slow:    320ms;

  /* --- Layout --------------------------------------------- */
  --content-max:  1120px;
  --gutter:       64px;
}

/* ============================================================
   Base typography
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic typography classes
   Use these directly OR scope under .jt-prose for block content.
   ============================================================ */

.jt-display,
h1.jt-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.jt-h1, h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

.jt-h2, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg-1);
}

.jt-h3, h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}

.jt-body-lg, p.jt-body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.jt-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.jt-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-eyebrow);
  line-height: 1;
}

.jt-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--fg-3);
}

.jt-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: var(--fg-1);
}

/* ============================================================
   Brand-specific utility classes
   ============================================================ */

/* Section number eyebrow: "01 · Founding" */
.jt-section-num {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-eyebrow);
}

/* Hairline rule under a section number */
.jt-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--sp-4) 0 var(--sp-5);
}

/* Reverse mode: light on bay teal */
.jt-reverse {
  background: var(--bay-teal);
  color: var(--fg-on-teal);
}
.jt-reverse h1, .jt-reverse h2, .jt-reverse h3,
.jt-reverse .jt-display, .jt-reverse p, .jt-reverse .jt-body,
.jt-reverse .jt-body-lg { color: var(--fg-on-teal); }
.jt-reverse .jt-eyebrow,
.jt-reverse .jt-section-num { color: rgba(244, 239, 230, 0.65); }
.jt-reverse .jt-rule { border-top-color: rgba(244, 239, 230, 0.2); }

/* Buttons — primary (Bay Teal) */
.jt-btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 14px 24px;
  border-radius: var(--r-sm);
  border: 0;
  cursor: pointer;
  background: var(--bay-teal);
  color: var(--cream);
  transition: background var(--dur-quick) var(--ease),
              transform var(--dur-quick) var(--ease);
}
.jt-btn:hover { background: var(--bay-teal-hover); transform: translateY(-1px); }
.jt-btn:active { background: var(--bay-teal-active); transform: scale(0.98); }

/* Buttons — warm (Muted Coral). Use sparingly. */
.jt-btn--warm {
  background: var(--muted-coral);
  color: var(--ink);
}
.jt-btn--warm:hover { background: var(--coral-hover); }
.jt-btn--warm:active { background: var(--coral-active); }

/* Buttons — quiet (outlined) */
.jt-btn--quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.jt-btn--quiet:hover {
  background: var(--ink);
  color: var(--cream);
}

/* Tag / pill — sparing use */
.jt-tag {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--bay-wash);
  color: var(--bay-teal);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Card */
.jt-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--sp-7);
}
.jt-card--sand { background: var(--sand); }
.jt-card--elevated {
  border-color: transparent;
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.jt-card--elevated:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* Link */
a, .jt-link {
  color: var(--bay-teal);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-quick) var(--ease);
}
a:hover, .jt-link:hover { color: var(--bay-teal-hover); }

/* Pull-quote */
.jt-pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.35;
  color: var(--fg-1);
  border-left: 2px solid var(--bay-teal);
  padding-left: var(--sp-5);
  margin: var(--sp-7) 0;
}

/* Container */
.jt-container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 720px) {
  .jt-container { padding: 0 var(--sp-5); }
  :root {
    --fs-display: 44px;
    --fs-h1: 34px;
    --fs-h2: 26px;
    --gutter: 24px;
  }
}