/* DigitaJus — tokens de marca. Fonte: ~/DCCB-TECNOLOGIA/Logo e Banner/tokens/ (skill digitajus-design). NÃO editar valores da fundação sem decisão de marca. */
/* Webfonts — DigitaJus type system.
   Spectral (serif), Hanken Grotesk (sans), IBM Plex Mono (labels/code).
   All three are open-source (OFL) and served from Google Fonts.
   To self-host, replace this @import with local @font-face rules pointing at
   .woff2 binaries placed under assets/fonts/. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500&family=Hanken+Grotesk:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
/* DigitaJus — Color system
   Palette: deep navy base, warm ivory paper, near-black ink, a family of
   product blues, and warm-leaning neutrals. No warm accents (no orange/gold):
   the brand reads elegant, institutional and technological. */
:root {
  /* ---- Base / institutional ---- */
  --navy: #0A182E;        /* primary brand color; the "house" navy */
  --navy-700: #14253F;    /* raised navy surfaces */
  --navy-500: #1B2C49;    /* hover on navy */
  --ink: #17191E;         /* near-black, slightly warm — body text */
  --black: #000000;       /* pure black — monochrome registration only */

  /* ---- Paper / surfaces ---- */
  --ivory: #F1ECE1;       /* warm ivory — the canvas/paper */
  --ivory-card: #FCFBF7;  /* card surface on ivory */
  --white: #FFFFFF;       /* raised / mono backgrounds */

  /* ---- Product accents (one blue per surface; shared chroma) ---- */
  --azure: #2E5AAC;       /* DigitaJus — the master accent */
  --royal: #2747B0;       /* JusOffice */
  --slate: #35607F;       /* Gabinete Digital */
  --steel: #4666A8;       /* DigitaJus Automator */
  --azure-300: #5E8FE0;   /* light azure — accents on navy/dark */

  /* ---- Neutrals (warm-leaning to sit with ivory) ---- */
  --gray-600: #6B7382;    /* secondary text */
  --gray-400: #9A9483;    /* muted taupe — kickers, captions */
  --gray-200: #C7C2B6;    /* faint labels, numerals */
  --hairline: rgba(10, 24, 46, 0.10); /* 1px borders & rules */
  --hairline-soft: rgba(10, 24, 46, 0.07);

  /* ---- Semantic aliases ---- */
  --color-bg: var(--ivory);
  --color-surface: var(--ivory-card);
  --color-surface-raised: var(--white);
  --color-surface-invert: var(--navy);

  --color-text: var(--ink);
  --color-text-muted: var(--gray-600);
  --color-text-subtle: var(--gray-400);
  --color-text-on-dark: var(--ivory);
  --color-text-on-dark-muted: #7E8BA3;

  --color-primary: var(--navy);
  --color-accent: var(--azure);
  --color-link: var(--azure);

  --color-border: var(--hairline);
  --color-border-strong: rgba(10, 24, 46, 0.18);
  --color-focus-ring: var(--azure);

  /* Per-product accent aliases */
  --accent-digitajus: var(--azure);
  --accent-jusoffice: var(--royal);
  --accent-gabinete: var(--slate);
  --accent-automator: var(--steel);
}
/* DigitaJus — Typography system
   Pairing: Spectral (serif, contrast) + Hanken Grotesk (grotesque sans) +
   IBM Plex Mono (technical labels). Signature rule: the morpheme "Jus" is
   always set in Spectral serif; everything else in Hanken. */
:root {
  /* ---- Families ---- */
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

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

  /* ---- Tracking ---- */
  --tracking-display: -0.02em;  /* large serif headings */
  --tracking-tight: -0.01em;
  --tracking-sans: -0.02em;     /* tight grotesque wordmarks */
  --tracking-normal: 0;
  --tracking-kicker: 0.16em;    /* mono uppercase kickers */
  --tracking-label: 0.12em;     /* mono uppercase labels */

  /* ---- Leading ---- */
  --leading-tight: 1.05;
  --leading-snug: 1.12;
  --leading-heading: 1.1;
  --leading-body: 1.6;

  /* ---- Type scale (semantic) ---- */
  --text-display: var(--fw-regular) clamp(40px, 6vw, 72px) / var(--leading-tight) var(--font-serif);
  --text-h1: var(--fw-500) clamp(34px, 4.5vw, 52px) / var(--leading-heading) var(--font-serif);
  --text-h2: var(--fw-medium) 34px / var(--leading-heading) var(--font-serif);
  --text-h3: var(--fw-medium) 22px / 1.25 var(--font-serif);
  --text-lead: var(--fw-regular) 19px / var(--leading-body) var(--font-sans);
  --text-body: var(--fw-regular) 16px / var(--leading-body) var(--font-sans);
  --text-small: var(--fw-regular) 14px / 1.6 var(--font-sans);
  --text-caption: var(--fw-regular) 12px / 1.5 var(--font-sans);

  /* ---- Mono labels ---- */
  --label-kicker: var(--fw-regular) 11px / 1.4 var(--font-mono);   /* + uppercase + --tracking-kicker */
  --label-meta: var(--fw-regular) 10.5px / 1.5 var(--font-mono);

  /* ---- Sizes (raw, for component use) ---- */
  --size-display: clamp(40px, 6vw, 72px);
  --size-h1: clamp(34px, 4.5vw, 52px);
  --size-h2: 34px;
  --size-h3: 22px;
  --size-lead: 19px;
  --size-body: 16px;
  --size-small: 14px;
  --size-caption: 12px;
  --size-label: 11px;
}
/* DigitaJus — Spacing, radii, shadows, layout
   4px base grid. Calm, generous rhythm; hairline rules over heavy dividers. */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Corner radii ---- */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;     /* app-tile / favicon container */
  --radius-pill: 100px;  /* chips, tags, buttons */
  --radius-tile: 22%;    /* iOS-style icon squircle ratio */

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--hairline);
  --border-card: 1px solid var(--hairline);

  /* ---- Shadows (soft, navy-tinted — never harsh black) ---- */
  --shadow-card: 0 1px 3px rgba(10, 24, 46, 0.06), 0 1px 2px rgba(10, 24, 46, 0.04);
  --shadow-raised: 0 6px 24px rgba(10, 24, 46, 0.10), 0 2px 6px rgba(10, 24, 46, 0.06);
  --shadow-pop: 0 16px 48px rgba(10, 24, 46, 0.16);

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-pad: 40px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
}