/* ============================================================
   Sinopta: tokens do design system (brandbook sinopta.fig).
   Fonte: projeto Claude Design 'Sinopta': NÃO editar à mão os
   valores; mudanças de marca entram primeiro no design system.
   ============================================================ */
/* ============================================================
   Sinopta: Fonts
   Brand faces: Manrope (display/headings) + Inter (body/UI/mono-ish).
   NOTE: the .fig ships no font binaries, so these load the genuine
   families from Google Fonts CDN (exact faces, not substitutes).
   Swap for self-hosted @font-face + bundled .woff2 in production.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   Sinopta: Color tokens
   Extracted verbatim from the Sinopta brandbook (sinopta.fig).
   "Navy é a base. Verde é energia." Navy organizes; the single
   green accent (the spark) is reserved for energy/emphasis.
   ============================================================ */
:root {
  /* ---- Navy: base ------------------------------------------ */
  --navy-900: #0A1C2B;
  --navy-800: #112A3E; /* oficial · brand base (vector) */
  --navy-700: #1A3A54;
  --navy-600: #244D6E;
  --navy-500: #356188;

  /* ---- Verde-spark: accent --------------------------------- */
  --green-600: #8AA82F; /* for small text/icons on light */
  --green-500: #B8D54D; /* oficial · spark, large fills only  */
  --green-400: #C9E070;
  --green-300: #DCEB9B;
  --green-100: #F1F7D6;

  /* ---- Neutros (viés navy) ---------------------------------- */
  --ink:       #0C1A2F;
  --slate-700: #33415C;
  --slate-500: #5B6B86;
  --slate-400: #8593A8;
  --slate-300: #C1CAD8;
  --slate-200: #DDE3EC;
  --slate-100: #EEF1F6;
  --slate-50:  #F7F9FC;
  --white:     #FFFFFF;

  /* ---- Semantic (status) ------------------------------------ */
  --success: #2F8F5B;
  --warning: #B5761B;
  --danger:  #C0392B;
  --info:    #2D5F9E;

  /* ============================================================
     Semantic aliases: reference these in components.
     ============================================================ */
  --brand:            var(--navy-800);
  --accent:           var(--green-500); /* graphic / large only */
  --accent-ink:       var(--green-600); /* accent as small text/icon on light */

  /* Text */
  --text-primary:     var(--navy-800);
  --text-secondary:   var(--slate-500);
  --text-muted:       var(--slate-400);
  --text-on-dark:     #FFFFFF;
  --text-on-dark-dim: var(--slate-300);
  --text-eyebrow:     var(--green-600);

  /* Surfaces */
  --surface-page:     var(--slate-50);
  --surface-card:     var(--white);
  --surface-subtle:   var(--slate-100);
  --surface-inverse:  var(--navy-800);
  --surface-inverse-2: var(--navy-900);

  /* Borders */
  --border:           var(--slate-200);
  --border-strong:    var(--slate-300);
  --border-on-dark:   rgba(255,255,255,0.12);

  /* Focus ring (spark halo) */
  --focus-ring:       var(--green-100);
}

/* ============================================================
   Tema escuro: "Navy é a base." O modo escuro é o navy levado
   ao fim: página navy-900, superfícies navy-800, texto claro.
   Ative com data-theme="dark" no elemento raiz. Componentes que
   referenciam os aliases semânticos (--surface-*, --text-*,
   --border, --focus-ring) viram escuros automaticamente. O
   verde-spark sobe para green-500 (brilha e mantém AAA no navy).
   ============================================================ */
:root[data-theme="dark"] {
  /* Text */
  --text-primary:     #EAF0F7;
  --text-secondary:   #93A6C2;
  --text-muted:       #6E82A0;
  --text-on-dark:     #FFFFFF;
  --text-on-dark-dim: var(--slate-300);
  --text-eyebrow:     var(--green-500);

  /* Accent as small text/icon on dark → o verde brilhante */
  --accent-ink:       var(--green-500);

  /* Surfaces */
  --surface-page:     #0A1826; /* navy mais profundo que a marca */
  --surface-card:     #132B40; /* ~navy-800, um degrau acima da página */
  --surface-subtle:   var(--navy-700);
  --surface-inverse:  var(--navy-800);
  --surface-inverse-2: var(--navy-900);

  /* Borders: hairlines claras sobre o navy */
  --border:           rgba(255,255,255,0.10);
  --border-strong:    rgba(255,255,255,0.18);
  --border-on-dark:   rgba(255,255,255,0.12);

  /* Focus ring (spark halo): verde translúcido no escuro */
  --focus-ring:       rgba(184,213,77,0.28);
}

/* Respeita a preferência do SO quando o app não fixa data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text-primary: #EAF0F7; --text-secondary: #93A6C2; --text-muted: #6E82A0;
    --text-eyebrow: var(--green-500); --accent-ink: var(--green-500);
    --surface-page: #0A1826; --surface-card: #132B40; --surface-subtle: var(--navy-700);
    --border: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18);
    --focus-ring: rgba(184,213,77,0.28);
  }
}

/* ============================================================
   Sinopta: Typography tokens
   Manrope (display): arredondada-humanista, personality.
   Inter (corpo/UI): legibilidade em texto denso e técnico.
   Scale extracted verbatim from the brandbook type specimen.
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extrabold:800; /* @kind font */

  /* ---- Type scale (size / line-height / weight) -------------
     Display  48 / 56 · 800   (hero uses 52 / 56.16 · 700)
     H1       34 / 42 · 700
     H2       24 / 32 · 700   (section titles render 34 · 500)
     H3       19 / 28 · 600
     Corpo    16 / 26 · 400
     Legenda  13 / 20 · 500
     ---------------------------------------------------------- */
  --fs-display:   48px;  --lh-display:   56px;
  --fs-h1:        34px;  --lh-h1:        42px;
  --fs-h2:        24px;  --lh-h2:        32px;
  --fs-h3:        19px;  --lh-h3:        28px;
  --fs-body:      16px;  --lh-body:      26px;
  --fs-body-lg:   18px;  --lh-body-lg:   29.25px;
  --fs-body-sm:   14px;  --lh-body-sm:   22px;
  --fs-caption:   13px;  --lh-caption:   20px;
  --fs-label:     12px;  --lh-label:     18px;

  /* Tracking */
  --tracking-display: -0.52px;
  --tracking-h:       -0.34px;
  --tracking-tight:   -0.18px;
  --tracking-eyebrow: 2.34px;  /* uppercase section eyebrow */
  --tracking-caps:    1.68px;  /* uppercase micro-labels */
}

/* ---- Convenience text classes (optional) ------------------- */
.t-display { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); color: var(--text-primary); }
.t-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-h); color: var(--text-primary); }
.t-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-h); color: var(--text-primary); }
.t-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-primary); }
.t-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }
.t-caption { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-muted); }
.t-eyebrow { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-eyebrow); }

/* ============================================================
   Sinopta: Spacing, radii, shadows, layout
   Values transcribed from the brandbook (button, panel, card,
   table, focus ring). Grid-neutral: keep the exact numbers.
   ============================================================ */
:root {
  /* ---- Spacing scale ---------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  64px;
  --space-9:  80px;

  /* ---- Radii ------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   10px;  /* buttons, inputs */
  --radius-lg:   14px;  /* icon tiles */
  --radius-xl:   16px;  /* cards / panels */
  --radius-2xl:  27.26px; /* app-icon squircle (from brand mark) */
  --radius-pill: 9999px;

  /* ---- Borders ---------------------------------------------- */
  --border-width: 1px;

  /* ---- Shadows ---------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(8,28,62,0.06);
  --shadow-md: 0 4px 16px 0 rgba(8,28,62,0.08);
  --shadow-lg: 0 12px 40px 0 rgba(8,28,62,0.12);
  --ring:      0 0 0 4px var(--focus-ring); /* spark focus halo */

  /* ---- Layout ----------------------------------------------- */
  --content-max: 1100px;
  --gutter: 40px;

  /* ---- Motion ----------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
}