/* QuickFlick Design System — colors_and_type.css
 *
 * Two layers:
 *   1. Raw tokens (--qf-*) — never used directly in product code
 *   2. Semantic vars (--ink, --canvas, --h1, etc) — what consumers reference
 *
 * Cal Sans (display) is substituted with Inter weight 600 here. If you have
 * Cal Sans .woff2 files, drop them in fonts/ and uncomment the @font-face
 * block below + flip --font-display to "Cal Sans".
 */

/* ---------- Webfonts ---------- */

/* Inter — body + display fallback */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* Cal Sans — proprietary, drop in fonts/CalSans-SemiBold.woff2 to enable */
/*
@font-face {
  font-family: "Cal Sans";
  src: url("./fonts/CalSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
*/

/* ============================================================
   1. RAW TOKENS
   ============================================================ */

:root {
  /* --- Brand --- */
  --qf-primary:        #111111;  /* primary CTA, h1/h2 */
  --qf-primary-active: #242424;  /* press state */
  --qf-brand-accent:   #3b82f6;  /* inline links, rare highlights */

  /* --- Surface --- */
  --qf-canvas:         #ffffff;  /* default page surface */
  --qf-surface-soft:   #f8f9fa;  /* nav-pill-group bg */
  --qf-surface-card:   #f5f5f5;  /* feature cards, testimonials */
  --qf-surface-dark:   #101010;  /* footer, featured pricing */
  --qf-hairline:       #e5e7eb;  /* 1px borders */

  /* --- Text --- */
  --qf-text-ink:       #111111;  /* headlines, primary text */
  --qf-text-body:      #374151;  /* default running text */
  --qf-text-muted:     #6b7280;  /* sub-headings, breadcrumbs, footer */
  --qf-on-dark:        #ffffff;  /* on dark surface */
  --qf-on-dark-soft:   #a1a1aa;  /* footer body, slightly muted white */

  /* --- Badge pastels --- */
  --qf-badge-orange:   #fb923c;
  --qf-badge-pink:     #ec4899;
  --qf-badge-violet:   #8b5cf6;
  --qf-badge-emerald:  #34d399;

  /* --- Type families --- */
  --qf-font-display:   "Cal Sans", "Inter", system-ui, -apple-system, sans-serif;
  --qf-font-body:      "Inter", system-ui, -apple-system, sans-serif;
  --qf-font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Spacing scale (8-based) --- */
  --qf-space-xxs:  4px;
  --qf-space-xs:   8px;
  --qf-space-sm:   12px;
  --qf-space-md:   16px;
  --qf-space-lg:   24px;
  --qf-space-xl:   32px;
  --qf-space-xxl:  48px;
  --qf-space-section: 96px;

  /* --- Radii --- */
  --qf-radius-xs:  4px;
  --qf-radius-sm:  6px;
  --qf-radius-md:  8px;
  --qf-radius-lg:  12px;
  --qf-radius-xl:  16px;
  --qf-radius-pill: 999px;
  --qf-radius-full: 9999px;

  /* --- Elevation --- */
  --qf-shadow-flat:    none;
  --qf-shadow-soft:    0 1px 2px rgba(0,0,0,0.04);
  --qf-shadow-subtle:  0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --qf-shadow-card:    0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --qf-focus-ring:     0 0 0 3px rgba(17,17,17,0.08);

  /* --- Layout --- */
  --qf-content-max:    1200px;

  /* --- Motion --- */
  --qf-transition-fast: 120ms ease-out;
  --qf-transition:      180ms ease-out;
}

/* ============================================================
   2. SEMANTIC VARS — what product code uses
   ============================================================ */

:root {
  /* Color roles */
  --ink:           var(--qf-text-ink);
  --body:          var(--qf-text-body);
  --muted:         var(--qf-text-muted);
  --canvas:        var(--qf-canvas);
  --surface-soft:  var(--qf-surface-soft);
  --surface-card:  var(--qf-surface-card);
  --surface-dark:  var(--qf-surface-dark);
  --hairline:      var(--qf-hairline);
  --link:          var(--qf-brand-accent);
  --on-dark:       var(--qf-on-dark);
  --on-dark-soft:  var(--qf-on-dark-soft);

  /* Type (font-size / line-height / weight / letter-spacing / family) */
  --display-xl-size: 64px; --display-xl-lh: 1.05; --display-xl-tracking: -2px;
  --display-lg-size: 48px; --display-lg-lh: 1.10; --display-lg-tracking: -1.5px;
  --display-md-size: 36px; --display-md-lh: 1.15; --display-md-tracking: -1px;
  --display-sm-size: 28px; --display-sm-lh: 1.20; --display-sm-tracking: -0.5px;
  --title-lg-size:   22px; --title-lg-lh:   1.30; --title-lg-tracking: -0.3px;
  --title-md-size:   18px; --title-md-lh:   1.40; --title-md-tracking: 0;
  --title-sm-size:   16px; --title-sm-lh:   1.40; --title-sm-tracking: 0;
  --body-md-size:    16px; --body-md-lh:    1.50;
  --body-sm-size:    14px; --body-sm-lh:    1.50;
  --caption-size:    13px; --caption-lh:    1.40;
  --code-size:       14px; --code-lh:       1.50;
  --button-size:     14px;
  --nav-link-size:   14px;
}

/* ============================================================
   3. SEMANTIC TYPE CLASSES — apply directly
   ============================================================ */

.qf-display-xl, h1.qf {
  font-family: var(--qf-font-display);
  font-weight: 600;
  font-size: var(--display-xl-size);
  line-height: var(--display-xl-lh);
  letter-spacing: var(--display-xl-tracking);
  color: var(--ink);
}
.qf-display-lg, h2.qf {
  font-family: var(--qf-font-display);
  font-weight: 600;
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-lh);
  letter-spacing: var(--display-lg-tracking);
  color: var(--ink);
}
.qf-display-md, h3.qf {
  font-family: var(--qf-font-display);
  font-weight: 600;
  font-size: var(--display-md-size);
  line-height: var(--display-md-lh);
  letter-spacing: var(--display-md-tracking);
  color: var(--ink);
}
.qf-display-sm, h4.qf {
  font-family: var(--qf-font-display);
  font-weight: 600;
  font-size: var(--display-sm-size);
  line-height: var(--display-sm-lh);
  letter-spacing: var(--display-sm-tracking);
  color: var(--ink);
}
.qf-title-lg {
  font-family: var(--qf-font-display);
  font-weight: 600;
  font-size: var(--title-lg-size);
  line-height: var(--title-lg-lh);
  letter-spacing: var(--title-lg-tracking);
  color: var(--ink);
}
.qf-title-md {
  font-family: var(--qf-font-display);
  font-weight: 600;
  font-size: var(--title-md-size);
  line-height: var(--title-md-lh);
  color: var(--ink);
}
.qf-title-sm {
  font-family: var(--qf-font-display);
  font-weight: 600;
  font-size: var(--title-sm-size);
  line-height: var(--title-sm-lh);
  color: var(--ink);
}
.qf-body-md, p.qf {
  font-family: var(--qf-font-body);
  font-weight: 400;
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--body);
}
.qf-body-sm {
  font-family: var(--qf-font-body);
  font-weight: 400;
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-lh);
  color: var(--body);
}
.qf-caption {
  font-family: var(--qf-font-body);
  font-weight: 500;
  font-size: var(--caption-size);
  line-height: var(--caption-lh);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.qf-code, code.qf {
  font-family: var(--qf-font-mono);
  font-weight: 400;
  font-size: var(--code-size);
  line-height: var(--code-lh);
  color: var(--ink);
}
.qf-button-label {
  font-family: var(--qf-font-body);
  font-weight: 600;
  font-size: var(--button-size);
  line-height: 1;
}
.qf-nav-link {
  font-family: var(--qf-font-body);
  font-weight: 500;
  font-size: var(--nav-link-size);
  line-height: 1.4;
  color: var(--ink);
}

/* ============================================================
   4. THEME VARS — overridable by the Tweaks panel (Home)
   ============================================================ */
:root {
  --accent:       #0d9488;
  --accent-soft:  #ccfbf1;
  --accent-deep:  #115e59;
  --accent-tint:  #5eead4;
  --grad-word:    linear-gradient(90deg, #d4d4d4 0%, #0d9488 50%, #0a0a0a 100%);
  --canvas:       #e4f2ef;
  --blob-op:      0.6;
  --blob-blur:    95px;
  --grad-dur:     3.6s;
  --pulse-dur:    3s;
  --marquee-dur:  18s;
  --shell:        rgba(255,255,255,0.34);
  --surface:      rgba(255,255,255,0.55);
  --hairline:     rgba(38,36,31,0.12);
}
@keyframes qf-gradient { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes qf-pulse { 0%,100% { opacity:.35 } 50% { opacity:.6 } }
@keyframes qf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.qf-marquee-track { animation: qf-marquee var(--marquee-dur,34s) linear infinite; will-change: transform; }
.qf-grad { animation: qf-gradient var(--grad-dur,7s) ease-in-out infinite; }
.qf-glow { animation: qf-pulse var(--pulse-dur,6s) ease-in-out infinite; }
[data-energy="still"] .qf-marquee-track,
[data-energy="still"] .qf-grad,
[data-energy="still"] .qf-glow { animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; } }

/* Base reset for body */
.qf-root {
  font-family: var(--qf-font-body);
  color: var(--body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}