/* IntelliDuo Design System — Tokens
 * CRM com IA para Clínicas de Estética
 * Brand: Ink — Purple — Mint
 */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* —— Core palette ————————————————————————————————— */
  --ink-50:  #f4f6fa;
  --ink-100: #e3e8f0;
  --ink-200: #c4cee0;
  --ink-300: #95a3c1;
  --ink-400: #5d6e92;
  --ink-500: #334569;
  --ink-600: #1e2a47;
  --ink-700: #15203b;
  --ink-800: #111a30;
  --ink-900: #0F172A;
  --ink-950: #070b18;

  --teal-50:  var(--ink-50);
  --teal-100: var(--ink-100);
  --teal-200: var(--ink-200);
  --teal-300: var(--ink-300);
  --teal-400: var(--ink-400);
  --teal-500: var(--ink-600);
  --teal-600: var(--ink-700);
  --teal-700: var(--ink-800);
  --teal-800: var(--ink-900);
  --teal-900: var(--ink-950);
  --teal-950: var(--ink-950);

  --purple-50:  #f4eefe;
  --purple-100: #e6dafd;
  --purple-200: #cebafa;
  --purple-300: #ae8ef6;
  --purple-400: #9663f1;
  --purple-500: #7C3AED;
  --purple-600: #6325cc;
  --purple-700: #4d1d9e;

  --mint-50:  #ecfaf3;
  --mint-100: #d3f3e2;
  --mint-200: #a8e7c5;
  --mint-300: #74d4a3;
  --mint-400: #46bd86;
  --mint-500: #2F9E73;
  --mint-600: #237c5a;
  --mint-700: #1c6248;
  --mint-800: #154a37;
  --mint-900: #0c2e22;

  --coral-50:  var(--mint-50);
  --coral-100: var(--mint-100);
  --coral-200: var(--mint-200);
  --coral-300: var(--mint-300);
  --coral-400: var(--mint-400);
  --coral-500: var(--mint-500);
  --coral-600: var(--mint-600);
  --coral-700: var(--mint-700);

  --slate-0:   #ffffff;
  --slate-50:  #F8FAFC;
  --slate-100: #eef2f7;
  --slate-200: #dde4ee;
  --slate-300: #c1cbdb;
  --slate-400: #8a96ae;
  --slate-500: #5b6781;
  --slate-600: #3e4860;
  --slate-700: #2a3247;
  --slate-800: #19202f;
  --slate-900: #0F172A;

  --success: var(--mint-500);
  --warning: #f5b302;
  --danger:  #e5354f;
  --info:    var(--ink-400);

  /* —— Semantic ——————————————————————————————————————— */
  --bg:          var(--slate-0);
  --bg-subtle:   var(--slate-50);
  --bg-muted:    var(--slate-100);
  --bg-inverse:  var(--ink-950);
  --surface:     var(--slate-0);
  --surface-2:   var(--slate-50);
  --border:      var(--slate-200);
  --border-strong: var(--slate-300);
  --text:        var(--slate-900);
  --text-muted:  var(--slate-500);
  --text-subtle: var(--slate-400);
  --text-inverse:var(--slate-0);
  --brand:       var(--ink-500);
  --brand-hover: var(--ink-600);
  --brand-soft:  var(--ink-50);
  --accent:      var(--mint-500);
  --health:      var(--mint-400);

  /* —— Gradients —————————————————————————————————————— */
  --grad-brand:   linear-gradient(135deg, var(--ink-900) 0%, var(--purple-500) 60%, var(--mint-500) 100%);
  --grad-surface: linear-gradient(180deg, #ffffff 0%, #F8FAFC 100%);
  --grad-hero:    radial-gradient(ellipse at 15% 0%, rgba(124,58,237,.16), transparent 55%),
                  radial-gradient(ellipse at 90% 10%, rgba(47,158,115,.12), transparent 55%),
                  radial-gradient(ellipse at 50% 100%, rgba(15,23,42,.08), transparent 60%),
                  linear-gradient(180deg, #ffffff 0%, #F8FAFC 100%);
  --grad-dark:    linear-gradient(135deg, #0F172A 0%, #1e1147 50%, #4d1d9e 100%);
  --grad-text:    linear-gradient(90deg, var(--ink-900), var(--purple-500), var(--mint-500));

  /* —— Typography ————————————————————————————————————— */
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Instrument Serif', 'Times New Roman', serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.25rem;
  --text-5xl:  4.5rem;
  --text-6xl:  6rem;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.55;
  --tracking-tight: -0.025em;
  --tracking-hero:  -0.04em;

  /* —— Radii —————————————————————————————————————————— */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-full: 999px;

  /* —— Shadows ———————————————————————————————————————— */
  --shadow-xs: 0 1px 2px rgba(10,42,46,.06);
  --shadow-sm: 0 2px 6px rgba(10,42,46,.07), 0 1px 2px rgba(10,42,46,.04);
  --shadow-md: 0 8px 24px -6px rgba(10,42,46,.12), 0 2px 6px rgba(10,42,46,.06);
  --shadow-lg: 0 24px 48px -12px rgba(10,42,46,.18), 0 8px 16px -8px rgba(10,42,46,.08);
  --shadow-xl: 0 40px 80px -20px rgba(10,42,46,.28);
  --shadow-glow: 0 0 0 1px rgba(31,143,151,.18), 0 20px 40px -12px rgba(31,143,151,.3);

  /* —— 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;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* —— Motion ————————————————————————————————————————— */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* —— Container —————————————————————————————————————— */
  --container: 1200px;
  --container-narrow: 960px;
}

/* —— Base reset ————————————————————————————————————— */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

/* —— Type scale classes ————————————————————————————— */
.display-xl { font-size: clamp(3rem, 7vw, var(--text-6xl)); font-weight: 400; letter-spacing: var(--tracking-hero); line-height: var(--leading-tight); }
.display-lg { font-size: clamp(2.5rem, 5.5vw, var(--text-5xl)); font-weight: 400; letter-spacing: var(--tracking-hero); line-height: var(--leading-tight); }
.display-md { font-size: clamp(2rem, 4vw, var(--text-4xl)); font-weight: 500; letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
.heading-lg { font-size: var(--text-2xl); font-weight: 500; letter-spacing: var(--tracking-tight); }
.heading-md { font-size: var(--text-xl); font-weight: 500; }
.heading-sm { font-size: var(--text-lg); font-weight: 500; }
.body-lg    { font-size: var(--text-md); line-height: var(--leading-body); }
.body       { font-size: var(--text-base); line-height: var(--leading-body); }
.body-sm    { font-size: var(--text-sm); line-height: var(--leading-body); }
.caption    { font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; }
.serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.mono { font-family: var(--font-mono); }

/* —— Utility —————————————————————————————————————————— */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--space-6); }
.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* —— Buttons —————————————————————————————————————————— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-full);
  font-weight: 500; font-size: var(--text-sm);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-base), box-shadow var(--dur-base);
  white-space: nowrap;
}
.btn-primary { background: var(--ink-900); color: var(--slate-0); }
.btn-primary:hover { background: var(--ink-800); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-accent  { background: var(--mint-500); color: var(--slate-0); }
.btn-accent:hover  { background: var(--mint-600); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost   { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover   { background: var(--slate-100); }
.btn-lg { padding: 16px 28px; font-size: var(--text-base); }