/*
 * Design tokens, transcribed from the Figma file (BEkhJWg7WpWgIylA4r7Ywp).
 * Nothing here is chosen in code: colors and spacing are Figma variables,
 * type classes are Figma text styles and elevations are the effect styles
 * described in "Efeitos — Especificação" (section 09).
 * A value that is missing in Figma is missing here too.
 */

:root {
  /* Color variables */
  --blackout: #000000;
  --neutrals-dark: #101010;
  --primary: #404040;
  --neutrals-light: #d9d9d9;
  --white: #ffffff;
  --secondary: #3da35d;

  /* Spacing variables */
  --padding-default: 155px;
  --margin-default: 100px;
  --margin-alternative: 50px;
  --responsividade: 1512px;

  /*
   * Elevation. Effect styles are not Figma variables, so they live here as
   * custom properties. Components reference these five and nothing else.
   */
  --e1: 0 1px 2px -1px rgba(16, 16, 16, 0.05), 0 2px 6px -3px rgba(16, 16, 16, 0.07);
  --e2: 0 1px 2px -1px rgba(16, 16, 16, 0.06), 0 5px 12px -7px rgba(16, 16, 16, 0.12);
  --e2-alta: 0 2px 4px -2px rgba(16, 16, 16, 0.08), 0 10px 20px -11px rgba(16, 16, 16, 0.16);
  --e3: 0 -8px 22px -22px rgba(16, 16, 16, 0.12), 0 14px 34px -26px rgba(16, 16, 16, 0.18);
  --e-painel: 0 2px 6px -3px rgba(0, 0, 0, 0.35), 0 14px 30px -20px rgba(0, 0, 0, 0.45);

  /* Motion curve shared by hover, press, tilt release and entrance */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Families */
  --font-display: "Jost", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/*
 * Text styles. Figma letter spacing is a percentage of the font size, so
 * it is expressed in em: 6% is 0.06em, -2% is -0.02em.
 */

.t-display-60 { font: 300 60px/1.08 var(--font-display); letter-spacing: -0.02em; }
.t-display-40 { font: 300 40px/1.15 var(--font-display); letter-spacing: -0.02em; }
.t-display-30 { font: 300 30px/1.22 var(--font-display); letter-spacing: -0.01em; }

.t-texto-20 { font: 400 20px/1.4 var(--font-body); }
.t-texto-18 { font: 400 18px/1.55 var(--font-body); }
.t-texto-16 { font: 400 16px/1.62 var(--font-body); }
.t-texto-14 { font: 400 14px/1.6 var(--font-body); }
.t-texto-12 { font: 400 12px/1.5 var(--font-body); }

.t-enfase-20 { font: 600 20px/1.4 var(--font-body); }
.t-enfase-18 { font: 600 18px/1.55 var(--font-body); }
.t-enfase-16 { font: 600 16px/1.62 var(--font-body); }
.t-enfase-14 { font: 600 14px/1.6 var(--font-body); }

.t-mono-14 { font: 400 14px/1.6 var(--font-mono); letter-spacing: 0.06em; }
.t-mono-12 { font: 400 12px/1.5 var(--font-mono); letter-spacing: 0.06em; }
.t-mono-10 { font: 400 10px/1.4 var(--font-mono); letter-spacing: 0.06em; }
.t-mono-medium-12 { font: 500 12px/1.5 var(--font-mono); letter-spacing: 0.06em; }