/* =============================================================================
 * theme.css — design token.
 *
 * I colori di Telegram (--tg-theme-*) sono iniettati dal client dentro la Mini
 * App. Non li usiamo come superficie: un'app di astrologia deve avere il suo
 * cielo, riconoscibile anche cambiando tema a Telegram. Li rispettiamo dove
 * conta per l'integrazione (bottone principale, link).
 *
 * L'identità è un cielo notturno con l'ottone degli strumenti astronomici:
 * l'oro è l'accento, il viola il secondario, e ogni elemento zodiacale ha il
 * suo colore (vedi CONFIG.elementColors — sono gli stessi, tenuti allineati
 * a mano perché la ruota li legge da JS e il CSS da qui).
 * ========================================================================== */

:root {
  /* superfici — dal fondo del cielo alla carta */
  --bg:          #07060F;
  --bg-elev:     #0E0D1A;
  --surface:     #12111F;
  --surface-2:   #1A1930;
  --surface-3:   #24223C80;
  --border:      rgba(255, 255, 255, .07);
  --border-str:  rgba(255, 255, 255, .14);

  /* testo */
  --text:        #F2F1F7;
  --text-dim:    #9D9AB4;
  --text-faint:  #6A6784;

  /* accento — ottone */
  --accent:      #E8B84B;
  --accent-2:    #8B7BE8;
  --accent-soft: rgba(232, 184, 75, .14);
  --grad:        linear-gradient(135deg, #E8B84B 0%, #D89A3C 100%);
  --grad-cool:   linear-gradient(135deg, #8B7BE8 0%, #6F8FE0 100%);

  /* semantici */
  --pos:         #5FBF8A;
  --pos-soft:    rgba(95, 191, 138, .13);
  --neg:         #E06B5A;
  --neg-soft:    rgba(224, 107, 90, .13);
  --warn:        #E8A63F;
  --warn-soft:   rgba(232, 166, 63, .13);

  /* elementi zodiacali — allineati a CONFIG.elementColors */
  --el-fuoco:    #E8734A;
  --el-terra:    #8FA85E;
  --el-aria:     #6FB3D9;
  --el-acqua:    #8A7FE0;

  /* forma */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --shadow:      0 10px 34px rgba(0, 0, 0, .5);
  --shadow-soft: 0 2px 14px rgba(0, 0, 0, .3);
  --glow:        0 6px 26px rgba(232, 184, 75, .26);

  /* misure */
  --tab-h: 64px;
  --gap: 12px;
  --pad: 16px;

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --font-num: 'SF Mono', ui-monospace, 'Cascadia Mono', 'Roboto Mono', Menlo, monospace;
  /* i glifi astrologici stanno nell'Unicode di base: nessun font da caricare,
     ma serve una catena che li contenga davvero su tutti i sistemi */
  --font-glyph: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols2',
                'DejaVu Sans', var(--font);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Tema chiaro. Non è un'inversione automatica: l'oro su bianco vira allo
   sporco, quindi scende di luminosità e il viola prende più peso. */
html.theme-light {
  --bg:          #F5F4F8;
  --bg-elev:     #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #F0EFF5;
  --surface-3:   #E9E7F080;
  --border:      rgba(20, 18, 40, .09);
  --border-str:  rgba(20, 18, 40, .16);

  --text:        #14121F;
  --text-dim:    #5C5872;
  --text-faint:  #8C88A0;

  --accent:      #A87A18;
  --accent-2:    #6A5AC8;
  --accent-soft: rgba(168, 122, 24, .12);
  --grad:        linear-gradient(135deg, #B8891F 0%, #96690F 100%);

  --pos:         #2E8B5C;
  --pos-soft:    rgba(46, 139, 92, .12);
  --neg:         #C4472F;
  --neg-soft:    rgba(196, 71, 47, .12);
  --warn:        #A8700E;
  --warn-soft:   rgba(168, 112, 14, .12);

  --el-fuoco:    #C4552C;
  --el-terra:    #5F7A38;
  --el-aria:     #3C7FA8;
  --el-acqua:    #5B4FB0;

  --shadow:      0 8px 28px rgba(20, 18, 40, .10);
  --shadow-soft: 0 2px 10px rgba(20, 18, 40, .06);
  --glow:        0 6px 22px rgba(168, 122, 24, .18);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}