/* ============================================================
   BUJO PWA — tokens.css
   Design tokens: cores, tipografia, espaçamento, animações
   ============================================================ */

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

/* ── Dark mode (padrão) ─────────────────────────────────── */
:root {
  /* Cores base */
  --bg:             #0F0F0F;
  --bg-secondary:   #141414;
  --surface:        #1A1A1A;
  --surface-raised: #222222;
  --border:         #2A2A2A;
  --border-subtle:  #1E1E1E;

  /* Texto */
  --text:           #E8E8E8;
  --text-secondary: #888888;
  --text-muted:     #555555;

  /* Acento principal — Índigo */
  --accent:         #5B5EA6;
  --accent-hover:   #6B6EC0;
  --accent-subtle:  rgba(91, 94, 166, 0.15);
  --accent-glow:    rgba(91, 94, 166, 0.3);

  /* Cores semânticas por tipo de bullet */
  --type-task:      #E8E8E8;
  --type-event:     #A0A0A0;
  --type-idea:      #C97D2E;        /* âmbar */
  --type-idea-bg:   rgba(201, 125, 46, 0.12);
  --type-feeling:   #C47A8A;        /* rosa suave */
  --type-feeling-bg:rgba(196, 122, 138, 0.12);
  --type-health:    #5A9E6F;        /* verde suave */
  --type-health-bg: rgba(90, 158, 111, 0.12);
  --type-habit:     #5B5EA6;        /* índigo */
  --type-habit-bg:  rgba(91, 94, 166, 0.12);
  --type-note:      #888888;
  --type-review:    #7B68EE;

  /* Status de tarefa */
  --status-open:       #E8E8E8;
  --status-done:       #5A9E6F;
  --status-migrated:   #C97D2E;
  --status-cancelled:  #555555;

  /* Tipografia */
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Escala tipográfica */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */

  /* Espaçamento */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* Bordas */
  --radius-sm:  6px;
  --radius:     12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full:9999px;

  /* Sombras */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-fab: 0 4px 20px rgba(91, 94, 166, 0.4);

  /* Animações */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:   150ms;
  --duration:        250ms;
  --duration-slow:   400ms;

  /* Layout */
  --nav-height:  60px;
  --fab-size:    56px;
  --fab-offset:  80px;
  --header-h:    64px;
  --max-w:       430px;
}

/* ── Light mode ─────────────────────────────────────────── */
[data-theme="light"] {
  --bg:             #FAFAFA;
  --bg-secondary:   #F5F5F5;
  --surface:        #FFFFFF;
  --surface-raised: #F0F0F0;
  --border:         #E0E0E0;
  --border-subtle:  #EBEBEB;

  --text:           #1A1A1A;
  --text-secondary: #6B6B6B;
  --text-muted:     #AAAAAA;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow:     0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.14);
  --shadow-fab: 0 4px 20px rgba(91, 94, 166, 0.35);

  --type-idea-bg:    rgba(201, 125, 46, 0.08);
  --type-feeling-bg: rgba(196, 122, 138, 0.08);
  --type-health-bg:  rgba(90, 158, 111, 0.08);
  --type-habit-bg:   rgba(91, 94, 166, 0.08);
  --accent-subtle:   rgba(91, 94, 166, 0.10);
}