/* ---- tokens/fonts.css ---- */
/* N3 Contabilidade — Webfonts
   NOTE: no font binaries were provided with the brand assets.
   Substitutes from Google Fonts per brand direction:
   - Lora (serif display) — headings
   - Plus Jakarta Sans — body & UI
   Replace with licensed font files + @font-face rules if available. */


/* ---- tokens/colors.css ---- */
/* N3 Contabilidade — Color tokens
   Derived from logo artwork (gradient navy mark). */
:root {
  /* Brand blues (sampled from logo) */
  --brand-950: #0C0C55;
  --brand-900: #10106A;
  --brand-800: #141B7E;   /* primary navy */
  --brand-700: #1A2C91;   /* royal blue (logo highlight) */
  --brand-600: #2440AC;
  --brand-500: #2F52C4;
  --brand-100: #E3E7F6;
  --brand-50:  #EFF1FA;

  /* Neutrals — warm-free grays, no pure white/black */
  --neutral-0:   #FAFAFA;  /* off-white page */
  --neutral-50:  #F4F4F5;  /* alt light section */
  --neutral-100: #E7E7E9;
  --neutral-200: #D4D4D8;
  --neutral-400: #A1A1AA;
  --neutral-500: #71717A;
  --neutral-600: #52525B;
  --neutral-800: #27272A;
  --neutral-900: #18181B;  /* darkest text */
  --neutral-950: #0F0F11;  /* charcoal dark section */

  /* Semantic */
  --success: #1E6B45;
  --warning: #8A6210;
  --danger:  #9B2C2C;
  --info:    var(--brand-700);

  /* Aliases — light surfaces */
  --surface-page: var(--neutral-0);
  --surface-alt: var(--neutral-50);
  --surface-card: #FFFFFF;
  --surface-dark: var(--neutral-950);
  --surface-brand: var(--brand-800);

  --text-heading: var(--neutral-900);
  --text-body: var(--neutral-800);
  --text-muted: var(--neutral-500);
  --text-on-dark: #F4F4F5;
  --text-on-dark-muted: #A1A1AA;
  --text-brand: var(--brand-800);

  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-900);
  --border-on-dark: rgba(244, 244, 245, 0.16);

  --interactive: var(--brand-800);
  --interactive-hover: var(--brand-900);
  --interactive-active: var(--brand-950);
  --focus-ring: 0 0 0 2px var(--neutral-0), 0 0 0 4px var(--brand-700);

  /* Brand gradient — reserved for the logo mark & rare accents */
  --brand-gradient: linear-gradient(135deg, #1A2C91 0%, #10106A 100%); /* @kind other */
}

/* ---- tokens/typography.css ---- */
/* N3 Contabilidade — Typography tokens
   Editorial contrast: elegant serif display over technical sans body. */
:root {
  --font-serif-display: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Scale (desktop) */
  --text-display-xl: 500 clamp(3rem, 6vw, 5.25rem)/1.05 var(--font-serif-display);   /* hero */
  --text-display: 500 clamp(2.25rem, 4vw, 3.5rem)/1.1 var(--font-serif-display);     /* h1 */
  --text-h2: 500 2.25rem/1.15 var(--font-serif-display);
  --text-h3: 500 1.5rem/1.3 var(--font-serif-display);
  --text-lead: 400 1.25rem/1.6 var(--font-sans);
  --text-body-lg: 400 1.0625rem/1.7 var(--font-sans);
  --text-body: 400 0.9375rem/1.65 var(--font-sans);
  --text-small: 400 0.8125rem/1.5 var(--font-sans);
  --text-overline: 600 0.75rem/1.4 var(--font-sans);   /* + letter-spacing .12em, uppercase */
  --text-numeric: 500 1rem/1.4 var(--font-sans);       /* + font-variant-numeric: tabular-nums */

  --tracking-overline: 0.12em;
  --tracking-display: -0.01em;
}

/* ---- tokens/layout.css ---- */
/* N3 Contabilidade — Spacing, radii, borders, shadows, motion */
:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;   /* minimum vertical gap between sections (desktop) */
  --space-10: 128px;
  --space-11: 160px;

  --section-pad-y: var(--space-9);
  --container-max: 1200px;
  --container-pad-x: 32px;

  /* Radii — restrained. Never larger than --radius-md. */
  --radius-sm: 2px;
  --radius-md: 6px;

  /* Borders — hairlines only */
  --border-w: 1px;

  /* Shadows — quiet, used sparingly (dialogs, popovers) */
  --shadow-card: 0 1px 2px rgba(15, 15, 17, 0.05);
  --shadow-raised: 0 4px 16px rgba(15, 15, 17, 0.08);
  --shadow-overlay: 0 12px 40px rgba(15, 15, 17, 0.18);

  /* Motion — brief, restrained; opacity/color fades, no bounces */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ---- tokens/base.css ---- */
/* N3 Contabilidade — base element styles */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-heading);
  font-family: var(--font-serif-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--brand-800);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-950); text-decoration: underline; }

::selection { background: var(--brand-100); color: var(--brand-950); }