/* /styles/tokens.css — EloClinic: verde como base, vermelho apenas como acento */

:root {
  /* Brand (verde EloClinic #649664) */
  --color-brand-50:  #f4fcf7;
  --color-brand-100: #e0f5e9;
  --color-brand-200: #c0ebd3;
  --color-brand-300: #90d9b0;
  --color-brand-400: #5bbf87;
  --color-brand-500: #649664;
  --color-brand-600: #4a7a4a;
  --color-brand-700: #326b4b;
  --color-brand-800: #265238;
  --color-brand-900: #1a3a27;
  --color-brand-950: #0f2117;

  --color-accent-50:  #f0faf4;
  --color-accent-100: #d7f0e2;
  --color-accent-200: #aee1c6;
  --color-accent-300: #7ecba6;
  --color-accent-400: #52b384;
  --color-accent-500: #649664;
  --color-accent-600: #4a7a4a;
  --color-accent-700: #326b4b;
  --color-accent-800: #265238;
  --color-accent-900: #1a3a27;
  --color-accent-950: #0f2117;

  /* Red — SOMENTE acento: botão CTA WhatsApp e linha decorativa h2 */
  --color-red-50:   #fff5f5;
  --color-red-100:  #ffe0e0;
  --color-red-200:  #ffc0c0;
  --color-red-300:  #ff8888;
  --color-red-400:  #ff4444;
  --color-red-500:  #fa0000;
  --color-red-600:  #d40000;
  --color-red-700:  #aa0000;

  /* Neutrals */
  --color-slate-0:   #ffffff;
  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1f2937;
  --color-slate-900: #0f172a;

  /* Semantic */
  --color-success-50:  #ecfdf5;
  --color-success-600: #16a34a;
  --color-warning-50:  #fffbeb;
  --color-warning-600: #d97706;
  --color-danger-50:   #fef2f2;
  --color-danger-600:  #dc2626;

  /* Aliases */
  --color-bg:       var(--color-slate-0);
  --color-bg-muted: var(--color-brand-50);
  --color-surface:  var(--color-slate-0);
  --color-surface-2: var(--color-brand-50);

  --color-text:       var(--color-slate-900);
  --color-text-muted: var(--color-slate-600);
  --color-text-soft:  var(--color-slate-500);

  --color-border:   var(--color-brand-200);
  --color-border-2: var(--color-brand-300);

  --color-focus:     var(--color-accent-500);
  --focus-ring:      0 0 0 3px rgba(100, 150, 100, 0.22);
  --focus-ring-strong: 0 0 0 3px rgba(100, 150, 100, 0.35);

  --color-link:       var(--color-accent-700);
  --color-link-hover: var(--color-accent-800);

  /* PRIMARY = verde (botão Entrar, ações da nav) */
  --color-primary:          var(--color-accent-500);
  --color-primary-hover:    var(--color-accent-600);
  --color-primary-contrast: #ffffff;

  --color-button-primary-bg:       var(--color-primary);
  --color-button-primary-bg-hover: var(--color-primary-hover);
  --color-button-primary-text:     var(--color-primary-contrast);
  --color-button-ghost-bg:         var(--color-slate-100);
  --color-button-ghost-bg-hover:   var(--color-slate-200);
  --color-button-ghost-text:       var(--color-slate-900);

  --color-badge-bg:   var(--color-brand-100);
  --color-badge-text: var(--color-brand-900);

  --color-header-bg: rgba(255, 255, 255, 0.90);

  /* Glows */
  --glow-brand:  rgba(192, 235, 211, 0.7);
  --glow-accent: rgba(144, 217, 176, 0.55);

  /* Shadows */
  --shadow-color-xs: rgba(15, 23, 42, 0.04);
  --shadow-color-sm: rgba(15, 23, 42, 0.06);
  --shadow-color-md: rgba(15, 23, 42, 0.10);
  --shadow-color-lg: rgba(15, 23, 42, 0.12);
  --shadow-color-xl: rgba(15, 23, 42, 0.16);

  --shadow-brand-sm: 0 4px 16px rgba(100, 150, 100, 0.15);
  --shadow-brand-md: 0 8px 32px rgba(100, 150, 100, 0.20);
  --shadow-brand-lg: 0 16px 48px rgba(100, 150, 100, 0.25);

  /* Sombra vermelha: só pros botões CTA */
  --shadow-cta-sm: 0 4px 16px rgba(250, 0, 0, 0.20);
  --shadow-cta-md: 0 8px 28px rgba(250, 0, 0, 0.25);
  --shadow-cta-lg: 0 14px 40px rgba(250, 0, 0, 0.28);

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-30: 1.875rem;
  --font-size-36: 2.25rem;
  --font-size-48: 3rem;

  --line-120: 1.2;
  --line-140: 1.4;
  --line-150: 1.5;
  --line-160: 1.6;

  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;

  --letter-tight:  -0.02em;
  --letter-normal: 0em;

  /* Spacing */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius */
  --radius-6:  0.375rem;
  --radius-10: 0.625rem;
  --radius-12: 0.75rem;
  --radius-14: 0.875rem;
  --radius-16: 1rem;
  --radius-18: 1.125rem;
  --radius-20: 1.25rem;
  --radius-24: 1.5rem;

  /* Shadows */
  --shadow-xs: 0 1px 2px var(--shadow-color-xs);
  --shadow-sm: 0 1px 3px var(--shadow-color-sm);
  --shadow-md: 0 6px 16px var(--shadow-color-md);
  --shadow-lg: 0 14px 34px var(--shadow-color-lg);
  --shadow-xl: 0 20px 48px var(--shadow-color-xl);

  /* Layout */
  --container-max: 1360px;
  --container-pad: var(--space-4);
  --header-height: 72px;
  --section-pad-y: var(--space-16);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-120: 120ms;
  --dur-200: 200ms;
  --dur-300: 300ms;
  --dur-500: 500ms;

  /* Z-Index */
  --z-header: 50;
  --z-nav:    60;
  --z-modal:  100;
}