/* ────────────────────────────────────────────────────────────────
   Maia Health — Design Tokens
   Healthcare EMR ("Prontuário digital inteligente")
   Source: Figma files (V2 - Sistema, Telas, Tabela Dinâmica,
   Research assistant, Abrir questionário no prontuário)
   ──────────────────────────────────────────────────────────────── */

/* Inter from Google Fonts (matches Figma usage exactly) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap');

:root {
  /* ────────  Brand — the Maia symbol gradient  ──────── */
  --brand-mint:        #10CF95;   /* gradient stop 1 — symbol */
  --brand-cyan:        #41C8E5;   /* gradient stop 2 — symbol */
  --brand-teal:        #0EA779;   /* gradient stop 3 — symbol */
  --brand-cyan-glow:   rgba(65, 200, 229, 0.40); /* soft cyan box-shadow */
  --brand-gradient:    linear-gradient(180deg,
                         var(--brand-mint) 0%,
                         var(--brand-cyan) 33%,
                         var(--brand-teal) 100%);

  /* ────────  Primary action — Maia blue  ────────
     Google blue (#1A73E8). Used for primary buttons, links,
     selected nav items, focus rings, info icons. */
  --blue-500:          #1A73E8;   /* primary */
  --blue-400:          #4999E2;   /* lighter accent */
  --blue-50:           #E8F0FE;   /* tint bg */

  /* ────────  Status — answers / cycle states  ──────── */
  --status-done:       #008069;   /* "Concluído" — deep green dot */
  --status-done-bg:    #E6F2EF;
  --status-late:       #D83A52;   /* "Em atraso" — red dot */
  --status-late-bg:    #FBEAEC;
  --status-sent:       #FFB70A;   /* "Enviado" — amber dot */
  --status-sent-bg:    #FFF6E0;
  --status-pending:    #D9D9D9;   /* "A enviar" — neutral grey dot */
  --status-pending-bg: #F4F4F4;

  /* ────────  Neutrals — Untitled UI grey ramp (cool)  ──────── */
  --gray-25:           #FCFCFD;
  --gray-50:           #F9FAFB;
  --gray-100:          #F2F4F7;
  --gray-200:          #EAECF0;
  --gray-300:          #D0D5DD;   /* default border */
  --gray-400:          #98A2B3;
  --gray-500:          #667085;   /* secondary text */
  --gray-600:          #475467;
  --gray-700:          #344054;   /* body text */
  --gray-800:          #1D2939;
  --gray-900:          #101828;   /* heading */

  /* ────────  Warm neutrals — used heavily in body copy  ────────
     The Figma file mixes Untitled UI greys with this warm ramp.
     Both ramps coexist; the warm one is dominant for text. */
  --warm-1000:         #000000;
  --warm-800:          #363636;   /* primary text on cards */
  --warm-600:          #707070;   /* secondary text */
  --warm-500:          #808080;
  --warm-400:          #888888;
  --warm-300:          #AAAAAA;   /* placeholder / disabled label */
  --warm-200:          #CCCCCC;   /* light border */
  --warm-150:          #D9D9D9;
  --warm-100:          #EEEEEE;   /* hairline / divider */
  --warm-75:           #F4F4F4;   /* page bg */
  --warm-50:           #F5F5F5;
  --white:             #FFFFFF;

  /* ────────  Semantic foreground / background  ──────── */
  --fg-1:              var(--warm-800);   /* primary */
  --fg-2:              var(--warm-600);   /* secondary */
  --fg-3:              var(--warm-300);   /* placeholder / disabled */
  --fg-inverse:        var(--white);
  --fg-link:           var(--blue-500);

  --bg-page:           var(--warm-75);    /* app shell background */
  --bg-card:           var(--white);
  --bg-muted:          var(--warm-75);    /* input fills */
  --bg-hover:          var(--warm-100);   /* hover sheen */

  --border-default:    var(--warm-100);   /* most cards/dividers */
  --border-strong:     var(--gray-300);   /* inputs / pills */
  --border-subtle:     var(--warm-200);

  /* ────────  Special accents  ──────── */
  --accent-purple:     #9747FF;   /* used for "tags" stroke in some screens */
  --accent-blue-soft:  #4999E2;

  /* ────────  Radii (rem-equivalent, but Figma uses px exactly)  ──────── */
  --radius-xs:    4px;   /* small chips, mini-buttons */
  --radius-sm:    8px;   /* buttons, inputs (compact) */
  --radius-md:    12px;  /* inputs, larger buttons, cards */
  --radius-lg:    16px;  /* large card / panel, app chrome */
  --radius-pill:  999px; /* tags, status pills */

  /* ────────  Spacing (4-px base; Figma uses 4/8/12/16/20/24)  ──────── */
  --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;

  /* ────────  Elevation — Untitled UI -ish  ──────── */
  --shadow-xs:    0px 1px 2px 0px rgba(16,24,40,0.05);
  --shadow-sm:    0px 1px 3px 0px rgba(16,24,40,0.10),
                  0px 1px 2px 0px rgba(16,24,40,0.06);
  --shadow-md:    0px 4px 8px -2px rgba(16,24,40,0.10),
                  0px 2px 4px -2px rgba(16,24,40,0.06);
  --shadow-card:  0px 0px 12px 4px rgba(0,0,0,0.04),
                  0px 4px 16px 0px rgba(0,0,0,0.12);   /* the signature Maia card shadow */
  --shadow-modal: 0px 8px 24px 0px rgba(0,0,0,0.18);
  --shadow-glow-cyan: 0px 0px 4px 0px var(--brand-cyan-glow); /* upgrade button */

  /* ────────  Typography — fluid scale  ──────── */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Sizes (Figma uses 9, 10, 12, 14, 16, 21.6, 24, 28 most often) */
  --text-3xs:  9px;
  --text-2xs:  10px;
  --text-xs:   12px;   /* dominant body in tables/chips */
  --text-sm:   14px;   /* dominant body in cards */
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   21.6px;
  --text-2xl:  24px;
  --text-3xl:  28px;   /* page title */
  --text-4xl:  36px;

  /* Letter-spacing — headings use negative tracking */
  --tracking-tight: -0.04em;
  --tracking-snug:  -0.02em;
  --tracking-normal: 0;
}

/* ────────────────────────────────────────────────────────────────
   Semantic typography classes
   ──────────────────────────────────────────────────────────────── */
html { font-family: var(--font-sans); color: var(--fg-1); }

h1, .h1 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--text-3xl); line-height: 1.5;
  letter-spacing: var(--tracking-snug);
  color: var(--warm-1000);
}
h2, .h2 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--text-2xl); line-height: 1.3;
  letter-spacing: var(--tracking-snug);
  color: var(--warm-800);
}
h3, .h3 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--text-xl); line-height: 1.3;
  color: var(--warm-800);
}
h4, .h4 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--text-base); line-height: 1.4;
  color: var(--warm-800);
}
h5, .h5 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--text-sm); line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--warm-800);
}

p, .body {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--text-sm); line-height: 1.3;
  color: var(--warm-600);
}
.body-strong   { font-weight: 500; color: var(--warm-800); }
.body-sm       { font-size: var(--text-xs); line-height: 1.4; color: var(--warm-600); }
.caption       { font-size: var(--text-xs); line-height: 1; color: var(--warm-300); font-weight: 500; }
.micro         { font-size: var(--text-2xs); line-height: 1; color: var(--warm-600); font-weight: 500; }
.label         { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--warm-800); }

a, .link       { color: var(--fg-link); text-decoration: none; }
a:hover        { text-decoration: underline; }

code, .mono    { font-family: var(--font-mono); font-size: var(--text-xs); }