/* ============================================================
   ABRAHÃO CAPRARO — DESIGN SYSTEM (tokens)

   CÓPIA LITERAL do design entregue pelo Claude Design em 2026-08-17
   (projeto "Abrahão Capraro Design System", c2dad334-…-6871500412c0).
   O original intocado está em `docs/design/2026-08-17/_ds/`.

   NÃO EDITE VALOR NENHUM AQUI. Nome, valor e ordem têm de bater com o
   padrão-ouro — o gate de fidelidade (`/design conferir`) compara os dois
   blocos `:root` linha a linha, e qualquer divergência é erro de transcrição.
   Precisa mudar algo? Muda no Claude Design e re-aplica.

   Diferença ÚNICA em relação ao original, e só de caminho: os `@font-face`
   apontam para `/static/fonts/` (onde o Flask serve) em vez de
   `../assets/fonts/`, e usam o .woff2 quando existe — mesmo desenho de fonte,
   um décimo do peso. Os arquivos .ttf/.otf originais seguem no padrão-ouro.

   Ordem dos blocos = a do `styles.css` do design: fonts → colors →
   typography → spacing → base.
   ============================================================ */

/* ============================================================
   Abrahão Capraro — Webfonts
   Display: NewYork (high-contrast Didone serif, from the wordmark)
   Text:    Montserrat (geometric sans, wide tracking)
   ============================================================ */

@font-face {
  font-family: "NewYork";
  src: url("/static/fonts/NewYork.woff2") format("woff2"),
       url("/static/fonts/NewYork.otf") format("opentype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/montserrat-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/montserrat-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/montserrat-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/montserrat-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Abrahão Capraro — Color tokens
   A sober, restrained palette: deep navy + warm gold,
   resting on cream and stone neutrals. Used sparingly.
   ============================================================ */

:root {
  /* ---- Brand: Navy (Azul Marinho) ---- */
  --navy-900: #11142E;   /* deepest — rare, near-black ink */
  --navy-800: #161A3B;
  --navy-700: #1A1E47;   /* PRIMARY brand navy (wordmark, surfaces) */
  --navy-600: #202144;   /* symbol field navy */
  --navy-500: #2D3160;
  --navy-300: #6B6F92;   /* muted navy for secondary text on light */
  --navy-100: #D8DAE6;   /* faint navy tint for borders/fills */

  /* ---- Brand: Gold (Dourado) ---- */
  --gold-700: #7E5F35;   /* deep bronze — hover/press on light */
  --gold-600: #8C6A3D;
  --gold-500: #A17D49;   /* PRIMARY gold — accents on light fields */
  --gold-400: #C5AB85;   /* champagne — gold on dark fields */
  --gold-300: #D8C4A4;
  --gold-200: #E7DAC4;   /* pale gold — fills, dividers */
  --gold-100: #F2EADC;   /* faintest gold wash */

  /* ---- Neutrals (warm stone + cool grey) ---- */
  --white:    #FFFFFF;
  --paper:    #FBFAF7;   /* default page — warm off-white */
  --cream:    #F4F1EB;   /* sectioned surface */
  --stone-200:#E8E5DE;   /* hairline borders on cream */
  --stone-300:#D7D3CA;
  --cinza:    #DADBD9;   /* brand cool grey (Simbolo fundo cinza) */
  --ink-500:  #4A4C5A;   /* body text on light, softened */
  --ink-700:  #2A2C3A;   /* strong body text */

  /* ---- Semantic status (muted, professional) ---- */
  --positive: #4F6E54;
  --positive-bg: #E9EFE9;
  --attention: #9A6A2E;
  --attention-bg: #F4E9D8;
  --critical: #8A3A38;
  --critical-bg: #F3E2E1;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:       var(--paper);
  --surface-card:       var(--white);
  --surface-sunken:     var(--cream);
  --surface-inverse:    var(--navy-700);
  --surface-inverse-2:  var(--navy-800);

  /* Text */
  --text-strong:        var(--navy-700);
  --text-body:          var(--ink-500);
  --text-muted:         var(--navy-300);
  --text-on-inverse:    var(--cream);
  --text-on-inverse-muted: #9FA3BE;
  --text-accent:        var(--gold-600);
  --text-accent-inverse: var(--gold-400);

  /* Lines & borders */
  --border-subtle:      var(--stone-200);
  --border-default:     var(--stone-300);
  --border-strong:      var(--navy-100);
  --border-inverse:     rgba(197, 171, 133, 0.28);
  --rule-gold:          var(--gold-500);

  /* Interactive (gold actions) */
  --action:             var(--navy-700);
  --action-hover:       var(--navy-800);
  --action-press:       var(--navy-900);
  --accent:             var(--gold-500);
  --accent-hover:       var(--gold-600);
  --accent-press:       var(--gold-700);

  /* Focus */
  --focus-ring:         rgba(161, 125, 73, 0.45);
}

/* ============================================================
   Abrahão Capraro — Typography tokens
   Display serif (NewYork) for names & headlines, set generously.
   Montserrat for everything else — light weights, WIDE tracking,
   uppercase labels. Restraint over emphasis.
   ============================================================ */

:root {
  /* Families */
  --font-display: "NewYork", "Times New Roman", Georgia, serif;
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Weights (Montserrat) */
  --fw-light: 300;    /* @kind font */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700;     /* @kind font */

  /* ---- Type scale (rem, 16px base) ---- */
  --text-xs:   0.6875rem;  /* 11px — fine print, legal */
  --text-sm:   0.8125rem;  /* 13px — captions, labels */
  --text-base: 0.9375rem;  /* 15px — body (intentionally restrained) */
  --text-md:   1.0625rem;  /* 17px — lead body */
  --text-lg:   1.375rem;   /* 22px */
  --text-xl:   1.875rem;   /* 30px */
  --text-2xl:  2.5rem;     /* 40px */
  --text-3xl:  3.5rem;     /* 56px */
  --text-4xl:  4.75rem;    /* 76px — display */

  /* ---- Line heights ---- */
  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.85;

  /* ---- Letter spacing (the brand signature) ---- */
  --tracking-tightest: -0.02em;  /* large display serif */
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;      /* uppercase labels */
  --tracking-widest: 0.34em;     /* logo lockup "A D V O C A C I A" */

  /* ---- Semantic roles ---- */
  --role-display-font: var(--font-display);
  --role-display-weight: 400;
  --role-display-tracking: var(--tracking-tightest);

  --role-eyebrow-font: var(--font-sans);
  --role-eyebrow-weight: var(--fw-medium);
  --role-eyebrow-tracking: var(--tracking-widest);

  --role-body-font: var(--font-sans);
  --role-body-weight: var(--fw-light);
  --role-body-tracking: 0.01em;
}

/* ============================================================
   Abrahão Capraro — Spacing, radii, shadows, layout
   Generous whitespace is part of the brand. Spacing is built
   on a 4px base with an airy 8px rhythm for composition.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 — section breathing room */

  /* ---- Radii (subtle; the brand is mostly square & serene) ---- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hair: 1px;
  --border-thin: 1.5px;

  /* ---- Shadows (whisper-soft, cool navy tint — never heavy) ---- */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(26, 30, 71, 0.04);
  --shadow-sm: 0 2px 8px rgba(26, 30, 71, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(26, 30, 71, 0.14);
  --shadow-lg: 0 24px 60px -24px rgba(26, 30, 71, 0.22);

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1140px;
  --container-xl: 1320px;
  --gutter: var(--space-6);

  /* ---- Motion (quiet, considered — no bounce) ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --duration-fast: 140ms;  /* @kind other */
  --duration-base: 240ms;  /* @kind other */
  --duration-slow: 420ms;  /* @kind other */
}

/* ============================================================
   Abrahão Capraro — Base element styles & primitive helpers
   Light-touch resets and a few brand utility classes used by
   specimen cards and kits. Components rely on tokens, not these.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: 0.01em;
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display & headings ---- */
.ac-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tightest);
  line-height: var(--leading-tight);
  color: var(--text-strong);
}

.ac-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* The signature lockup spacing, e.g. "A D V O C A C I A" */
.ac-tracked {
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--fw-regular);
}

.ac-lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  font-weight: var(--fw-light);
  color: var(--text-body);
}

/* ---- Gold hairline rule ---- */
.ac-rule {
  width: 56px;
  height: 1.5px;
  background: var(--rule-gold);
  border: 0;
  margin: 0;
}

a { color: var(--text-accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--gold-200); color: var(--navy-800); }