/* ═══════════════════════════════════════════════════
   INDEX.CSS — Uncle AI
   Theme: 6F Warm Structure
   Palette: Cream / Terracotta / Deep Brown
   ═══════════════════════════════════════════════════ */

/* ── THEME VARIABLES ── */
:root {
  --bg:                  #FDF6EE;
  --card:                #FFFFFF;
  --border:              #E8C9A8;
  --border-soft:         #F0DCC8;
  --shadow:              rgba(74,55,40,0.10);

  --primary:             #4A3728;
  --primary-hover:       #332519;
  --accent:              #D4845A;
  --accent-hover:        #B86A40;

  --text:                #2A1A0E;
  --text-mid:            #7A5A42;
  --text-light:          #B8947A;

  --banner-bg:           #4A3728;
  --banner-text:         #B8947A;
  --badge-bg:            #D4845A;

  --logo-uncle:          #4A3728;
  --logo-ai:             #D4845A;

  --btn-primary-bg:      #4A3728;
  --btn-primary-text:    #FDF6EE;
  --btn-primary-hover:   #332519;

  --btn-ghost-bg:        #D4845A;
  --btn-ghost-text:      #FFFFFF;
  --btn-ghost-border:    #D4845A;
  --btn-ghost-hover-bg:  #B86A40;
  --btn-ghost-hover-border: #B86A40;

  --step-border:         #E8C9A8;
  --step-strong:         #2A1A0E;

  --footer-text:         #B8947A;
  --footer-hover:        #4A3728;

  --signin-text:         #B8947A;
  --signin-link:         #D4845A;

  --switcher-bg:         #EDD8BE;
}

/* ── THEME 6B: Sky & Coral ── */
:root.theme-6b {
  --bg:                  #F0F8FF;
  --card:                #FFFFFF;
  --border:              #C8DFF0;
  --border-soft:         #DFF0FF;
  --shadow:              rgba(26,94,138,0.10);
  --primary:             #1A5E8A;
  --primary-hover:       #134A6E;
  --accent:              #FF6B52;
  --accent-hover:        #E55840;
  --text:                #0D2E45;
  --text-mid:            #4A7A9B;
  --text-light:          #90B5CC;
  --banner-bg:           #1A5E8A;
  --banner-text:         #7ABCD8;
  --badge-bg:            #FF6B52;
  --logo-uncle:          #0D2E45;
  --logo-ai:             #FF6B52;
  --btn-primary-bg:      #FF6B52;
  --btn-primary-text:    #FFFFFF;
  --btn-primary-hover:   #E55840;
  --btn-ghost-bg:        #1A5E8A;
  --btn-ghost-text:      #FFFFFF;
  --btn-ghost-border:    #1A5E8A;
  --btn-ghost-hover-bg:  #134A6E;
  --btn-ghost-hover-border: #134A6E;
  --step-border:         #C8DFF0;
  --step-strong:         #0D2E45;
  --footer-text:         #90B5CC;
  --footer-hover:        #0D2E45;
  --signin-text:         #90B5CC;
  --signin-link:         #FF6B52;
  --switcher-bg:         #DFF0FF;
}

/* ── THEME OG: Original Green ── */
:root.theme-og {
  --bg:                  #F7F7F7;
  --card:                #FFFFFF;
  --border:              #E0E0E0;
  --border-soft:         #F0F0F0;
  --shadow:              rgba(0,0,0,0.06);
  --primary:             #1A7A6D;
  --primary-hover:       #145F54;
  --accent:              #F59E0B;
  --accent-hover:        #D97706;
  --text:                #1A1A1A;
  --text-mid:            #6B6B6B;
  --text-light:          #AAAAAA;
  --banner-bg:           #FFF8E1;
  --banner-text:         #7A5C00;
  --badge-bg:            #F59E0B;
  --logo-uncle:          #1A7A6D;
  --logo-ai:             #1A1A1A;
  --btn-primary-bg:      #1A7A6D;
  --btn-primary-text:    #FFFFFF;
  --btn-primary-hover:   #145F54;
  --btn-ghost-bg:        transparent;
  --btn-ghost-text:      #6B6B6B;
  --btn-ghost-border:    #E0E0E0;
  --btn-ghost-hover-bg:  transparent;
  --btn-ghost-hover-border: #1A7A6D;
  --step-border:         #E0E0E0;
  --step-strong:         #1A1A1A;
  --footer-text:         #9B9B9B;
  --footer-hover:        #1A1A1A;
  --signin-text:         #AAAAAA;
  --signin-link:         #1A7A6D;
  --switcher-bg:         #F0F0F0;
}

/* ── THEME SWITCHER (dev tool — remove before prod) ── */
.theme-switcher {
  position: fixed; top: 56px; right: 12px; z-index: 200;
  background: var(--switcher-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px; display: flex; flex-direction: column;
  gap: 5px; box-shadow: 0 4px 12px var(--shadow);
}
.theme-switcher-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--text-light); text-align: center;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.t-btn {
  padding: 7px 12px; border-radius: 7px; border: 1px solid var(--border);
  font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif; background: var(--card);
  color: var(--text-mid); transition: all 0.15s; white-space: nowrap;
}
.t-btn:hover { background: var(--accent); color: white; border-color: var(--accent); }
.t-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

/* ── BODY ── */
html, body { height: 100%; }
body {
  background: var(--bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ── FULL SCREEN LAYOUT ── */
.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 28px 60px;
  padding-top: 52px;
}

/* ── LOGO ── */
.logo {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px; margin-bottom: 48px;
}
.logo-img { width: 96px; height: 96px; object-fit: contain; }
.logo-wordmark { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }
.logo-uncle { color: var(--logo-uncle); }
.logo-ai    { color: var(--logo-ai); }

/* ── HERO ── */
.hero { text-align: center; max-width: 400px; width: 100%; }

.eyebrow {
  font-size: 11px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px;
}

h1 {
  font-size: clamp(38px, 8vw, 56px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -1px; color: var(--text); margin-bottom: 16px;
}
h1 em { font-style: normal; color: var(--accent); }
.subtext { font-size: 17px; color: var(--text-mid); line-height: 1.55; margin-bottom: 44px; }

/* ── CTA BUTTONS ── */
.cta-stack {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 320px; margin: 0 auto;
}
.btn-primary {
  display: block; width: 100%; padding: 15px;
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  font-size: 16px; font-weight: 700; border-radius: 12px;
  border: none; cursor: pointer; font-family: 'Inter', sans-serif;
  transition: background 0.15s, transform 0.1s; text-align: center;
}
.btn-primary:hover { background: var(--btn-primary-hover); transform: translateY(-1px); }

.btn-ghost {
  display: block; width: 100%; padding: 15px;
  background: var(--btn-ghost-bg); color: var(--btn-ghost-text);
  font-size: 15px; font-weight: 600; border-radius: 12px;
  border: 1.5px solid var(--btn-ghost-border); cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s, border-color 0.15s, transform 0.1s; text-align: center;
}
.btn-ghost:hover {
  background: var(--btn-ghost-hover-bg);
  border-color: var(--btn-ghost-hover-border);
  transform: translateY(-1px);
}

/* ── TOP NAV ── */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: flex-start; align-items: center;
  padding: 12px 24px;
}
.top-nav__link {
  font-size: 13px; font-weight: 600; color: var(--text-light);
  text-decoration: none; letter-spacing: 0.2px;
  transition: color 0.2s ease;
}
.top-nav__link:hover { color: var(--accent); }

/* ── BETA NOTICE (footer) ── */
.beta-notice {
  margin-top: 10px; font-size: 11px; color: var(--text-light);
  opacity: 0.7;
}
.beta-dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
  margin-right: 4px; vertical-align: middle;
}

/* ── SIGN IN LINK ── */
.signin-link { margin-top: 24px; font-size: 13px; color: var(--signin-text); }
.signin-link a { color: var(--signin-link); font-weight: 600; }

/* ── HOW IT WORKS ── */
.how-it-works {
  margin-top: 48px; display: flex; flex-direction: column;
  gap: 10px; width: 100%; max-width: 400px;
}
.step {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--step-border);
  border-radius: 12px;
  box-shadow: 0 1px 4px var(--shadow);
}
.step-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.step-text { font-size: 14px; color: var(--text-mid); line-height: 1.45; text-align: left; }
.step-text strong {
  color: var(--step-strong); font-weight: 700;
  display: block; margin-bottom: 2px;
}

/* ── SITE FOOTER ── */
.site-footer {
  width: 100%; text-align: center;
  padding: 20px 24px 28px;
  font-size: 13px; color: var(--footer-text);
}
.site-footer a { color: var(--footer-text); text-decoration: none; font-weight: 500; }
.site-footer a:hover { color: var(--footer-hover); }
.footer-sep { margin: 0 10px; }