/* ============================================================================
   SMART-PLANNING · colors_and_type.css
   Foundational design tokens — color + typography.
   Palette: Baunilha (vanilla cream) · Navy · Âmbar (amber)
   Type:    Sora (display/sans) + JetBrains Mono (technical labels & numbers)
   ----------------------------------------------------------------------------
   Source of truth: registro-diario-obra/public/consolidado/relatorio/theme.css
   + Smart-Planning login prototype (dark variant).
   ============================================================================ */

/* Fontes carregadas via <link> no index.html (não-bloqueante). */

:root {
  /* ── BRAND CORE ──────────────────────────────────────────────────────────
     The 60/30/10 rule: navy/cream dominant, slate support, AMBER only as accent. */
  --sp-navy:    #0E1B2C;   /* primary dark — text, sidebars, navy bands */
  --sp-ink:     #0A1320;   /* deepest dark — gradient extremes */
  --sp-amber:   #E8A93C;   /* THE accent — primary button, focus, key marks */
  --sp-amber-2: #D4922A;   /* amber pressed / hover dark */
  --sp-paper:   #F4EFE6;   /* primary cream surface / text on dark */
  --sp-bone:    #FAF7F0;   /* secondary cream surface */
  --sp-line:    #E2DCCF;   /* borders & dividers */
  --sp-steel:   #5C6B7E;   /* secondary text, muted icons */

  /* ── LIGHT SURFACES (vanilla) — the canonical product theme ──────────── */
  --bg:        #F4EFE6;    /* page background */
  --bg-2:      #ECE4D5;    /* alternating bands / tracks */
  --panel:     #FBF8F1;    /* panels */
  --card:      #FFFFFF;    /* cards */
  --card-2:    #F6F1E7;    /* secondary card / chips */

  /* ── INK (text on light) ─────────────────────────────────────────────── */
  --ink:       #0E1B2C;    /* primary text (navy) */
  --ink-2:     #4A5667;    /* secondary text (slate) */
  --ink-3:     #8B93A0;    /* tertiary / labels */
  --line:      #E4DCCD;    /* hairline borders */
  --line-2:    #D6CCB7;    /* stronger borders */

  /* ── DARK SURFACES (navy header bands / login) ───────────────────────── */
  --navy:      #0E1B2C;
  --navy-2:    #16273C;
  --navy-3:    #20344C;
  --on-navy:   #F4EFE6;    /* cream text on navy */
  --on-navy-2: #9FB0C2;    /* muted text on navy */

  /* ── BRAND (amber) tints ─────────────────────────────────────────────── */
  --brand:      #E8A93C;
  --brand-2:    #D4922A;
  --brand-ink:  #0E1B2C;   /* navy text on amber surfaces */
  --brand-soft: #F7E9CC;   /* soft amber background */

  /* ── STATUS — tuned to the warm palette ──────────────────────────────── */
  --ok:        #2E8B6B;  --ok-bg:     #DEEEE6;   /* concluída / on-track */
  --warn:      #C2841C;  --warn-bg:   #F6E9CC;   /* andamento / attention */
  --danger:    #BE4A2C;  --danger-bg: #F4DDD3;   /* impacto / cancelada */
  --neutral:   #7E8794;  --neutral-bg:#E8E3D8;   /* não se aplica */

  /* ── ATTRIBUTION (org tagging — domain-specific) ─────────────────────── */
  --vale:      #2E6B47;  --vale-bg:   #E0EBE2;   /* client: Vale (green) */
  --parex:     #2F4D6E;  --parex-bg:  #DFE6EE;   /* contractor: Parex (navy-blue) */
  --compart:   #9A6B1E;  --compart-bg:#F2E6CE;   /* shared (bronze) */

  /* ── DISCIPLINES (categorical data-viz palette) ──────────────────────────
     Calm, low-chroma hues to tell construction disciplines apart in charts,
     grids and timelines. NOT action colors — amber stays the only accent.
     Each has an -ink (darker) variant for text/percentages on cream. */
  --disc-tub: #5B7C9D;  --disc-tub-ink: #38536E;   /* Tubulação        — azul-aço   */
  --disc-mec: #5E8C73;  --disc-mec-ink: #3C5E4B;   /* Mecânica         — verde-sálvia */
  --disc-ele: #8A6E91;  --disc-ele-ink: #5C4663;   /* Elétrica/Instrum.— ardósia-ametista */
  --disc-pin: #BD6A4A;  --disc-pin-ink: #8A4326;   /* Pintura          — terracota  */
  --disc-and: #7B7468;  --disc-and-ink: #4E483E;   /* Andaime          — taupe quente */
  --disc-com: #3E8C86;  --disc-com-ink: #235651;   /* Comissionamento  — teal nítido   */

  /* ── RADIUS ──────────────────────────────────────────────────────────── */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* ── ELEVATION ───────────────────────────────────────────────────────── */
  --shadow:    0 1px 0 rgba(14,27,44,.03), 0 2px 10px rgba(14,27,44,.06);
  --shadow-lg: 0 6px 28px rgba(14,27,44,.12);
  --shadow-dark: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 80px -20px rgba(0,0,0,.55);
  --focus-ring: 0 0 0 3px rgba(14,27,44,.08);     /* navy focus on light */
  --focus-ring-amber: 0 0 0 3px rgba(232,169,60,.22); /* amber focus on dark */

  /* ── 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;

  /* ── TYPE FAMILIES ───────────────────────────────────────────────────── */
  --sans: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;  /* @kind font */
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;  /* @kind font */
}

/* ============================================================================
   SEMANTIC TYPOGRAPHY
   Sora carries display + body. JetBrains Mono is reserved for technical
   micro-labels, codes, clocks, build strings, and ALL numeric values
   (always tabular-nums for alignment).
   ============================================================================ */

.sp-display {                       /* hero / report titles */
  font-family: var(--sans);
  font-size: 30px; font-weight: 700;
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink);
}
.sp-h1 {
  font-family: var(--sans);
  font-size: 22px; font-weight: 600;
  line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ink);
}
.sp-h2 {
  font-family: var(--sans);
  font-size: 18px; font-weight: 600;
  line-height: 1.25; color: var(--ink);
}
.sp-h3 {
  font-family: var(--sans);
  font-size: 15px; font-weight: 600;
  line-height: 1.35; color: var(--ink);
}
.sp-body {
  font-family: var(--sans);
  font-size: 15px; font-weight: 400;
  line-height: 1.5; color: var(--ink);
}
.sp-small {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 400;
  line-height: 1.45; color: var(--ink-2);
}

/* Technical label — the workhorse mono micro-label.
   Uppercase, wide tracking, slate, 10–11px. Used for every field label,
   section header, status caption, and metadata key in the product. */
.sp-lbl {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
/* Numeric / code mono — tabular figures for KPIs, clocks, IDs, deltas. */
.sp-mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Base element defaults (opt-in by adding to <body>) */
.sp-root {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}