/* ============================================================
   Soluções Integradas — UNIFIED BRAND  (SI / 2026)
   ------------------------------------------------------------
   One coherent identity that merges the two earlier layers:
     · the institutional IBM Plex + blue "quality/ISO" system
     · the modern "tech/consulting" accent system (brand.css)
   into a single, more distinctive palette and type voice.

   Story → the tagline "Gestão. Método. Tecnologia."
     Cobalt   = Tecnologia  (the engineered core / primary)
     Teal     = Integração  (flow, things connecting — signal)
     Âmbar    = Método       (value, the human craft — premium spark)

   Import this in every NEW brand artifact (decks, folders, merch).
   It re-uses the self-hosted IBM Plex fonts already in /fonts.
   ============================================================ */
@import url('colors_and_type.css');

:root {
  /* ---------- CORE NEUTRALS (warm-tuned) ---------- */
  --u-ink:      #0C1116;   /* near-black, faint cool — headlines, covers */
  --u-ink-2:    #161D24;
  --u-ink-3:    #232C35;
  --u-paper:    #F6F5F1;   /* warm off-white — the brand's default ground */
  --u-paper-2:  #EDEBE3;
  --u-paper-3:  #E2DFD4;
  --u-white:    #FFFFFF;

  /* Warm gray scale, tuned against paper (not Tailwind-cool) */
  --u-n-50:  #F4F3EE;
  --u-n-100: #E9E7DF;
  --u-n-200: #D8D5C9;
  --u-n-300: #BCB8A9;
  --u-n-400: #938F80;
  --u-n-500: #6E6A5D;
  --u-n-600: #4E4B41;
  --u-n-700: #36342D;
  --u-n-800: #23211C;
  --u-n-900: #15140F;

  /* ---------- BRAND TRIAD ---------- */
  /* Cobalt — TECNOLOGIA (primary) */
  --u-cobalt:       #1F44D6;
  --u-cobalt-700:   #1A38B0;
  --u-cobalt-600:   #1F44D6;
  --u-cobalt-500:   #3358EC;
  --u-cobalt-400:   #6E86F4;
  --u-cobalt-soft:  #E9EDFC;
  --u-cobalt-ink:   #122a8c;

  /* Teal — INTEGRAÇÃO (signal / flow) */
  --u-teal:        #0FAFBE;
  --u-teal-700:    #0A7C87;   /* AA as text on paper/white */
  --u-teal-400:    #5FD3DC;
  --u-teal-soft:   #E0F6F8;

  /* Âmbar — MÉTODO (premium spark, used sparingly) */
  --u-amber:       #E0A02E;
  --u-amber-700:   #956617;   /* AA as text on paper/white */
  --u-amber-soft:  #F8EFD9;

  /* ---------- SEMANTIC (muted, consultative · WCAG-AA as text on -s and white) ---------- */
  --u-pos:   #2D7858;  --u-pos-s: #E6F2EC;
  --u-neg:   #BC422D;  --u-neg-s: #FaE9E4;
  --u-att:   #8D6415;  --u-att-s: #F8EFD3;

  /* ---------- SEMANTIC ALIASES ---------- */
  --u-bg:          var(--u-paper);
  --u-bg-2:        var(--u-paper-2);
  --u-surface:     var(--u-white);
  --u-fg:          var(--u-ink);
  --u-fg-muted:    var(--u-n-600);
  --u-fg-subtle:   var(--u-n-500);
  --u-fg-faint:    var(--u-n-400);
  --u-border:      var(--u-n-200);
  --u-border-soft: var(--u-n-100);
  --u-primary:     var(--u-cobalt);
  --u-primary-hover: var(--u-cobalt-700);

  /* ---------- TYPE ---------- */
  --u-font-sans:  'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --u-font-cond:  'IBM Plex Sans Condensed', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --u-font-serif: 'IBM Plex Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --u-font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* fluid display scale */
  --u-t-mega:    clamp(56px, 9vw, 132px);  /* @kind font */
  --u-t-hero:    clamp(44px, 6vw, 92px);   /* @kind font */
  --u-t-display: clamp(34px, 4.4vw, 64px); /* @kind font */
  --u-t-h1:      40px;
  --u-t-h2:      28px;
  --u-t-h3:      20px;
  --u-t-h4:      16px;
  --u-t-body-l:  18px;
  --u-t-body:    16px;
  --u-t-small:   14px;
  --u-t-micro:   12px;
  --u-t-tick:    11px;

  /* ---------- SHAPE ---------- */
  --u-r-sm: 3px;  --u-r-md: 6px;  --u-r-lg: 12px;  --u-r-xl: 20px;  --u-r-pill: 9999px;
  --u-edge:     1px solid var(--u-border);
  --u-edge-ink: 1px solid var(--u-ink);
  --u-u: 8px; /* grid unit */

  /* ---------- ELEVATION / PROFUNDIDADE ----------
     One light source, top-down. Shadows are INK-tinted (never neutral gray) and
     layered — a tight contact shadow + a soft ambient shadow — so a surface reads
     as lifted, not blurred. Each step maps to a ROLE, not a look:
       0 flush · 1 raised · 2 lifted · 3 overlay · 4 dialog · 5 spotlight        */
  --u-elev-0: none;                                                                          /* @kind shadow */
  --u-elev-1: 0 1px 1.5px rgba(12,17,22,.05), 0 2px 6px -2px rgba(12,17,22,.10);
  --u-elev-2: 0 2px 4px -1px rgba(12,17,22,.06), 0 10px 22px -8px rgba(12,17,22,.16);
  --u-elev-3: 0 4px 8px -2px rgba(12,17,22,.08), 0 18px 36px -12px rgba(12,17,22,.20);
  --u-elev-4: 0 8px 16px -4px rgba(12,17,22,.10), 0 30px 60px -18px rgba(12,17,22,.28);
  --u-elev-5: 0 12px 24px -6px rgba(12,17,22,.12), 0 44px 80px -22px rgba(12,17,22,.36);
  --u-elev-inset: inset 0 1px 2px rgba(12,17,22,.10), inset 0 2px 5px -2px rgba(12,17,22,.08);

  /* dimensional accents — reserve for signature brand surfaces (ink bands, the amber rule) */
  --u-sheen-ink: inset 0 1px 0 rgba(255,255,255,.08);   /* @kind shadow */
  --u-edge-hi:   inset 0 1px 0 rgba(255,255,255,.85);   /* @kind shadow */
  --u-band-grad: linear-gradient(178deg,#1b2530 0%,var(--u-ink) 55%,#070b0f 100%);  /* @kind other */

  /* legacy aliases → mapped onto the ramp */
  --u-shadow-1: var(--u-elev-1);  /* @kind shadow */
  --u-shadow-2: var(--u-elev-3);  /* @kind shadow */
  --u-shadow-3: var(--u-elev-4);  /* @kind shadow */
}

/* ============================================================
   SCOPE — wrap any unified-brand surface in <… class="si">
   ============================================================ */
.si {
  font-family: var(--u-font-sans);
  color: var(--u-fg);
  background: var(--u-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.si *, .si *::before, .si *::after { box-sizing: border-box; }

/* ---- display / headings ---- */
.si-mega   { font-family: var(--u-font-cond); font-weight: 600; font-size: var(--u-t-mega);   line-height: .9;  letter-spacing: -.02em; text-transform: uppercase; }
.si-hero   { font-family: var(--u-font-sans); font-weight: 700; font-size: var(--u-t-hero);   line-height: .96; letter-spacing: -.035em; }
.si-display{ font-family: var(--u-font-sans); font-weight: 700; font-size: var(--u-t-display);line-height: 1.0; letter-spacing: -.03em; }
.si-h1 { font-family: var(--u-font-sans); font-weight: 700; font-size: var(--u-t-h1); line-height: 1.05; letter-spacing: -.025em; margin: 0; }
.si-h2 { font-family: var(--u-font-sans); font-weight: 600; font-size: var(--u-t-h2); line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.si-h3 { font-family: var(--u-font-sans); font-weight: 600; font-size: var(--u-t-h3); line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.si-h4 { font-family: var(--u-font-sans); font-weight: 600; font-size: var(--u-t-h4); line-height: 1.3; margin: 0; }

.si-body { font-size: var(--u-t-body); line-height: 1.55; color: var(--u-fg-muted); }
.si-lead { font-size: var(--u-t-body-l); line-height: 1.5; color: var(--u-n-700); letter-spacing: -.004em; }
.si-small{ font-size: var(--u-t-small); line-height: 1.5; color: var(--u-fg-subtle); }

/* editorial serif pull (the "Método" human voice) */
.si-pull { font-family: var(--u-font-serif); font-style: italic; font-weight: 400;
           font-size: clamp(24px,3vw,40px); line-height: 1.2; letter-spacing: -.01em; color: var(--u-ink); }

/* eyebrow / tick — mono, wide, uppercase */
.si-tick { font-family: var(--u-font-mono); font-size: var(--u-t-tick); letter-spacing: .16em;
           text-transform: uppercase; color: var(--u-fg-subtle); }
.si-tick--cobalt { color: var(--u-cobalt); }
.si-tick--teal   { color: var(--u-teal-700); }
.si-tick--amber  { color: var(--u-amber-700); }
.si-tick--paper  { color: rgba(246,245,241,.66); }

/* ---- buttons ---- */
.si-btn { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px;
          border-radius: var(--u-r-md); font:600 15px/1 var(--u-font-sans); letter-spacing:-.005em;
          border:1px solid transparent; cursor:pointer; text-decoration:none;
          transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .16s ease, transform .12s ease; }
.si-btn:active { transform: translateY(1px); }
.si-btn--primary { background: var(--u-ink); color: var(--u-paper); box-shadow: var(--u-elev-1); }
.si-btn--primary:hover { background: var(--u-cobalt); box-shadow: var(--u-elev-2); }
.si-btn--cobalt  { background: var(--u-cobalt); color:#fff; box-shadow: var(--u-elev-1); }
.si-btn--cobalt:hover { background: var(--u-cobalt-700); box-shadow: var(--u-elev-2); }
.si-btn--ghost   { background: transparent; color: var(--u-ink); border-color: var(--u-border); }
.si-btn--ghost:hover { border-color: var(--u-ink); }
.si-btn--on-ink  { background: var(--u-paper); color: var(--u-ink); }
.si-btn--on-ink:hover { background:#fff; }

/* ---- card ---- */
.si-card { background: var(--u-surface); border: var(--u-edge); border-radius: var(--u-r-lg); padding: 24px; box-shadow: var(--u-elev-1); }
.si-card--flush { box-shadow: var(--u-elev-0); }        /* flush to page — rely on border/tone */
.si-card--float { box-shadow: var(--u-elev-2); }        /* hero / pulled-forward card */
.si-card--interactive { transition: box-shadow .16s ease, transform .16s ease; }
.si-card--interactive:hover { box-shadow: var(--u-elev-2); transform: translateY(-2px); }
.si-card--ink { background: var(--u-ink); color: var(--u-paper); border-color: var(--u-ink); }
.si-card--cobalt { background: var(--u-cobalt); color:#fff; border-color: var(--u-cobalt); }

/* ---- chip / tag ---- */
.si-chip { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
           border-radius: var(--u-r-pill); font:600 11px/1 var(--u-font-mono); letter-spacing:.06em;
           text-transform:uppercase; }

/* ---- patterns / grounds ---- */
.si-grid-bg { background-image:
    linear-gradient(to right, rgba(12,17,22,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(12,17,22,.05) 1px, transparent 1px);
  background-size: 28px 28px; }
.si-grid-bg--ink { background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px; }
.si-dots-bg { background-image: radial-gradient(rgba(12,17,22,.14) 1px, transparent 1px); background-size: 16px 16px; }

/* ---- horizontal logo lockup ----
   The packaged logo-full.png is a VERTICAL stack — illegible below ~80px tall.
   For headers/footers use this horizontal lockup: the S+I mark beside a
   typeset wordmark (Soluções, light+tracked / Integradas, condensed+bold),
   mirroring the real wordmark's hierarchy. Stays sharp at small sizes. */
.si-lock { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.si-lock__mark { height:42px; width:auto; display:block; flex:none; }
.si-lock__wm { display:flex; flex-direction:column; line-height:1; }
.si-lock__wm .t { font-family:var(--u-font-sans); font-weight:400; font-size:12px;
                  letter-spacing:.345em; text-transform:uppercase; color:var(--u-ink);
                  padding-left:.06em; }
.si-lock__wm .b { font-family:var(--u-font-cond); font-weight:700; font-size:25px;
                  letter-spacing:.01em; text-transform:uppercase; color:var(--u-ink);
                  margin-top:4px; }
.si-lock--sm .si-lock__mark { height:32px; }
.si-lock--sm .si-lock__wm .t { font-size:9.5px; letter-spacing:.3em; }
.si-lock--sm .si-lock__wm .b { font-size:19px; margin-top:3px; }
.si-lock--paper .si-lock__wm .t,
.si-lock--paper .si-lock__wm .b { color:var(--u-paper); }

/* hairline rules */
.si-rule { height:1px; background: var(--u-border); border:0; }
.si-rule--ink { height:1px; background: rgba(255,255,255,.18); border:0; }
.si-rule--cobalt { height:2px; width:48px; background: var(--u-cobalt); border:0; }

/* ============================================================
   ELEVATION / PROFUNDIDADE — utilities
   Depth is functional: it encodes how far a surface sits from the page.
   Choose by ROLE (see --u-elev-*), one top-down light source, ink-tinted.
   ============================================================ */
.si-elev-0 { box-shadow: var(--u-elev-0); }
.si-elev-1 { box-shadow: var(--u-elev-1); }
.si-elev-2 { box-shadow: var(--u-elev-2); }
.si-elev-3 { box-shadow: var(--u-elev-3); }
.si-elev-4 { box-shadow: var(--u-elev-4); }
.si-elev-5 { box-shadow: var(--u-elev-5); }
.si-inset  { box-shadow: var(--u-elev-inset); }

/* interactive lift — rests raised (1), lifts on hover (2), settles on press */
.si-raise { transition: box-shadow .16s ease, transform .16s ease; box-shadow: var(--u-elev-1); }
.si-raise:hover  { box-shadow: var(--u-elev-2); transform: translateY(-2px); }
.si-raise:active { box-shadow: var(--u-elev-1); transform: translateY(0); }

/* overlays — always float above content */
.si-popover { background: var(--u-surface); border: var(--u-edge); border-radius: var(--u-r-lg); box-shadow: var(--u-elev-3); }
.si-modal   { background: var(--u-surface); border-radius: var(--u-r-xl); box-shadow: var(--u-elev-4); }

/* recessed well — inputs, code blocks, tracks */
.si-well { background: var(--u-paper-2); border-radius: var(--u-r-md); box-shadow: var(--u-elev-inset); }

/* dimensional brand surfaces — sheen on top; reserve for ink/color fills */
.si-band { position: relative; background: var(--u-ink); color: var(--u-paper); box-shadow: var(--u-sheen-ink); }
.si-band--material { background: var(--u-band-grad); }
.si-edge-hi { box-shadow: var(--u-edge-hi); }

@media (prefers-reduced-motion: reduce){
  .si-raise { transition: none; }
  .si-raise:hover { transform: none; }
  .si-card--interactive { transition: none; }
  .si-card--interactive:hover { transform: none; }
}

/* ============================================================
   ACCESSIBILITY — keyboard focus (WCAG 2.1 AA · 2.4.7 / 1.4.11)
   Every interactive surface gets a visible cobalt focus ring on
   keyboard nav (≥3:1 vs paper and ink). Text min on light = n-500;
   n-400 is for hairlines / disabled / decorative only.
   ============================================================ */
.si-btn:focus-visible,
.si a:focus-visible,
.si button:focus-visible,
.si input:focus-visible,
.si select:focus-visible,
.si textarea:focus-visible,
.si [tabindex]:focus-visible {
  outline: 2px solid var(--u-cobalt);
  outline-offset: 2px;
  border-radius: 3px;
}
/* on ink / cobalt / material grounds, switch the ring to paper */
.si-card--ink :focus-visible,
.si-card--cobalt :focus-visible,
.si-band :focus-visible,
.si-btn--on-ink:focus-visible { outline-color: var(--u-paper); }

/* ============================================================
   BRAND MOTIF — a tríade de pontos (Cobalto · Teal · Âmbar)
   The secondary mark of the identity: bullet, divider, marker,
   step-state. Scales with font-size (em units). Fixed order c→t→a.
     <span class="si-triad"><i></i><i></i><i></i></span>
   ============================================================ */
.si-triad { display:inline-flex; align-items:center; gap:.5em; vertical-align:middle; line-height:0; }
.si-triad > i { width:.6em; height:.6em; border-radius:9999px; background:var(--u-cobalt); flex:none; }
.si-triad > i:nth-child(2){ background:var(--u-teal); }
.si-triad > i:nth-child(3){ background:var(--u-amber); }
.si-triad--vertical { flex-direction:column; }
/* one-color contexts (documents, on-ink): all three inherit currentColor */
.si-triad--mono > i,
.si-triad--mono > i:nth-child(2),
.si-triad--mono > i:nth-child(3){ background:currentColor; }

/* section divider — hairline · tríade · hairline */
.si-divider { display:flex; align-items:center; gap:14px; }
.si-divider::before, .si-divider::after { content:""; flex:1; height:1px; background:var(--u-border); }
.si-divider--ink::before, .si-divider--ink::after { background:rgba(255,255,255,.18); }