/* ============================================================
   Evidia · Design Tokens
   Brand: Evidia — rede médica e plataforma de governança
   assistencial para a saúde suplementar.
   ============================================================ */

/* --- Fonts ---------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&family=Montserrat:wght@200;300;400;500;600;700&display=swap");

/* ============================================================
   Color tokens
   The Evidia palette descends from the signature dotted arc:
   magenta → purple → indigo → blue → cyan → mint.
   Blue is the institutional pillar (credibility, technical
   authority); purple/cyan/mint accents inject the network
   metaphor and the healthtech edge.
   ============================================================ */
:root {
  /* — Core blues (primary brand) — */
  --blue-900: #0a2540; /* Deep navy — dark template background, deep text */
  --blue-800: #0e3a6b;
  --blue-700: #134b8d;
  --blue-600: #1e62a4; /* PRIMARY · Evidia Blue · CTA, buttons, blocks */
  --blue-500: #2a78c0;
  --blue-400: #4d92d0;
  --blue-300: #8bb6e0;
  --blue-200: #c4dbef;
  --blue-100: #e6f0f9;
  --blue-050: #f3f7fc;

  /* — Cyan family (data, tech, accent) — */
  --cyan-700: #0178ab; /* Secondary deep cyan */
  --cyan-500: #00a3e0; /* Cyan accent · highlights, data viz */
  --cyan-400: #34bce8;
  --cyan-200: #b6e3f4;
  --cyan-100: #e0f3fb;

  /* — Indigo / Purple family (network, governance) — */
  --indigo-700: #2f2f6a;
  --indigo-600: #444ca2; /* Indigo accent */
  --indigo-500: #5a63bf;
  --purple-700: #3f2e6b;
  --purple-600: #583e96; /* Purple accent */
  --purple-500: #7257b5;
  --magenta-500: #a93b8e; /* Far end of the brand arc */

  /* — Mint / Green (success, network ends) — */
  --mint-500: #1ec9a0; /* Mint accent · success */
  --mint-300: #7be0c2;

  /* — Neutrals — */
  --ink-950: #050a14; /* Pure dark template canvas */
  --ink-900: #0d1320;
  --ink-800: #1a2233;
  --ink-700: #2c3447;
  --ink-600: #4a5468;
  --ink-500: #6b7488;
  --ink-400: #9098a8;
  --ink-300: #b9bfca;
  --ink-200: #d8dce3;
  --ink-100: #ebedf1;
  --ink-050: #f5f6f8;
  --white:   #ffffff;

  /* — Semantic — */
  --bg:           var(--white);
  --bg-soft:      var(--ink-050);
  --bg-tint-blue: var(--blue-050);
  --bg-dark:      var(--ink-950);
  --bg-dark-soft: var(--blue-900);

  --fg:           var(--blue-900);     /* Default body text */
  --fg-muted:     var(--ink-600);
  --fg-subtle:    var(--ink-500);
  --fg-on-dark:   var(--white);
  --fg-on-dark-muted: rgba(255,255,255,0.72);

  --line:         var(--ink-200);
  --line-soft:    var(--ink-100);
  --line-on-dark: rgba(255,255,255,0.14);

  --primary:      var(--blue-600);
  --primary-hover:var(--blue-700);
  --primary-active:var(--blue-800);
  --on-primary:   var(--white);

  --accent-cyan:  var(--cyan-500);
  --accent-purple:var(--purple-600);
  --accent-mint:  var(--mint-500);

  /* — Functional UI states · product only, never marketing —
     Deep ink-saturated dots over washed-out tints. No flat
     saturated red/green/yellow. The institutional brand carries
     itself with blue + navy + cyan + indigo; these tokens live
     inside the product UI only. */
  --success:        #1f7a55;
  --success-bg:     #e7f3ec;
  --info:           var(--cyan-700);  /* #0178AB */
  --info-bg:        #e0f1f9;
  --attention:      #a06a0c;          /* deep ochre, not amber */
  --attention-bg:   #fbf1de;
  --critical:       #9a3a32;          /* burgundy, not red */
  --critical-bg:    #f7e6e4;

  /* Legacy aliases (keep existing components working) */
  --warning: var(--attention);
  --danger:  var(--critical);

  /* — Brand arc gradient (the signature) — */
  --arc-magenta:  #a93b8e;
  --arc-purple:   #6b3f9c;
  --arc-indigo:   #444ca2;
  --arc-blue:     #1e62a4;
  --arc-deep:     #0178ab;
  --arc-cyan:     #00a3e0;
  --arc-aqua:     #2cc5dc;
  --arc-mint:     #1ec9a0;
  --arc-green:    #2dd49a;

  --grad-arc: linear-gradient(
    90deg,
    var(--arc-magenta)  0%,
    var(--arc-purple)  12%,
    var(--arc-indigo)  24%,
    var(--arc-blue)    38%,
    var(--arc-deep)    52%,
    var(--arc-cyan)    66%,
    var(--arc-aqua)    80%,
    var(--arc-mint)    92%,
    var(--arc-green)  100%
  );

  --grad-blue-deep: linear-gradient(135deg, #0a2540 0%, #134b8d 60%, #1e62a4 100%);
  --grad-blue-soft: linear-gradient(180deg, #f3f7fc 0%, #e6f0f9 100%);
  --grad-cyan-blue: linear-gradient(135deg, #1e62a4 0%, #0178ab 50%, #00a3e0 100%);

  /* ============================================================
     Typography
     Display + body share the same family (Inter Tight) — the
     deck shipped with Inter Tight Regular + SemiBold + Montserrat
     for utility/captions. Inter Tight reads premium institutional;
     Montserrat is reserved for tracked uppercase eyebrows.
     ============================================================ */
  --font-display: "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
  --font-eyebrow: "Montserrat", "Inter Tight", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (1.250 minor third, tuned for institutional layouts) */
  --fs-xs:   0.75rem;   /* 12 — micro labels */
  --fs-sm:   0.875rem;  /* 14 — captions, legal */
  --fs-base: 1rem;      /* 16 — body */
  --fs-md:   1.125rem;  /* 18 — body lead */
  --fs-lg:   1.375rem;  /* 22 — h5 / list lead */
  --fs-xl:   1.75rem;   /* 28 — h4 */
  --fs-2xl:  2.25rem;   /* 36 — h3 */
  --fs-3xl:  3rem;      /* 48 — h2 */
  --fs-4xl:  4rem;      /* 64 — h1 */
  --fs-5xl:  5.5rem;    /* 88 — display */
  --fs-6xl:  7.5rem;    /* 120 — hero numerals */

  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-normal: 1.42;
  --lh-loose:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.14em; /* eyebrows / labels */

  /* ============================================================
     Spacing — 4px base
     ============================================================ */
  --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;

  /* Radii — institutional, restrained.
     Buttons + cards use a generous pill / soft-rect; never sharp. */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;  /* default card */
  --radius-lg:   20px;  /* feature card */
  --radius-xl:   28px;  /* hero block, large CTA card */
  --radius-pill: 999px; /* CTAs */

  /* Borders */
  --border-1: 1px solid var(--line);
  --border-soft: 1px solid var(--line-soft);

  /* Shadows — subtle, premium; never the "AI slop" puffy drop shadow */
  --shadow-xs: 0 1px 2px rgba(10, 37, 64, 0.04);
  --shadow-sm: 0 2px 6px rgba(10, 37, 64, 0.06), 0 1px 2px rgba(10, 37, 64, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 37, 64, 0.08), 0 2px 6px rgba(10, 37, 64, 0.04);
  --shadow-lg: 0 24px 56px rgba(10, 37, 64, 0.12), 0 4px 10px rgba(10, 37, 64, 0.06);
  --shadow-ring-blue: 0 0 0 4px rgba(30, 98, 164, 0.18);

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ============================================================
   Element defaults
   ============================================================ */
html, body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--blue-900);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); font-weight: 600; line-height: var(--lh-tight); }
h2 { font-size: var(--fs-3xl); font-weight: 600; }
h3 { font-size: var(--fs-2xl); font-weight: 600; }
h4 { font-size: var(--fs-xl);  font-weight: 600; }
h5 { font-size: var(--fs-lg);  font-weight: 600; }
h6 { font-size: var(--fs-md);  font-weight: 600; }

p { margin: 0 0 1em 0; line-height: var(--lh-normal); text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: 600;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--cyan-500);
}
.eyebrow--ink { color: var(--ink-600); }
.eyebrow--white { color: rgba(255,255,255,0.78); }

.lead {
  font-size: var(--fs-md);
  color: var(--fg-muted);
  line-height: var(--lh-loose);
  max-width: 60ch;
}

a {
  color: var(--blue-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--blue-800); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: rgba(30, 98, 164, 0.18); color: var(--blue-900); }