/* =============================================================
   CURTHUB — application.css
   Single source pra tokens do design system. Estilos de página /
   componente vivem em arquivos separados (imports abaixo).
   Toda cor / espaço / radius / tipografia / motion vem daqui.
   ============================================================= */

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

/* Componentes (cross-page) */
@import url("/assets/components/buttons-8e201db6.css");
@import url("/assets/components/badges-aa4e1712.css");
@import url("/assets/components/chip-6e0368d5.css");
@import url("/assets/components/empty_state-8d4cab8b.css");
@import url("/assets/components/admin-9613015d.css");
@import url("/assets/components/admin_nav-1d8efd2a.css");
@import url("/assets/components/ads_preview-790b057c.css");
@import url("/assets/components/toast-f2cfe893.css");
@import url("/assets/components/skeleton-1ac23135.css");
@import url("/assets/components/modal-2d20e904.css");
@import url("/assets/components/table-ba325943.css");
@import url("/assets/components/form-0dd2ff1b.css");
@import url("/assets/components/chat_bubble-f966439d.css");
@import url("/assets/components/admin_dashboard-07173195.css");
@import url("/assets/components/inbox-d98afe2a.css");
@import url("/assets/components/markdown_editor-4cf0b8d5.css");
@import url("/assets/components/tag_input-ac5e4060.css");
@import url("/assets/components/blog_admin-11df3284.css");

/* Páginas / módulos */
@import url("/assets/pages/landing-e3b3018f.css");
@import url("/assets/pages/auth-50bca8ac.css");
@import url("/assets/pages/downloads-e4aa1921.css");
@import url("/assets/pages/legal-17186c87.css");
@import url("/assets/pages/superadmin-542a34ec.css");
@import url("/assets/pages/blog-abbab4c5.css");
@import url("/assets/ads-c2d7622c.css");

:root {
  /* ============ Surfaces (dark canvas — default) ============ */
  --canvas:        #0E0E0E;
  --surface-1:     #161616;  /* cards, tabelas, inputs */
  --surface-2:     #1E1E1E;  /* elevados (modals, bubbles) */
  --surface-3:     #262626;  /* hover/active sobre surface-2 */
  --hairline:      rgba(255,255,255,0.08);
  --hairline-soft: rgba(255,255,255,0.04);
  --overlay:       rgba(0,0,0,0.72);

  /* ============ Light surfaces (downloads / pública) ============ */
  --light-canvas:     #f5f5f7;
  --light-surface:    #fafafa;
  --light-ink-strong: #111;
  --light-ink:        #1c1c1e;
  --light-ink-soft:   #333;
  --light-ink-muted:  #555;
  --light-hairline:   #d2d2d7;

  /* ============ Ink (texto) ============ */
  --ink:        #FFFFFF;
  --ink-soft:   rgba(255,255,255,0.78);
  --ink-muted:  #999999;
  --ink-faint:  rgba(255,255,255,0.36);

  /* ============ Semânticas (estados) ============ */
  --ok:        #10b981;   --ok-soft:    rgba(16,185,129,0.12);
  --warn:      #fbbf24;   --warn-soft:  rgba(251,191,36,0.12);
  --err:       #ef4444;   --err-soft:   rgba(239,68,68,0.12);
  --info:      #4DA3FF;   --info-soft:  rgba(77,163,255,0.12);

  /* ============ Marca ============ */
  --accent:        #FF5722;
  --accent-soft:   rgba(255,87,34,0.10);
  --accent-strong: #E64A19;
  --accent-blue:   #0099FF;
  --brand-coral:   #F4607A;
  --brand-orange-bright: #F97316;

  /* ============ Gradientes (landing + social) ============ */
  --grad-violet: linear-gradient(135deg, #3B1F6B 0%, #7B3FBE 60%, #A855F7 100%);
  --grad-coral:  linear-gradient(135deg, #7C2D4A 0%, #C2456A 60%, #F4607A 100%);
  --grad-orange: linear-gradient(135deg, #7C3A1E 0%, #C4622D 60%, #F97316 100%);
  --grad-instagram: linear-gradient(135deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);

  /* ============ Tipografia ============ */
  --font-display: 'DM Sans', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display scale (landing) */
  --text-display-xl: clamp(48px, 7vw, 96px);
  --text-display-lg: clamp(36px, 5vw, 72px);
  --text-display-md: clamp(26px, 3.5vw, 48px);
  --text-headline:   22px;

  /* App scale */
  --text-h1:       28px;
  --text-h2:       22px;
  --text-h3:       18px;
  --text-h4:       16px;
  --text-body-lg:  18px;
  --text-body:     15px;
  --text-caption:  13px;
  --text-micro:    12px;
  --text-mono:     13px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ============ Radius ============ */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  12px;
  --r-xl:  18px;
  --r-xxl: 30px;
  --r-pill: 999px;

  /* ============ Espaçamento (escala numérica única) ============ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 96px;

  /* ============ Shadows ============ */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:    0 12px 32px rgba(0,0,0,0.6);
  --shadow-focus: 0 0 0 3px rgba(255,87,34,0.25);

  /* ============ Z-index ============ */
  --z-nav:     10;
  --z-sticky:  20;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;

  /* ============ Motion ============ */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============ Breakpoints (referência) ============ */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
}

/* ============================================================
   Light theme — opt-in via [data-theme="light"] no <html>.
   Redefine tokens semânticos pra manter AA sobre fundo claro.
   ============================================================ */
:root[data-theme="light"] {
  --canvas:        #FAFAFA;
  --surface-1:     #FFFFFF;
  --surface-2:     #F5F5F5;
  --surface-3:     #EAEAEA;
  --hairline:      rgba(0,0,0,0.08);
  --hairline-soft: rgba(0,0,0,0.04);
  --overlay:       rgba(0,0,0,0.42);

  --ink:           #111111;
  --ink-soft:      rgba(0,0,0,0.78);
  --ink-muted:     #555555;
  --ink-faint:     rgba(0,0,0,0.36);

  /* Semânticos ganham *-soft mais saturado pra ter contraste sobre branco.
     Amarelo precisa de saturação maior porque é a cor mais clara
     (perde-se em fundo branco abaixo de 0.20). */
  --ok-soft:       rgba(16,185,129,0.16);
  --warn-soft:     rgba(251,191,36,0.22);
  --err-soft:      rgba(239,68,68,0.14);
  --info-soft:     rgba(77,163,255,0.14);
  --accent-soft:   rgba(255,87,34,0.14);

  --shadow-sm:     0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:     0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:     0 12px 32px rgba(0,0,0,0.12);
  --shadow-focus:  0 0 0 3px rgba(255,87,34,0.30);
}

/* ============ Reset mínimo ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv01","cv05","cv09","cv11","ss03","ss07","dlig";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }