/* ============================================
   anchorED — Ember Theme
   ============================================
   Import this file into any page:
   <link rel="stylesheet" href="ember-theme.css">
   ============================================ */

/* ---- Fonts ---- */
@font-face { font-family: 'Kugile'; src: url('fonts/kugile/Kugile_Demo.ttf'); font-display: swap; }
@font-face { font-family: 'Garet'; src: url('fonts/garet-heavy.ttf'); font-weight: 800; }
@font-face { font-family: 'Gelasio'; src: url('fonts/gelasio/static/Gelasio-Bold.ttf'); font-weight: 700; }
@font-face { font-family: 'Gelasio'; src: url('fonts/gelasio/static/Gelasio-SemiBold.ttf'); font-weight: 600; }
@font-face { font-family: 'Gelasio'; src: url('fonts/gelasio/static/Gelasio-Medium.ttf'); font-weight: 500; }
@font-face { font-family: 'Gelasio'; src: url('fonts/gelasio/static/Gelasio-Regular.ttf'); font-weight: 400; }
@font-face { font-family: 'Mileast'; src: url('fonts/mileast/Mileast.otf'); font-style: normal; }
@font-face { font-family: 'Mileast'; src: url('fonts/mileast/Mileast Italic.otf'); font-style: italic; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat/Montserrat-Light.ttf'); font-weight: 300; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat/Montserrat-Regular.ttf'); font-weight: 400; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat/Montserrat-Medium.ttf'); font-weight: 500; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat/Montserrat-SemiBold.ttf'); font-weight: 600; }
@font-face { font-family: 'Montserrat'; src: url('fonts/montserrat/Montserrat-Bold.ttf'); font-weight: 700; }
@font-face { font-family: 'Poppins'; src: url('fonts/poppins 2/Poppins-Light.ttf'); font-weight: 300; }
@font-face { font-family: 'Poppins'; src: url('fonts/poppins 2/Poppins-Regular.ttf'); font-weight: 400; }
@font-face { font-family: 'Poppins'; src: url('fonts/poppins 2/Poppins-Medium.ttf'); font-weight: 500; }
@font-face { font-family: 'Poppins'; src: url('fonts/poppins 2/Poppins-SemiBold.ttf'); font-weight: 600; }


/* ---- CSS Variables ---- */
:root {
  /* Background */
  --bg:                 #1A0F08;

  /* Color Palette */
  --ember-black:        #1A0F08;
  --warm-cream:         #F2C496;
  --sunset-orange:      #E89030;
  --amber-glow:         #F0A646;
  --golden-light:       #F5C270;
  --deep-ember:         #D86E10;

  /* Text Colors (pre-mixed with opacity for convenience) */
  --text-heading:       #F2C496;
  --text-accent:        #E89030;
  --text-tagline:       rgba(242, 196, 150, 0.5);
  --text-body:          rgba(242, 196, 150, 0.55);
  --text-label:         rgba(242, 196, 150, 0.5);
  --text-placeholder:   rgba(242, 196, 150, 0.35);

  /* Dashboard semantic aliases */
  --text-muted:         rgba(242, 196, 150, 0.55);
  --text-secondary:     rgba(242, 196, 150, 0.7);
  --text-primary:       rgba(242, 196, 150, 0.9);
  --accent:             #F0A646;
  --text-on-cta:        #1A0F08;

  /* Surfaces */
  --surface:            rgba(255, 255, 255, 0.04);
  --surface-border:     rgba(242, 196, 150, 0.08);
  --surface-border-strong: rgba(242, 196, 150, 0.1);

  /* CTA Gradients */
  --cta-gradient:       linear-gradient(135deg, #F0A646, #F5C270);
  --cta-gradient-warm:  linear-gradient(135deg, #D86E10, #E89030);

  /* Crisis */
  --crisis-bg:          rgba(200, 60, 40, 0.08);
  --crisis-border:      rgba(200, 60, 40, 0.15);
  --crisis-text:        rgba(220, 100, 80, 0.7);

  /* Ghost / Secondary */
  --ghost-border:       rgba(240, 166, 70, 0.25);
  --ghost-text:         #F0A646;

  /* Orb Colors */
  --orb-center:         #D86E10;
  --orb-mid:            #F0A646;
  --orb-outer:          #F5C270;
  --orb-sliver:         rgba(255, 210, 80, 0.18);

  /* Fonts */
  --font-display:       'Kugile', serif;
  --font-body:          'Montserrat', sans-serif;
  --font-alt:           'Poppins', sans-serif;
  --font-accent:        'Mileast', serif;

  /* Border Radius */
  --radius-btn:         30px;
  --radius-card:        16px;
  --radius-input:       14px;
  --radius-small:       10px;
  --radius-circle:      50%;

  /* Spacing */
  --space-xs:           4px;
  --space-sm:           8px;
  --space-md:           16px;
  --space-lg:           24px;
  --space-xl:           32px;
  --space-2xl:          48px;
  --space-3xl:          60px;

  /* Animation */
  --breathe-duration:   6s;
  --breathe-easing:     ease-in-out;
}

/* ---- Light Mode ---- */
body.light-mode {
  --bg:                 #FFF8F0;
  --ember-black:        #FFF8F0;

  --text-heading:       #3D2210;
  --text-accent:        #A85A08;
  --text-tagline:       rgba(61, 34, 16, 0.65);
  --text-body:          rgba(61, 34, 16, 0.78);
  --text-label:         rgba(61, 34, 16, 0.7);
  --text-placeholder:   rgba(61, 34, 16, 0.45);
  --text-on-cta:        #FFFAF5;

  --text-muted:         rgba(61, 34, 16, 0.65);
  --text-secondary:     rgba(61, 34, 16, 0.8);
  --text-primary:       rgba(61, 34, 16, 0.95);
  --accent:             #D87A20;

  --surface:            rgba(92, 58, 30, 0.04);
  --surface-border:     rgba(92, 58, 30, 0.08);
  --surface-border-strong: rgba(92, 58, 30, 0.12);

  --cta-gradient:       linear-gradient(135deg, #E08528, #F0A646);
  --cta-gradient-warm:  linear-gradient(135deg, #C06010, #D87A20);

  --ghost-border:       rgba(168, 90, 8, 0.35);
  --ghost-text:         #A85A08;

  --crisis-bg:          rgba(200, 60, 40, 0.06);
  --crisis-border:      rgba(200, 60, 40, 0.2);
  --crisis-text:        #B84030;

  --warm-cream:         #3D2210;
  --amber-glow:         #D87A20;
  --golden-light:       #A85A08;
  --deep-ember:         #8A4A08;

  --orb-center:         #E08528;
  --orb-mid:            #F0A646;
  --orb-outer:          #F5C270;
  --orb-sliver:         rgba(240, 166, 70, 0.25);
}


/* ---- Base Reset ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-weight: 300;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}


/* ---- Typography Utilities ---- */
.display        { font-family: var(--font-display); font-size: 42px; color: var(--text-heading); letter-spacing: 2px; }
.heading        { font-family: var(--font-display); font-size: 28px; color: var(--text-heading); line-height: 1.25; }
.heading-sm     { font-family: var(--font-display); font-size: 22px; color: var(--text-heading); }
.tagline        { font-family: var(--font-body); font-weight: 300; font-size: 13px; color: var(--text-tagline); letter-spacing: 3px; text-transform: uppercase; }
.body-text      { font-family: var(--font-body); font-weight: 300; font-size: 13px; color: var(--text-body); line-height: 1.6; }
.label          { font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--text-label); letter-spacing: 1px; }
.accent-text    { color: var(--text-accent); }


/* ---- Button Utilities ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 1px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn:hover { opacity: 0.9; transform: scale(1.02); }

.btn-primary {
  color: var(--text-on-cta);
  background: var(--cta-gradient);
  padding: 14px 40px;
  border-radius: var(--radius-btn);
}

.btn-ghost {
  color: var(--ghost-text);
  background: transparent;
  border: 1px solid var(--ghost-border);
  padding: 14px 36px;
  border-radius: var(--radius-btn);
}

.btn-card {
  color: var(--ghost-text);
  background: var(--surface);
  border: 1px solid var(--surface-border-strong);
  padding: 16px 20px;
  border-radius: var(--radius-card);
  width: 100%;
  text-align: center;
}

.btn-crisis {
  color: var(--crisis-text);
  background: var(--crisis-bg);
  border: 1px solid var(--crisis-border);
  padding: 14px 20px;
  border-radius: var(--radius-input);
  width: 100%;
  text-align: center;
  font-size: 12px;
}

.btn-submit {
  color: var(--text-on-cta);
  background: var(--cta-gradient-warm);
  padding: 10px 18px;
  border-radius: var(--radius-small);
  font-size: 11px;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-circle);
  background: var(--surface);
  border: 1px solid var(--surface-border-strong);
  color: var(--ghost-text);
  padding: 0;
  flex-shrink: 0;
}


/* ---- Input ---- */
.input-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-input);
  padding: 6px 6px 6px 18px;
}
.input-bar input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  color: var(--text-heading);
}
.input-bar input::placeholder {
  color: var(--text-placeholder);
}


/* ---- Card Surface ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg);
}


/* ---- Orb Animation ---- */
@keyframes breathe {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.03); }
}
@keyframes breathe-slow {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.9; transform: translate(-50%, -50%) scale(1.05); }
}

.orb {
  position: relative;
}
.orb-glow {
  position: absolute;
  border-radius: var(--radius-circle);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    var(--orb-center) 0%, #E48222 15%, #EC9636 30%,
    var(--orb-mid) 46%, #F3B55A 60%, var(--orb-outer) 76%,
    rgba(246, 200, 110, 0.3) 82%, transparent 88%);
  animation: breathe var(--breathe-duration) var(--breathe-easing) infinite;
}
.orb-sliver {
  position: absolute;
  border-radius: var(--radius-circle);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    transparent 86%, var(--orb-sliver) 91%,
    rgba(255, 220, 100, 0.1) 95%, transparent 98%);
  animation: breathe var(--breathe-duration) var(--breathe-easing) 0.2s infinite;
}
.orb-hotspot {
  position: absolute;
  border-radius: var(--radius-circle);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(200, 90, 5, 0.5) 0%, rgba(215, 110, 20, 0.3) 40%, transparent 100%);
  box-shadow: 0 0 40px rgba(210, 100, 10, 0.2);
  animation: breathe var(--breathe-duration) var(--breathe-easing) 0.6s infinite;
}


/* ---- Fern Shadow Animation ---- */
@keyframes sway {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(1.5deg); }
  75%      { transform: rotate(-1.5deg); }
}
.fern-shadow {
  filter: blur(1.5px);
  opacity: 0.18;
  animation: sway 8s ease-in-out infinite;
  transform-origin: bottom center;
}