/* tokens/fonts.css */
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk-400.ttf');font-weight:400}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk-500.ttf');font-weight:500}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk-600.ttf');font-weight:600}
@font-face{font-family:'Space Grotesk';src:url('assets/fonts/SpaceGrotesk-700.ttf');font-weight:700}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-400.ttf');font-weight:400}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-500.ttf');font-weight:500}
@font-face{font-family:'Inter';src:url('assets/fonts/Inter-600.ttf');font-weight:600}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/JetBrainsMono-400.ttf');font-weight:400}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/JetBrainsMono-500.ttf');font-weight:500}
@font-face{font-family:'Archivo Black';src:url('assets/fonts/ArchivoBlack-Regular.ttf');font-weight:400}

/* tokens/colors.css */
:root{
/* Base — amostrada por pixel das figuras do whitepaper */
--ink:#10131C;           /* titulos, numeros fortes, texto principal */
--slate:#3B4150;         /* dado neutro, bordas de topo de card */
--body:#4A5568;          /* corpo de texto */
--muted:#696D79;         /* texto secundario, rodapes, eyebrows */
--azul:#1A8FC7;          /* UNICO acento */
--azul-tint:#EAF2F9;     /* preenchimento suave */
--areia:#E5E1D7;         /* trilha de barras, numeracao fantasma */
--paper:#FFFFFF;         /* fundo */
--hairline:#E7E7E8;      /* bordas e filetes frios */
/* Cores de marca — uso restrito a identidade dos produtos */
--brand-cyan:#0FB5BA;    /* o "4" do wordmark; anel orbital */
--brand-azul:#1A4F8F;    /* anel Collabr */
--brand-dourado:#C8941F; /* anel — sempre presente */
--brand-roxo:#7B2CBF;    /* anel L4:Music */
/* Aliases semanticos */
--text-title:var(--ink);
--text-body:var(--body);
--text-muted:var(--muted);
--surface-page:var(--paper);
--surface-tint:var(--azul-tint);
--surface-warm:var(--areia);
--accent:var(--azul);
--border-hairline:var(--hairline);
--bar-track:var(--areia);
--bar-neutral:var(--slate);
--bar-accent:var(--azul);
}

/* tokens/typography.css */
:root{
--font-headline:'Space Grotesk',sans-serif;  /* headlines e UI · 500-700 */
--font-display:'Archivo Black',sans-serif;   /* display raro: numeros gigantes, wordmarks */
--font-body:'Inter',sans-serif;              /* corpo e legendas · 400-600 */
--font-mono:'JetBrains Mono',monospace;      /* eyebrows, chips, fontes/rodapes */
/* Escala das figuras */
--text-eyebrow:14px;      /* mono, UPPERCASE, tracking 0.35em */
--text-h1:64px;           /* 64-88px · Space Grotesk 700 · -0.03em · 1.05 */
--text-h1-max:88px;
--text-lede:24px;         /* 24-28px · Inter 400 · 1.55 */
--text-corpo:18px;        /* 18-20px */
--text-fonte:14px;        /* rodape mono uppercase */
--tracking-tight:-0.03em;
--tracking-eyebrow:0.35em;
--leading-headline:1.05;
--leading-body:1.55;
}

/* tokens/spacing.css */
:root{
/* Grade de 8px */
--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-6:48px;--space-8:64px;--space-12:96px;
/* Ritmo das figuras: eyebrow -> 24 -> H1 -> 24 -> lede -> 64 -> diagrama */
--gap-eyebrow-h1:24px;--gap-h1-lede:24px;--gap-lede-diagrama:64px;
/* Forma */
--radius-card:12px;--radius-bar:10px;--radius-pill:999px;
--card-top-border:6px;   /* slate ou azul como codificacao */
--callout-border:5px;    /* barra lateral esquerda 4-6px */
--bar-height:56px;       /* barras grossas 56-120px */
}

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