/* Contour brand tokens.
   Colours sampled from the app splash screen. Both landing pages (/ and /2) read from this file. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

/* the same font files the rest of contourplan.com uses (public/fonts) */
@font-face { font-family: "Bethany Elingston"; src: url("/fonts/BethanyElingston.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Contour Playfair"; src: url("/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype"); font-style: italic; font-weight: 100 900; font-display: swap; }

:root {
  /* colour: from the app */
  --ct-blue: #2E8FD7;        /* logo, buttons, links. The only action colour */
  --ct-blue-deep: #1F72B3;   /* button hover and pressed */
  --ct-ink: #101826;         /* headlines */
  --ct-slate: #6C707C;       /* body text */
  --ct-peach: #F2C49C;       /* photo backdrop, warm blocks */
  --ct-white: #FFFFFF;

  /* colour: the softer, feminine lean */
  --ct-cream: #FCF4EC;       /* warm page background */
  --ct-blush: #F6DDD3;       /* soft accent fill, tags, highlights */
  --ct-rose: #C2705B;        /* small accents only: stars, ticks, one word */
  --ct-sky: #EAF4FC;         /* blue tint behind info and quiz picks */
  --ct-line: #EDE4DB;        /* warm hairline */

  /* gradients */
  --ct-glow: linear-gradient(165deg, #FCF4EC 0%, #F8DCC4 55%, #F2C49C 100%);
  --ct-dawn: linear-gradient(135deg, #F6DDD3 0%, #F2C49C 60%, #EAF4FC 100%);

  /* liquid glass */
  --ct-glass: rgba(255, 255, 255, .55);
  --ct-glass-strong: rgba(255, 255, 255, .78);
  --ct-glass-edge: rgba(255, 255, 255, .85);
  --ct-glass-blur: blur(22px) saturate(160%);
  --ct-glass-shadow: 0 10px 40px rgba(16, 24, 38, .08), inset 0 1px 0 rgba(255, 255, 255, .9);

  /* type */
  --ct-serif: "Bethany Elingston", Georgia, serif;
  --ct-logo: "Contour Playfair", Georgia, serif;
  --ct-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;

  /* space */
  --ct-s1: 4px;  --ct-s2: 8px;  --ct-s3: 12px; --ct-s4: 16px; --ct-s5: 24px;
  --ct-s6: 32px; --ct-s7: 48px; --ct-s8: 72px; --ct-s9: 112px;

  /* shape */
  --ct-radius-card: 28px;
  --ct-radius-small: 16px;
  --ct-radius-pill: 999px;
  --ct-shadow: 0 2px 6px rgba(16, 24, 38, .04), 0 12px 32px rgba(16, 24, 38, .06);
}

/* type scale */
.ct-display { font: 400 76px/0.98 var(--ct-serif); letter-spacing: -0.025em; color: var(--ct-ink); margin: 0; text-wrap: balance; }
.ct-h1 { font: 400 52px/1.02 var(--ct-serif); letter-spacing: -0.02em; color: var(--ct-ink); margin: 0; text-wrap: balance; }
.ct-h2 { font: 400 36px/1.08 var(--ct-serif); letter-spacing: -0.015em; color: var(--ct-ink); margin: 0; text-wrap: balance; }
.ct-h3 { font: 600 18px/1.35 var(--ct-sans); color: var(--ct-ink); margin: 0; text-wrap: balance; }
.ct-lead { font: 400 20px/1.5 var(--ct-sans); color: var(--ct-slate); margin: 0; text-wrap: balance; }
.ct-body { font: 400 16px/1.6 var(--ct-sans); color: var(--ct-slate); margin: 0; text-wrap: pretty; }
.ct-small { font: 400 14px/1.5 var(--ct-sans); color: var(--ct-slate); margin: 0; text-wrap: pretty; }
.ct-label { font: 600 12px/1 var(--ct-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ct-rose); margin: 0; }
.ct-em { font-family: var(--ct-serif); font-style: italic; }
.ct-wordmark { font: italic 400 1em/1 var(--ct-logo); color: var(--ct-blue); letter-spacing: -0.0125em; }
/* the logo thins out letter by letter: C 800, o 700, n 600, t 600, o 500, u 400, r 400 */
.ct-wordmark span:nth-child(1) { font-weight: 800; }
.ct-wordmark span:nth-child(2) { font-weight: 700; }
.ct-wordmark span:nth-child(3), .ct-wordmark span:nth-child(4) { font-weight: 600; }
.ct-wordmark span:nth-child(5) { font-weight: 500; }

@media (max-width: 560px) {
  .ct-display { font-size: 48px; }
  .ct-h1 { font-size: 38px; }
  .ct-h2 { font-size: 30px; }
  .ct-lead { font-size: 18px; }
}

/* buttons */
.ct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 32px; border-radius: var(--ct-radius-pill); font: 600 17px/1 var(--ct-sans); text-decoration: none; border: 0; cursor: pointer; transition: background .2s, transform .2s; }
.ct-btn-primary { background: var(--ct-blue); color: var(--ct-white); box-shadow: 0 8px 24px rgba(46, 143, 215, .28); }
.ct-btn-primary:hover { background: var(--ct-blue-deep); transform: translateY(-1px); }
.ct-btn-glass { background: var(--ct-glass); color: var(--ct-ink); backdrop-filter: var(--ct-glass-blur); -webkit-backdrop-filter: var(--ct-glass-blur); box-shadow: var(--ct-glass-shadow); border: 1px solid var(--ct-glass-edge); }
.ct-btn-glass:hover { background: var(--ct-glass-strong); }

/* surfaces */
.ct-card { background: var(--ct-white); border: 1px solid var(--ct-line); border-radius: var(--ct-radius-card); box-shadow: var(--ct-shadow); }
.ct-glass { background: var(--ct-glass); backdrop-filter: var(--ct-glass-blur); -webkit-backdrop-filter: var(--ct-glass-blur); border: 1px solid var(--ct-glass-edge); border-radius: var(--ct-radius-card); box-shadow: var(--ct-glass-shadow); }
.ct-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: var(--ct-radius-pill); background: var(--ct-blush); color: var(--ct-ink); font: 500 13px/1 var(--ct-sans); }