/* Reused from futuriza/studio, revision 7bc20f19071cfbe42b0dd60effd5dacd3bc355a4.
   globals.css tokens, layout.tsx typography, variant.css viewfinder + square CTA.
   Unlike the generic package Button (pill), Studio landing controls are square. */
@font-face{font-family:Inter;src:url('/fonts/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Oxanium;src:url('/fonts/oxanium.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
:root{
  --color-brand:        #0bd4a1;
  --color-brand-mid:    #25a988;
  --color-brand-deep:   #317f6b;
  --color-brand-forest: #2e544b;
  --color-brand-ink:    #25332f;
  --color-teal: #2f6869;
  --font-inter: Inter;
  --font-oxanium: Oxanium;
  --font-sans: var(--font-inter);
  --font-display: var(--font-oxanium);
  --radius-card: 16px;
  --radius-pill: 9999px;
}
:root {
  --color-accent:         #0bd4a1;
  --color-primary:        #0bd4a1;
  --color-bg-dark:        #0d1512;
  --color-bg-light:       #f5faf8;
  --color-surface:        #111c18;
  --color-surface-raised: #192922;
  --color-surface-page:    #0d1512;
  --color-surface-sidebar: #111c18;
  --color-fg:             #dff3ec;
  --color-fg-muted:       rgba(223, 243, 236, 0.50);
  --color-fg-faint:       rgba(223, 243, 236, 0.25);
  --color-border:         rgba(11, 212, 161, 0.09);
  --color-border-strong:  rgba(11, 212, 161, 0.22);
  --color-btn-primary:    #ffffff;   /* inverted in dark mode */
  --color-btn-primary-fg: #0d0d0d;
  --color-tier-upgrade:   #7c3aed;
  --color-tier-new:       #6366f1;

  --shadow-soft:  0 25px 50px -12px rgba(0,0,0,0.50);
  --shadow-inset: inset 0 2px 4px 0 rgba(0,0,0,0.30);
  --shadow-pill:  0 4px 24px -8px rgba(0,0,0,0.50);

  color-scheme: dark;
}
.light {
  --color-accent:         #0bd4a1;  /* bright mint — original atelier brand */
  --color-primary:        #0bd4a1;
  --color-bg-dark:        #ffffff;
  --color-surface:        #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-page:    #ffffff;
  --color-surface-sidebar: #f2f3f5;
  --color-fg:             #2c333d;   /* hsl(220 9% 20%) */
  --color-fg-muted:       rgba(44, 51, 61, 0.70);
  --color-fg-faint:       rgba(44, 51, 61, 0.45);
  --color-border:         rgba(44, 51, 61, 0.10);
  --color-border-strong:  rgba(44, 51, 61, 0.22);
  --color-btn-primary:    #0d0d0d;   /* near-black CTAs (header credits, etc.) */
  --color-btn-primary-fg: #ffffff;
  --color-tier-upgrade:   #7c3aed;
  --color-tier-new:       #6366f1;

  /* Shadows — match futuriza.io --shadow-soft / --shadow-inset */
  --shadow-soft:  0 25px 50px -12px rgba(0,0,0,0.08);
  --shadow-inset: inset 0 2px 4px 0 rgba(0,0,0,0.05);
  --shadow-pill:  0 4px 24px -8px rgba(0,0,0,0.12);

  color-scheme: light;
}
html,
body {
  background: var(--color-surface-page, var(--color-bg-dark));
  color: var(--color-fg);
  min-height: 100%;
  /* CRITICAL: reference --font-inter DIRECTLY on body, not via @theme.
     Tailwind v4 @theme indirection drops Next/Font vars (known bug). */
  font-family: var(--font-inter), 'Inter', -apple-system, BlinkMacSystemFont,
    'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01';  /* Inter's alt characters for cleaner number rendering */
}

/* Display-level headings use Oxanium with tighter tracking — matches
   futuriza.io's editorial display feel. Same direct-var rule applies. */
.font-display,
h1,
h2 {
  font-family: var(--font-oxanium), 'Oxanium', sans-serif;
  letter-spacing: -0.025em;
}
/* ── Viewfinder corner marks — .lp-frame + child <span class="lp-frame-x"> */
.lp-frame {
  position: relative;
}
.lp-frame-x {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lp-frame::before,
.lp-frame::after,
.lp-frame-x::before,
.lp-frame-x::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--color-accent);
  z-index: 2;
}
.lp-frame::before {
  top: -7px;
  left: -7px;
  border-right: 0;
  border-bottom: 0;
}
.lp-frame::after {
  bottom: -7px;
  right: -7px;
  border-left: 0;
  border-top: 0;
}
.lp-frame-x::before {
  top: -7px;
  right: -7px;
  border-left: 0;
  border-bottom: 0;
}
.lp-frame-x::after {
  bottom: -7px;
  left: -7px;
  border-right: 0;
  border-top: 0;
}
/* ── CTA plate — sharp near-black block; mint corner brackets slide in on
      hover, arrow nudges forward. Typography comes from utility classes. ──── */
.lp-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: 1.05rem 1.9rem;
  background: var(--color-btn-primary);
  color: var(--color-btn-primary-fg);
  transition: background-color 0.25s ease;
}
.lp-cta::before,
.lp-cta::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1.5px solid var(--color-accent);
  opacity: 0;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.lp-cta::before {
  top: -6px;
  left: -6px;
  border-right: 0;
  border-bottom: 0;
  transform: translate(5px, 5px);
}
.lp-cta::after {
  bottom: -6px;
  right: -6px;
  border-left: 0;
  border-top: 0;
  transform: translate(-5px, -5px);
}
.lp-cta:hover::before,
.lp-cta:hover::after {
  opacity: 1;
  transform: none;
}
.lp-cta__arrow {
  transition: transform 0.25s ease;
}
.lp-cta:hover .lp-cta__arrow {
  transform: translateX(5px);
}
@media(prefers-reduced-motion:reduce){.lp-cta,.lp-cta::before,.lp-cta::after,.lp-cta__arrow{transition:none}}