/* =========================================================
   PORTFOLIO — DESIGN SYSTEM / TOKENS
   Fonte unica de verdade. Usado em todos os mockups.
   Tema escuro premium, muito espaco negativo.
   ========================================================= */
:root{
  /* ---- Cor ---- */
  --bg:            #07080d;   /* fundo base */
  --bg-soft:       #0b0d15;   /* superficies elevadas / cards */
  --bg-elev:       #11131e;   /* inputs, chips, hover */
  --ink:           #eef0f6;   /* texto principal */
  --ink-2:         #9aa3b8;   /* texto secundario */
  --ink-3:         #5b6178;   /* texto terciario / faint */
  --line:          rgba(255,255,255,.08);
  --line-2:        rgba(255,255,255,.04);

  --violet:        #7c5cff;
  --cyan:          #00e5ff;
  --red:           #ff3340;   /* RESERVADO ao card RevParts */
  --grad:          linear-gradient(100deg,#7c5cff 0%,#00e5ff 100%);
  --glow-violet:   0 0 40px rgba(124,92,255,.45);
  --glow-cyan:     0 0 40px rgba(0,229,255,.40);

  /* ---- Tipografia ---- */
  --font-display:  "Bricolage Grotesque", system-ui, sans-serif;
  --font-body:     "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, monospace;

  /* ---- Espacamento (escala base 4) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* ---- Raios ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* ---- Elevacao ---- */
  --shadow:        0 24px 60px -28px rgba(0,0,0,.7);
}

/* =========================================================
   Primitivas de tipografia
   ========================================================= */
.ds-display{ font-family:var(--font-display); font-weight:800; letter-spacing:-.035em; line-height:.96; color:var(--ink); }
.ds-h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5.4vw,84px); letter-spacing:-.04em; line-height:.94; }
.ds-h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(30px,3.4vw,52px); letter-spacing:-.03em; line-height:.98; }
.ds-h3{ font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-.02em; line-height:1.1; }
.ds-body{ font-family:var(--font-body); font-weight:400; font-size:17px; line-height:1.6; color:var(--ink-2); }
.ds-lead{ font-family:var(--font-body); font-weight:300; font-size:20px; line-height:1.55; color:var(--ink-2); }
.ds-small{ font-family:var(--font-body); font-size:14px; color:var(--ink-2); }
.ds-mono{ font-family:var(--font-mono); font-weight:500; font-size:12px; letter-spacing:.04em; color:var(--ink-2); }
.ds-grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Kicker (label de seccao com tracinho) */
.ds-kicker{ display:inline-flex; align-items:center; gap:12px; font-family:var(--font-mono);
  font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2); }
.ds-kicker::before{ content:""; width:26px; height:2px; background:var(--violet); box-shadow:var(--glow-violet); }
.ds-kicker--cyan::before{ background:var(--cyan); box-shadow:var(--glow-cyan); }

/* Marcador mono tipo // 01 */
.ds-index{ font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; color:var(--ink-3); }
.ds-index b{ color:var(--violet); font-weight:500; }

/* =========================================================
   Botoes
   ========================================================= */
.ds-btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body);
  font-weight:600; font-size:15px; padding:14px 26px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer; white-space:nowrap; }
.ds-btn--primary{ background:var(--grad); color:#06070c; box-shadow:0 8px 30px -8px rgba(124,92,255,.55); }
.ds-btn--ghost{ background:rgba(255,255,255,.02); border-color:var(--line); color:var(--ink); }
.ds-btn--sm{ padding:10px 18px; font-size:13px; }

/* =========================================================
   Card de projeto (faixa de acento + tags mono)
   ========================================================= */
.ds-card{ --ac:var(--violet); position:relative; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; }
.ds-card__stripe{ height:3px; background:var(--ac); box-shadow:0 0 18px var(--ac); }
.ds-card__thumb{ height:170px; position:relative;
  background:radial-gradient(120% 130% at 18% 0%,color-mix(in srgb,var(--ac) 36%,transparent),transparent 62%),
            linear-gradient(135deg,color-mix(in srgb,var(--ac) 16%,#0a0c14),#080910); }
.ds-card__thumb::after{ content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.045) 0 1px,transparent 1px 13px); }
.ds-card__glyph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:64px;
  color:color-mix(in srgb,var(--ac) 82%,#fff); text-shadow:0 0 30px color-mix(in srgb,var(--ac) 60%,transparent); }
.ds-card__body{ padding:22px 22px 24px; }
.ds-card__cat{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ac); margin-bottom:12px; }
.ds-card__title{ font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.02em; margin-bottom:10px; color:var(--ink); }
.ds-card__desc{ font-family:var(--font-body); font-size:14px; color:var(--ink-2); line-height:1.55; }
.ds-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.ds-tag{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.02em; color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 12px; }

/* Input base */
.ds-field{ display:flex; flex-direction:column; gap:8px; }
.ds-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); }
.ds-input{ font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--bg-elev);
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; }
.ds-input::placeholder{ color:var(--ink-3); }

/* helpers de superficie usados nos mockups */
.ds-surface{ background:var(--bg); color:var(--ink); font-family:var(--font-body); }