/* styles/lifematch-tokens.css
   ────────────────────────────────────────────────────────────────
   Fundação visual do LifeMatch — FONTE CENTRAL DE TOKENS.
   Ciclo 2A (Investor Ready). Camada geral consumível por qualquer
   página de usuário (e, futuramente, por admin-ui.css e
   lifematch-tools.css). Não redefine os tokens de tema já existentes
   (--primary, --primary-rgb, etc.) de styles/lifematch-theme.css:
   apenas os referencia e adiciona uma escala semântica reutilizável.

   Convenção de nomes: --lm-<categoria>-<variante>.
   Valores DERIVADOS da identidade atual (verde institucional #14b84b,
   laranja de apoio #f97316, superfícies claras, cartões brancos).
   ──────────────────────────────────────────────────────────────── */

:root {
  /* ── Marca ─────────────────────────────────────────────────────
     Ligados ao tema quando presente (--primary muda por data-theme:
     verde=profissional/admin, laranja=estudante) com fallback ao verde
     institucional para páginas neutras (index, login). */
  --lm-color-primary: var(--primary, #14b84b);
  --lm-color-primary-dark: var(--primary-dark, #0e9e3e);
  --lm-color-primary-soft: var(--primary-soft, #f0fdf4);
  --lm-color-primary-border: var(--primary-border, #bbf7d0);
  --lm-color-primary-rgb: var(--primary-rgb, 20 184 75);

  /* Verde institucional e laranja de apoio (valores fixos, para acentos
     que não dependem do perfil do visitante). */
  --lm-color-green: #14b84b;
  --lm-color-green-dark: #0e9e3e;
  --lm-color-accent: #f97316;      /* laranja de apoio */
  --lm-color-accent-dark: #ea580c;

  /* ── Texto ─────────────────────────────────────────────────────── */
  --lm-color-text: #0f172a;        /* títulos / texto forte  */
  --lm-color-text-body: #1e293b;   /* corpo                  */
  --lm-color-text-muted: #64748b;  /* secundário             */
  --lm-color-text-faint: #94a3b8;  /* terciário / ícones     */
  --lm-color-text-on-primary: #ffffff;

  /* ── Superfícies e fundos ──────────────────────────────────────── */
  --lm-color-surface: #ffffff;          /* cartões            */
  --lm-color-surface-muted: #f8fafc;    /* inputs / áreas     */
  --lm-color-background: var(--background, #f5f8f7); /* fundo de tela  */
  --lm-color-canvas: #eef2f0;           /* canvas desktop     */
  --lm-canvas-tint: rgb(var(--lm-color-primary-rgb) / .10); /* brilho de marca */

  /* ── Bordas ────────────────────────────────────────────────────── */
  --lm-color-border: #eef2f6;      /* borda de cartão suave  */
  --lm-color-border-strong: #e2e8f0;
  --lm-color-border-faint: #f1f5f9;

  /* ── Estados semânticos ────────────────────────────────────────── */
  --lm-color-success: #059669;
  --lm-color-success-soft: #ecfdf5;
  --lm-color-success-border: #a7f3d0;
  --lm-color-warning: #c2410c;     /* atenção (laranja escuro) */
  --lm-color-warning-soft: #fff7ed;
  --lm-color-warning-border: #fed7aa;
  --lm-color-error: #e11d48;       /* erro                   */
  --lm-color-error-soft: #fff1f2;
  --lm-color-error-border: #fecdd3;
  --lm-color-info: #2563eb;        /* informação / pago      */
  --lm-color-info-soft: #eff6ff;
  --lm-color-info-border: #bfdbfe;
  --lm-color-disabled: #cbd5e1;    /* indisponível           */
  --lm-color-disabled-surface: #f8fafc;

  /* ── Raios ─────────────────────────────────────────────────────── */
  --lm-radius-xs: 8px;
  --lm-radius-sm: 11px;
  --lm-radius-md: 14px;
  --lm-radius-lg: 18px;
  --lm-radius-xl: 20px;
  --lm-radius-2xl: 24px;
  --lm-radius-pill: 9999px;

  /* ── Sombras ───────────────────────────────────────────────────── */
  --lm-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --lm-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .05);
  --lm-shadow-raised: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -14px rgba(15, 23, 42, .16);
  --lm-shadow-float: 0 1px 2px rgba(15, 23, 42, .04), 0 24px 60px -24px rgba(15, 23, 42, .28);

  /* ── Escala de espaçamento (base 4px) ──────────────────────────── */
  --lm-space-1: 4px;
  --lm-space-2: 8px;
  --lm-space-3: 12px;
  --lm-space-4: 16px;
  --lm-space-5: 24px;
  --lm-space-6: 32px;
  --lm-space-7: 48px;

  /* ── Larguras de conteúdo ──────────────────────────────────────── */
  --lm-shell-width: 28rem;    /* coluna do app mobile (448px) */
  --lm-auth-width: 400px;     /* cartão de autenticação       */
  --lm-content-max: 72rem;    /* teto para conteúdo largo futuro */

  /* ── Tipografia ────────────────────────────────────────────────── */
  --lm-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lm-text-xs: 12px;
  --lm-text-sm: 13px;
  --lm-text-base: 14px;
  --lm-text-md: 15px;
  --lm-text-lg: 17px;
  --lm-text-xl: 20px;
  --lm-text-2xl: 24px;
  --lm-text-3xl: 31px;
  --lm-leading-tight: 1.15;
  --lm-leading-snug: 1.35;
  --lm-leading-normal: 1.5;
  --lm-weight-medium: 500;
  --lm-weight-semibold: 600;
  --lm-weight-bold: 700;
  --lm-weight-extrabold: 800;

  /* ── Transições ────────────────────────────────────────────────── */
  --lm-transition-fast: .15s ease;
  --lm-transition: .18s ease;

  /* ── Foco visível ──────────────────────────────────────────────── */
  --lm-focus-ring: 2px solid var(--lm-color-primary);
  --lm-focus-offset: 2px;

  /* ── Ciclo 2B: larguras de descoberta e perfil (desktop) ───────────
     Aditivos e retrocompatíveis — não substituem os tokens do 2A. */
  --lm-content-wide: 60rem;      /* shell largo das listas (descoberta/matches) */
  --lm-content-profile: 46rem;   /* shell do perfil no desktop                  */
  --lm-modal-width: 26rem;       /* largura máxima de painel de modal           */
}