/* =============================================
   youline — Design Tokens
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

:root {
  /* --- Literal colors (NÃO mudam com tema) --- */
  --white-literal: #ffffff;
  --black-literal: #0a0a0a;
  --neon-accent: #d4f225; /* sempre neon amarelo-verde, literal */
  --danger-literal: #ff4444;

  /* --- Palette / default dark theme --- */
  --text:         #f5f4f0;
  --black:        #0a0a0a;
  --black-soft:   #111111;
  --card-bg:      #161616;
  --gray-1:       #1a1a1a;
  --gray-2:       #242424;
  --gray-3:       #333333;
  --muted:        #666666;
  --muted-light:  #a8ada1;
  --white:        #f5f4f0;
  --white-dim:    rgba(245, 244, 240, 0.75);
  --page-backdrop:#050505;
  --surface-hover: rgba(255, 255, 255, 0.05);
  --overlay-bg:   rgba(0, 0, 0, 0.70);
  --topbar-bg:    linear-gradient(to bottom, rgba(0,0,0,0.80) 0%, transparent 100%);
  --bottomnav-bg: linear-gradient(to top, rgba(0,0,0,0.90) 60%, transparent 100%);

  /* Accent: neon yellow-green — sempre texto PRETO sobre fundo neon */
  --accent:       #d4f225;
  --accent-dim:   rgba(212, 242, 37, 0.15);
  --accent-border: rgba(212, 242, 37, 0.30);
  --accent-text:  #0a0a0a;

  /* Semantic */
  --danger:       #ff4444;
  --danger-text:  #ffffff;
  --success:      #22c55e;
  --success-text: #0a0a0a;

  /* --- Typography --- */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;

  /* Scale */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-lg:    17px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   28px;

  /* Weight */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* --- Spacing --- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;

  /* --- Radius --- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* --- Layout --- */
  --topbar-h:    56px;
  --bottomnav-h: 80px;

  /* --- Transitions --- */
  --ease-fast:   0.12s ease;
  --ease-base:   0.22s ease;
  --ease-slow:   0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

:root.light-mode,
body.light-mode {
  --text:         #0e100d;
  --black:        #f6f7f2;
  --black-soft:   #ffffff;
  --card-bg:      #ffffff;
  --gray-1:       #eef0e8;
  --gray-2:       #dfe3d8;
  --gray-3:       #c8cdc0;
  --muted:        #4e5548;
  --muted-light:  #5c6256;
  --white:        #111111;
  --white-dim:    rgba(17, 17, 17, 0.72);
  --page-backdrop:#e8ebe1;
  --surface-hover: rgba(17, 17, 17, 0.05);
  --overlay-bg:   rgba(0, 0, 0, 0.45);
  --topbar-bg:    linear-gradient(to bottom, rgba(246,247,242,0.96) 0%, rgba(246,247,242,0.72) 60%, transparent 100%);
  --bottomnav-bg: linear-gradient(to top, rgba(246,247,242,0.98) 55%, rgba(246,247,242,0.78) 78%, transparent 100%);
  /* Accent e danger NO MODO CLARO: continua neon e danger literal; texto sobre accent continua preto */
  --accent-text:  #0a0a0a;
  --danger-text:  #ffffff;
}

/* Google Font import (vem antes de :root por restrição CSS) */