/* =============================================================
   connexions — design tokens
   v2.0.0 · Brand kit values + legacy aliases for our component CSS
   Source of truth: brand kit tokens.json
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* ====== BRAND COLOURS — canonical ====== */
  --cx-color-wine:        #7A162C;
  --cx-color-orange:      #F5953A;
  --cx-color-cream:       #FBF7F2;
  --cx-color-wine-deep:   #5C0F1F;
  --cx-color-wine-bright: #A02038;
  --cx-color-orange-warm: #F8B05E;
  --cx-color-orange-deep: #D17820;
  --cx-color-blush:       #F8E4D5;
  --cx-color-bone:        #F4ECE0;
  --cx-color-char:        #1F1416;
  --cx-color-warm-gray:   #8A7C7E;

  /* ====== Semantic ====== */
  --cx-bg:           var(--cx-color-cream);
  --cx-bg-elevated:  #FFFFFF;
  --cx-bg-subtle:    var(--cx-color-bone);
  --cx-bg-inverse:   var(--cx-color-wine);
  --cx-bg-info:      var(--cx-color-blush);
  --cx-text-primary: var(--cx-color-char);
  --cx-text-brand:   var(--cx-color-wine);
  --cx-text-muted:   var(--cx-color-warm-gray);
  --cx-text-inverse: var(--cx-color-cream);
  --cx-text-accent:  var(--cx-color-orange-deep);
  --cx-border:       rgba(31, 20, 22, 0.18);
  --cx-border-soft:  rgba(31, 20, 22, 0.08);
  --cx-accent:       var(--cx-color-orange);
  --cx-focus:        var(--cx-color-orange);

  /* ====== LEGACY ALIASES — keep our component CSS working ====== */
  --cx-midnight:    var(--cx-color-wine);
  --cx-midnight-2:  var(--cx-color-wine-deep);
  --cx-parchment:   var(--cx-color-cream);
  --cx-parchment-2: var(--cx-color-bone);
  --cx-ember:       var(--cx-color-orange-deep);   /* for orange text on cream — AA passes */
  --cx-ember-soft:  var(--cx-color-orange-warm);
  --cx-ink:         var(--cx-color-char);
  --cx-stone:       var(--cx-color-warm-gray);
  --cx-mist:        var(--cx-color-warm-gray);
  --cx-halo:        var(--cx-color-cream);
  --cx-mint:        var(--cx-color-warm-gray);
  --cx-text:        var(--cx-color-char);

  /* ====== Typography ====== */
  --cx-font-display: 'Fraunces', 'Times New Roman', serif;
  --cx-font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --cx-font-body:    var(--cx-font-sans);     /* legacy alias */
  --cx-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --cx-text-xs:   11px;
  --cx-text-sm:   13px;
  --cx-text-base: 16px;
  --cx-text-lg:   20px;
  --cx-text-xl:   28px;
  --cx-text-2xl:  42px;
  --cx-text-3xl:  64px;
  --cx-text-4xl:  92px;
  --cx-text-5xl:  168px;

  --cx-tracking-tightest: -0.04em;
  --cx-tracking-tighter:  -0.03em;
  --cx-tracking-tight:    -0.025em;
  --cx-tracking-snug:     -0.02em;
  --cx-tracking-normal:    0;
  --cx-tracking-wide:      0.04em;
  --cx-tracking-wider:     0.18em;
  --cx-tracking-widest:    0.28em;

  --cx-leading-none:   1;
  --cx-leading-tight:  1.1;
  --cx-leading-snug:   1.3;
  --cx-leading-normal: 1.55;
  --cx-leading-loose:  1.7;

  /* ====== Spacing — brand kit scale ====== */
  --cx-space-1:  4px;
  --cx-space-2:  8px;
  --cx-space-3:  14px;
  --cx-space-4:  18px;
  --cx-space-5:  24px;
  --cx-space-6:  32px;
  --cx-space-7:  48px;
  --cx-space-8:  64px;
  --cx-space-9:  96px;
  --cx-space-10: 120px;

  /* legacy aliases for our existing styles */
  --cx-1: var(--cx-space-1);
  --cx-2: var(--cx-space-2);
  --cx-3: var(--cx-space-3);
  --cx-4: var(--cx-space-4);
  --cx-5: var(--cx-space-5);
  --cx-6: var(--cx-space-6);
  --cx-7: var(--cx-space-7);
  --cx-8: var(--cx-space-8);
  --cx-9: var(--cx-space-9);
  --cx-10: var(--cx-space-10);
  --cx-11: 192px;

  /* layout widths */
  --cx-wrap: 1200px;
  --cx-wrap-tight: 1080px;
  --cx-wrap-narrow: 720px;

  /* ====== Radius ====== */
  --cx-radius-none: 0;
  --cx-radius-sm:   4px;
  --cx-radius-md:   6px;
  --cx-radius-lg:   12px;
  --cx-radius-pill: 999px;

  /* ====== Shadows ====== */
  --cx-shadow-card:  0 30px 60px -30px rgba(31, 20, 22, 0.35);
  --cx-shadow-deep:  0 40px 80px -20px rgba(31, 20, 22, 0.50);
  --cx-shadow-focus: 0 0 0 3px rgba(245, 149, 58, 0.40);

  /* ====== Motion ====== */
  --cx-duration-fast:  180ms;
  --cx-duration-base:  320ms;
  --cx-duration-slow:  640ms;
  --cx-duration-rise:  1100ms;
  --cx-duration-pulse: 2400ms;
  --cx-ease-standard:  cubic-bezier(0.2, 0.7, 0.2, 1);
  /* legacy */
  --cx-dur-base: var(--cx-duration-base);
  --cx-dur-rise: var(--cx-duration-rise);
  --cx-dur-fast: var(--cx-duration-fast);
  --cx-shadow-mid: 0 20px 40px -20px rgba(31, 20, 22, 0.30);
  --cx-ease-out: var(--cx-ease-standard);
}

/* =============================================================
   BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cx-bg);
  color: var(--cx-text-primary);
  font-family: var(--cx-font-sans);
  font-weight: 400;
  font-size: var(--cx-text-base);
  line-height: var(--cx-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* =============================================================
   TYPOGRAPHY HELPERS — lowercase by default per brand
   ============================================================= */

.display-1, .display-2, .display-3 {
  font-family: var(--cx-font-display);
  font-weight: 300;
  color: var(--cx-text-brand);
  letter-spacing: var(--cx-tracking-tight);
  font-variation-settings: 'opsz' 144;
  text-transform: lowercase;
  margin: 0;
}
.display-1 { font-size: clamp(56px, 9vw, 132px); line-height: 0.94; letter-spacing: var(--cx-tracking-tightest); }
.display-2 { font-size: clamp(40px, 6vw, 84px);  line-height: 0.98; letter-spacing: var(--cx-tracking-tighter); }
.display-3 { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.04; letter-spacing: var(--cx-tracking-tight); font-variation-settings: 'opsz' 80; }

.display-1 em, .display-2 em, .display-3 em,
.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--cx-color-orange-deep);
}

.eyebrow {
  font-family: var(--cx-font-mono);
  font-size: var(--cx-text-xs);
  letter-spacing: var(--cx-tracking-widest);
  text-transform: lowercase;
  color: var(--cx-text-brand);
  font-weight: 400;
  display: inline-block;
}
.eyebrow--inverse { color: var(--cx-color-orange-warm); }

/* =============================================================
   ANIMATIONS — brand-defined
   ============================================================= */

@keyframes cx-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.cx-rise { animation: cx-rise var(--cx-duration-rise) var(--cx-ease-standard) both; }
.cx-fade { animation: cx-rise var(--cx-duration-rise) var(--cx-ease-standard) both; }

@keyframes cx-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.cx-arc-1 { animation: cx-pulse var(--cx-duration-pulse) ease-in-out infinite; }
.cx-arc-2 { animation: cx-pulse var(--cx-duration-pulse) ease-in-out infinite 0.4s; }
.cx-arc-3 { animation: cx-pulse var(--cx-duration-pulse) ease-in-out infinite 0.8s; }

@keyframes cx-stroke-in {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

::selection { background: var(--cx-color-orange); color: var(--cx-color-wine-deep); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cx-rise, .cx-fade { opacity: 1 !important; transform: none !important; }
  .cx-arc-1, .cx-arc-2, .cx-arc-3 { opacity: 1 !important; }
}