/* Import all component styles */
@import "components/css/navbar.css";
@import "components/css/hero.css";
@import "components/css/finance-cards.css";
@import "components/css/pain.css";
@import "components/css/product-intro.css";
@import "components/css/benefits-block.css";
@import "components/css/afterlife-block.css";
@import "components/css/who.css";
@import "components/css/orginize.css";
@import "components/css/questions.css";
@import "components/css/lifestyle.css";
@import "components/css/newLogin.css";
@import "components/css/about.css";
@import "components/css/footer.css";
@import "components/css/cta.css";
@import "components/css/faq.css";
@import "components/css/theme.css";

/* Theme color variables - light by default */
:root {
    /* ===== BACKGROUND ===== */
    --bg-page: #f3f7fb;
    --bg-card: #ffffff;
    --bg-card-soft: #f8fafc;
    --bg-section: #eef5fb;
    --bg-gradient-start: #e8f6ff;
    --bg-gradient-end: #f4fbff;

    /* ===== TEXT ===== */
    --text-main: #0f1d3b;
    --text-muted: #606060;
    --text-soft: #8a8fa3;
    --text-contrast: #ffffff;

    /* ===== ACCENTS ===== */
    --accent-primary: #00c6ff;
    --accent-primary-2: #0bc9c3;
    --accent-gradient: linear-gradient(135deg, #00c6ff, #0bc9c3);
    --accent-pill-bg: rgba(0, 198, 255, 0.15);

    /* ===== BORDERS ===== */
    --border-subtle: #e6e6e6;
    --border-light: #dce2ea;
    --border-strong: #bcc7d6;

    /* ===== SHADOWS ===== */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.06);

    /* ===== STATUS COLORS ===== */
    --success: #2ecc71;
    --warning: #f1c40f;
    --danger: #e74c3c;
    --info: #00a8ff;

    --success-bg: rgba(46, 204, 113, 0.12);
    --warning-bg: rgba(241, 196, 15, 0.12);
    --danger-bg: rgba(231, 76, 60, 0.12);
    --info-bg: rgba(0, 168, 255, 0.12);

    /* ===== BUTTON COLORS ===== */
    --btn-primary-bg: var(--accent-gradient);
    --btn-primary-text: #ffffff;
    --btn-ghost-bg-hover: rgba(0, 0, 0, 0.05);

    /* ===== ICON COLORS ===== */
    --icon-primary: var(--accent-primary);
    --icon-muted: #9aa4b2;

    /* ===== MISC ===== */
    --radius-big: 24px;
    --radius-medium: 14px;
    --radius-small: 8px;

        /* AFTERLIFE BACKDROP BLOBS */
  --afterlife-blob-1: rgba(0, 198, 255, 0.50);   
  --afterlife-blob-2: rgba(11, 201, 195, 0.45);  

    /* ===== FINANCE CARDS RINGS ===== */
    --fin-ring-bg: #eef3ff;
    --fin-ring-orange: #ff7a00;
    --fin-ring-blue:   #2f80ff;
    --fin-ring-pink:   #ff4b94;
    --fin-ring-green:  #2ecc71;
    --fin-ring-peach:  #ffb56b;
    --fin-ring-navy:   #003f8c;
    --fin-ring-yellow: #f2c94c;
    --fin-ring-red:    #ff3b30;
    --fin-ring-teal:   #1abc9c;
    --fin-ring-sky:    #00a8ff;
}

/* Dark theme override */
body.theme-dark {

  --afterlife-blob-1: rgba(0, 198, 255, 0.25);
  --afterlife-blob-2: rgba(11, 201, 195, 0.22);

  /* Deep layered background */
  --bg-page: #0c111b;
  --bg-card: #111822;
  --bg-card-soft: #161e2b;
  --bg-section: #0e141f;

  /* Soft gradient accents */
  --bg-gradient-start: rgba(0, 178, 255, 0.08);
  --bg-gradient-end: rgba(0, 255, 215, 0.06);

  /* Text colors */
  --text-main: #e7eefc;
  --text-muted: #9aa4b6;
  --text-soft: #7b8699;
  --text-contrast: #ffffff;

  /* Borders */
  --border-light: #1d2633;
  --border-subtle: #141b25;

  /* Shadows */
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.35);

  /* Accent colors */
  --accent-primary: #00c6ff;
  --accent-primary-2: #0bc9c3;
  --accent-gradient: linear-gradient(135deg, #00d0ff, #00f2c3);

  /* Pill background */
  --accent-pill-bg: rgba(0, 198, 255, 0.18);

  /* Buttons */
  --btn-primary-bg: linear-gradient(135deg, #00d2ff, #00f2c3);
  --btn-primary-text: #ffffff;
  --btn-ghost-bg-hover: rgba(255, 255, 255, 0.06);

  /* Finance rings – אפשר להשאיר אותם אותו דבר כדי שיישארו זוהרים גם בדארק */
  --fin-ring-bg: #111822;
}

body.theme-dark .hero-card-chart::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 200, 255, 0) 0%,
    rgba(0, 180, 255, 0.18) 40%,
    rgba(0, 160, 255, 0.28) 70%,
    rgba(0, 140, 255, 0.35) 100%
  );
}

/* Reset basic browser defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

body {
    font-family: "Heebo", "Inter", sans-serif;
    background-color: var(--bg-page);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    flex-direction: column; /* sections under each other */
}