/* tokens/fonts.css */
/* Zé Correa — Gestão Real · webfonts
   As três famílias vêm do Google Fonts. Não há arquivo de fonte proprietário
   na marca; se um dia houver, substitua os @import por @font-face locais. */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap");


/* tokens/colors.css */
:root {
  /* ── Base: marca ───────────────────────────── */
  --cobalt-500: #1B55F5;   /* primária */
  --cobalt-400: #2D66FF;   /* hover */
  --cobalt-300: #6D93FF;   /* texto/link sobre escuro */
  --cobalt-tint: rgba(27, 85, 245, 0.12);
  --cyan-600:   #0284C7;   /* suporte em diagramas */
  --orange-500: #FF5C00;   /* secundária, escassa */
  --orange-400: #FF7326;   /* hover */
  --orange-tint: rgba(255, 92, 0, 0.12);

  /* ── Base: neutros (Dark Architecture) ─────── */
  --ink-1000: #090B10;
  --ink-950:  #0C0E15;
  --ink-900:  #14161F;
  --ink-800:  #1C1F2E;
  --ink-700:  #232838;
  --ink-600:  #3B4259;
  --grey-500: #5E687E;
  --grey-400: #7A8299;
  --grey-300: #9CA3AF;
  --grey-200: #C7CAD4;
  --white:    #FFFFFF;

  /* ── Semântico: superfícies ────────────────── */
  --surface-canvas:           var(--ink-1000);
  --surface-container-lowest: var(--ink-950);
  --surface-container:        var(--ink-900);
  --surface-container-high:   var(--ink-800);
  --border-subtle:            var(--ink-700);
  --border-active:            var(--ink-600);

  /* ── Semântico: texto ──────────────────────── */
  --text-primary:   var(--white);
  --text-body:      var(--grey-200);
  --text-muted:     var(--grey-300);
  --text-telemetry: var(--grey-400);
  --text-disabled:  var(--grey-500);
  --text-link:      var(--cobalt-300);
  --text-link-hover: var(--orange-500);

  /* ── Semântico: ação ───────────────────────── */
  --action-primary:        var(--cobalt-500);
  --action-primary-hover:  var(--cobalt-400);
  --action-primary-on:     var(--white);
  --action-critical:       var(--orange-500);
  --action-critical-hover: var(--orange-400);
  --action-critical-on:    var(--ink-1000);
  --focus-ring:            var(--cobalt-500);

  /* ── Semântico: status ─────────────────────── */
  --status-systemic-fill:   var(--cobalt-tint);
  --status-systemic-border: var(--cobalt-500);
  --status-systemic-text:   var(--cobalt-300);
  --status-critical-fill:   var(--orange-tint);
  --status-critical-border: var(--orange-500);
  --status-critical-text:   var(--orange-500);
  --status-neutral-fill:    var(--surface-container);
  --status-neutral-border:  var(--border-subtle);
  --status-neutral-text:    var(--text-muted);

  /* ── Acento laser (topo/lateral de painel) ─── */
  --accent-insight: var(--cobalt-500);
  --accent-friction: var(--orange-500);
}


/* tokens/typography.css */
:root {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* atalhos font shorthand */
  --display-xl:    700 56px/64px var(--font-display);
  --display-lg:    700 44px/52px var(--font-display);
  --headline-lg:   600 32px/38px var(--font-display);
  --headline-md:   600 24px/30px var(--font-display);
  --headline-sm:   500 20px/26px var(--font-display);
  --body-lg:       400 18px/26px var(--font-body);
  --body-md:       400 15px/22px var(--font-body);
  --body-sm:       400 13px/18px var(--font-body);
  --label-code-lg: 500 14px/18px var(--font-mono);
  --label-code-md: 500 12px/16px var(--font-mono);
  --label-code-sm: 600 10px/14px var(--font-mono);

  /* mobile */
  --display-xl-mobile: 700 36px/42px var(--font-display);
  --display-lg-mobile: 700 30px/36px var(--font-display);

  --tracking-display:   -0.04em;
  --tracking-headline:  -0.02em;
  --tracking-body:      -0.005em;
  --tracking-mono:       0.06em;
  --tracking-mono-wide:  0.1em;
  --tracking-wordmark:   0.22em;
}


/* tokens/spacing.css */
:root {
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --container-max: 88rem;   /* 1408px */
  --grid-columns: 12; /* @kind other */
  --grid-gutter: 24px;
  --page-margin: 48px;
  --page-margin-tablet: 32px;
  --page-margin-mobile: 16px;

  /* Carrossel executivo 4:5 */
  --carousel-w: 1080px;
  --carousel-h: 1350px;
  --carousel-pad-x: 80px;
  --carousel-pad-y: 96px;
  --carousel-header-h: 88px;
  --carousel-footer-h: 110px;

  /* Perfil LinkedIn */
  --banner-w: 1584px;
  --banner-h: 396px;
  --avatar-size: 800px;
}


/* tokens/radii.css */
:root {
  --radius-none: 0px;   /* telemetria, tags, terminal, lâmina de PDF */
  --radius-sm:   2px;
  --radius-md:   4px;   /* botão, input, badge, card */
  --radius-lg:   8px;   /* painel grande, dashboard, modal — teto absoluto */
  --border-hairline: 1px;
  --accent-laser: 2px;
}


/* tokens/effects.css */
:root {
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */

  /* Sombra existe apenas para overlay (modal, popover, paleta de comando).
     Conteúdo estático nunca usa sombra — profundidade vem do empilhamento tonal. */
  --shadow-overlay: 0 16px 32px rgba(0, 0, 0, 0.8);

  /* Grid de blueprint usado em capas, banners e lâminas */
  --blueprint-line: #141822;
  --blueprint-size: 56px;
  --blueprint-bg:
    linear-gradient(var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
}


/* styles.css */
@import "./tokens/fonts.css";
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/radii.css";
@import "./tokens/effects.css";


/* estados de interação (exportados do design) */
.x1:hover{color:var(--text-primary) !important}
.x2:hover{color:var(--text-primary) !important}
.x3:hover{color:var(--text-primary) !important}
.x4:hover{color:var(--text-primary) !important}
.x5:hover{background:var(--action-primary-hover) !important}
.x6:hover{background:var(--action-primary-hover) !important}
.x7:hover{border-color:#fff !important;color:var(--text-primary) !important}
.x8:hover{border-color:#fff !important;color:var(--text-primary) !important}
.x9:hover{border-color:#fff !important;color:var(--text-primary) !important}
.x10:hover{border-color:#fff !important;color:var(--text-primary) !important}
.x11:hover{background:var(--surface-container-high) !important}
.x12:hover{background:var(--surface-container-high) !important}
.x13:hover{background:var(--surface-container-high) !important}
.x14:hover{background:var(--surface-container-high) !important}
.x15:hover{background:var(--surface-container-high) !important}
.x16:hover{background:var(--surface-container-high) !important}
.x17:hover{background:var(--surface-container-high) !important}
.x18:hover{background:var(--surface-container-high) !important}
.x19:hover{border-color:#fff !important;background:var(--surface-container-high) !important}
.x20:focus{border-color:var(--focus-ring) !important}
.x21:focus{border-color:var(--focus-ring) !important}
.x22:hover{background:var(--action-critical-hover) !important}

/* base */
html{scroll-behavior:smooth}
body{margin:0;background:#090B10}
img{max-width:100%}
a{color:var(--action-primary)}
a:hover{color:var(--accent-friction)}
@media (max-width:1000px){
  #sobre > div > div, #assinar > div > div{grid-template-columns:1fr !important}
  #sobre > div > div > div:first-child{border-right:0 !important;border-bottom:1px solid var(--border-subtle) !important}
  #assinar > div > div > div:first-child{border-right:0 !important;border-bottom:1px solid var(--border-subtle) !important}
}
@media (max-width:760px){
  #artigos a{grid-template-columns:1fr !important;gap:10px !important}
  #artigos a > span:last-child{text-align:left !important}
  #artigos a > span:last-child br{display:none}
  h1{font-size:40px !important;line-height:1.06 !important}
}