/* =============================================================================
   THEME: C2 "SOFT GRADIENT" with Figtree + Fraunces
   -----------------------------------------------------------------------------
   The ONLY file that decides how the site looks (site.css uses these tokens).
   Based on design-options/themes/c2-gradient.css, chosen by the founder:
   blurred pastel shapes (peach, lilac, mint), frosted-glass cards, a deep
   violet accent and a coral highlight.

   Fonts (self-hosted, SIL OFL 1.1, licences next to the files):
     - Figtree (variable, 19 KB) for body and UI text
     - Fraunces (variable, SOFT axis, 62 KB) for headings, prices and stats
   They replace C2's original Bricolage Grotesque + Plus Jakarta Sans.

   Contrast (WCAG AA): run `npm run design:contrast`. The row "Site placeholder
   (current)" is THIS file. Two tokens exist only for that check:
     --color-blob-check  = the worst-case colour behind text over the blobs:
                           two blobs overlapping at peak opacity on top of the
                           page gradient (light: peach + lilac; dark: coral + mint).
     --color-glass-check = the worst-case colour behind text on frosted glass or
                           the CTA band (glass over the same two blobs, backdrop
                           saturate(140%), then the CTA gradient stop on top).
   If you change a blob colour, its opacity or the glass alpha, recompute them.
   ============================================================================= */

@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/fonts/figtree/figtree-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/fraunces/fraunces-latin-soft-normal.woff2") format("woff2"); }

:root {
  /* Typography: Fraunces is a display serif, so headings sit a little lighter
     and looser than C2's grotesque; Figtree runs slightly larger x-height, so
     body leading stays generous. */
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-base: 1.0625rem;
  --leading: 1.65;
  --heading-weight: 580;
  --heading-tracking: -0.012em;
  --heading-leading: 1.12;
  --h1-size: clamp(2.25rem, 1.4rem + 3.1vw, 3.6rem);
  --h2-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --h3-size: 1.22rem;
  --eyebrow-font: var(--font-body);
  --eyebrow-size: 0.85rem;
  --eyebrow-weight: 650;
  --eyebrow-transform: none;
  --eyebrow-tracking: 0.01em;

  /* Shape */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --button-radius: 999px;
  --border-width: 1px;

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2.5rem; --space-7: 4.75rem; --space-8: 7rem;
  --container: 72rem;
  --container-narrow: 46rem;
  --gutter: 1.25rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(36 31 34 / 0.05);
  --shadow: 0 10px 30px rgb(74 61 156 / 0.08);
  --card-shadow: 0 1px 1px rgb(36 31 34 / 0.03), 0 14px 36px rgb(74 61 156 / 0.08);
  --lift-shadow: 0 22px 48px rgb(74 61 156 / 0.16);

  /* Glass and blobs */
  --glass-bg: rgb(255 255 255 / 0.62);
  --glass-border: rgb(255 255 255 / 0.85);
  --blob-1: #f8c8a8;
  --blob-2: #d6c8f5;
  --blob-3: #bfe6d6;
  --blob-opacity: 0.7;
  --page-bg-image:
    radial-gradient(38rem 30rem at 8% 34%, rgb(214 200 245 / 0.32), transparent 70%),
    radial-gradient(40rem 32rem at 95% 52%, rgb(191 230 214 / 0.34), transparent 70%),
    radial-gradient(36rem 28rem at 15% 78%, rgb(248 200 168 / 0.28), transparent 70%);
  --page-bg-size: 100% 100%;
  --hero-bg: transparent;
  /* Inner pages: two soft washes at the top of the page title area only. */
  --hero-bg-image:
    radial-gradient(30rem 16rem at 92% 0%, rgb(214 200 245 / 0.5), transparent 70%),
    radial-gradient(24rem 14rem at 2% 10%, rgb(248 200 168 / 0.4), transparent 70%);
  --hero-border: none;
  --section-alt-border: none;
  --cta-bg-image: linear-gradient(120deg, rgb(248 200 168 / 0.55), rgb(214 200 245 / 0.55) 55%, rgb(191 230 214 / 0.55));

  /* Colors: light */
  --color-bg: #faf7f5;
  --color-surface: #ffffff;
  --color-surface-alt: #f4eff2;
  --color-glass-check: #e4d7f6;
  --color-blob-check: #dfcbe5;
  --color-text: #241f22;
  --color-text-muted: #574e55;
  --color-border: #e6dfe6;
  --color-border-strong: #8a8190;
  --color-accent: #4a3d9c;
  --color-accent-hover: #3a2f80;
  --color-on-accent: #ffffff;
  --color-accent-soft: #ece8f8;
  --color-link: #4a3d9c;
  --color-focus: #4a3d9c;
  --color-highlight: #b9472f;
  --color-on-highlight: #ffffff;
  --color-header-bg: #faf7f5;
  --color-code-bg: #f4eff2;
  --color-success: #2a6a3c;
  --color-success-bg: #eaf4ec;
  --color-warning: #7d4a0c;
  --color-warning-bg: #fbf0dc;
  --color-danger: #a3301f;
  --color-danger-bg: #fbebe7;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-bg: rgb(32 27 44 / 0.58);
    --glass-border: rgb(255 255 255 / 0.10);
    --blob-1: #8a4b3a;
    --blob-2: #4b3c8c;
    --blob-3: #2d6b5a;
    --blob-opacity: 0.4;
    --page-bg-image:
      radial-gradient(38rem 30rem at 8% 34%, rgb(75 60 140 / 0.28), transparent 70%),
      radial-gradient(40rem 32rem at 95% 52%, rgb(45 107 90 / 0.22), transparent 70%),
      radial-gradient(36rem 28rem at 15% 78%, rgb(138 75 58 / 0.20), transparent 70%);
    --hero-bg-image:
      radial-gradient(30rem 16rem at 92% 0%, rgb(75 60 140 / 0.4), transparent 70%),
      radial-gradient(24rem 14rem at 2% 10%, rgb(138 75 58 / 0.3), transparent 70%);
    --cta-bg-image: linear-gradient(120deg, rgb(138 75 58 / 0.35), rgb(75 60 140 / 0.35) 55%, rgb(45 107 90 / 0.35));
    --card-shadow: none;
    --shadow-sm: none;
    --shadow: none;
    --lift-shadow: 0 22px 48px rgb(0 0 0 / 0.5);
    --color-bg: #121019;
    --color-surface: #1b1824;
    --color-surface-alt: #17141f;
    --color-glass-check: #2b4441;
    --color-blob-check: #3c4a40;
    --color-text: #f3f0f8;
    --color-text-muted: #c2bccf;
    --color-border: #2e2a3a;
    --color-border-strong: #77708a;
    --color-accent: #b3a8f5;
    --color-accent-hover: #cdc5fa;
    --color-on-accent: #1a1440;
    --color-accent-soft: #241f3a;
    --color-link: #c7befa;
    --color-focus: #c7befa;
    --color-highlight: #f29880;
    --color-on-highlight: #2a0f08;
    --color-header-bg: #121019;
    --color-code-bg: #1f1b2b;
    --color-success: #8fd3a1;
    --color-success-bg: #15261a;
    --color-warning: #f0c070;
    --color-warning-bg: #2b2214;
    --color-danger: #f29c8a;
    --color-danger-bg: #2e1915;
  }
}

:root[data-theme="dark"] {
  --glass-bg: rgb(32 27 44 / 0.58);
  --glass-border: rgb(255 255 255 / 0.10);
  --blob-1: #8a4b3a;
  --blob-2: #4b3c8c;
  --blob-3: #2d6b5a;
  --blob-opacity: 0.4;
  --page-bg-image:
    radial-gradient(38rem 30rem at 8% 34%, rgb(75 60 140 / 0.28), transparent 70%),
    radial-gradient(40rem 32rem at 95% 52%, rgb(45 107 90 / 0.22), transparent 70%),
    radial-gradient(36rem 28rem at 15% 78%, rgb(138 75 58 / 0.20), transparent 70%);
  --hero-bg-image:
    radial-gradient(30rem 16rem at 92% 0%, rgb(75 60 140 / 0.4), transparent 70%),
    radial-gradient(24rem 14rem at 2% 10%, rgb(138 75 58 / 0.3), transparent 70%);
  --cta-bg-image: linear-gradient(120deg, rgb(138 75 58 / 0.35), rgb(75 60 140 / 0.35) 55%, rgb(45 107 90 / 0.35));
  --card-shadow: none;
  --shadow-sm: none;
  --shadow: none;
  --lift-shadow: 0 22px 48px rgb(0 0 0 / 0.5);
  --color-bg: #121019;
  --color-surface: #1b1824;
  --color-surface-alt: #17141f;
  --color-glass-check: #2b4441;
  --color-blob-check: #3c4a40;
  --color-text: #f3f0f8;
  --color-text-muted: #c2bccf;
  --color-border: #2e2a3a;
  --color-border-strong: #77708a;
  --color-accent: #b3a8f5;
  --color-accent-hover: #cdc5fa;
  --color-on-accent: #1a1440;
  --color-accent-soft: #241f3a;
  --color-link: #c7befa;
  --color-focus: #c7befa;
  --color-highlight: #f29880;
  --color-on-highlight: #2a0f08;
  --color-header-bg: #121019;
  --color-code-bg: #1f1b2b;
  --color-success: #8fd3a1;
  --color-success-bg: #15261a;
  --color-warning: #f0c070;
  --color-warning-bg: #2b2214;
  --color-danger: #f29c8a;
  --color-danger-bg: #2e1915;
}

/* =============================================================================
   Decorative rules for this theme (safe to delete; the site works without them)
   ============================================================================= */

/* Fraunces: soft, rounded serifs; lining figures for prices and stats */
h1, h2, h3, .h2, .h3, .brand-name, .footer-brand, .price-main, .bento-item .stat, .cta-soft h2 {
  font-variation-settings: "SOFT" 100;
  font-optical-sizing: auto;
}
.price-main, .bento-item .stat { font-variant-numeric: lining-nums; }
h1 { font-weight: 560; letter-spacing: -0.018em; }
.brand-name { font-weight: 600; letter-spacing: -0.01em; }
.button, .site-nav a, label, legend, .faq-list summary { font-weight: 600; }

/* Blurred pastel shapes behind the home hero (they drift slowly with motion on) */
.hero-split { --hero-bg-image: none; }
/* Fade the blob layer out towards the bottom so the hero never ends in a hard line */
.hero-bg { -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.hero-bg .blob { display: block; position: absolute; border-radius: 50%; filter: blur(60px); opacity: var(--blob-opacity); }
.hero-bg .b1 { width: 26rem; height: 26rem; right: -4rem; top: -6rem; background: var(--blob-1); }
.hero-bg .b2 { width: 22rem; height: 22rem; right: 18%; bottom: -8rem; background: var(--blob-2); }
.hero-bg .b3 { width: 18rem; height: 18rem; left: -6rem; top: 30%; background: var(--blob-3); }
@keyframes c2-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-18px, 14px); } }
.motion .hero-bg .blob { animation: c2-drift 14s ease-in-out infinite; }
.motion .hero-bg .b2 { animation-duration: 18s; animation-direction: reverse; }

/* Frosted-glass cards */
.card, .bento-item, .price-card, .sample-output, .cta-soft {
  background-color: var(--glass-bg);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.section-alt { background: transparent; }
.site-header {
  background: color-mix(in srgb, var(--color-header-bg) 80%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-footer { background: color-mix(in srgb, var(--color-surface-alt) 85%, transparent); }
.price-card.is-highlight { border: 2px solid var(--color-accent); }
.icon { background: linear-gradient(135deg, var(--color-accent-soft), color-mix(in srgb, var(--color-accent-soft) 60%, var(--blob-1))); }
.ribbon { background: var(--color-highlight); color: var(--color-on-highlight); }
.timeline li::before { background: var(--color-accent); font-family: var(--font-heading); font-variation-settings: "SOFT" 100; }
.steps li::before { font-family: var(--font-heading); font-variation-settings: "SOFT" 100; }
.brand-mark { border-radius: 9px; }

/* No glass where it cannot be drawn (very old browsers): solid surfaces instead */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .bento-item, .price-card, .cta-soft { background-color: var(--color-surface); }
  .sample-output { background-color: var(--color-code-bg); }
  .site-header { background: var(--color-header-bg); }
}