@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

/* ============================================================
   OBJ_TO — Colors & Type
   Empresa de impressão 3D focada em design e modelos
   arquitetônicos. Brand allows variation across a tight palette
   of navy, teal, charcoal and warm off-white — applied per
   project rather than as a fixed primary/secondary pair.
   ============================================================ */

/* --- Aptos family (brand-supplied) -----------------------
   Five widths/cuts of Aptos cover every role in the system:
     • Aptos          — default body / UI sans
     • Aptos Display  — display headings (slightly tighter optical sizing)
     • Aptos Narrow   — condensed display — echoes the logo wordmark
     • Aptos Mono     — specs, dimensions, codes
     • Aptos Serif    — long-form prose / editorial breaks
   All weights & italics provided. No Google-Font fallback needed.
*/

@font-face { font-family: 'Aptos'; font-weight: 300; font-style: normal; src: url('fonts/Aptos-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos'; font-weight: 300; font-style: italic; src: url('fonts/Aptos-Light-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos'; font-weight: 400; font-style: normal; src: url('fonts/Aptos.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos'; font-weight: 400; font-style: italic; src: url('fonts/Aptos-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos'; font-weight: 600; font-style: normal; src: url('fonts/Aptos-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos'; font-weight: 600; font-style: italic; src: url('fonts/Aptos-SemiBold-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos'; font-weight: 700; font-style: normal; src: url('fonts/Aptos-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos'; font-weight: 700; font-style: italic; src: url('fonts/Aptos-Bold-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos'; font-weight: 800; font-style: normal; src: url('fonts/Aptos-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos'; font-weight: 800; font-style: italic; src: url('fonts/Aptos-ExtraBold-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos'; font-weight: 900; font-style: normal; src: url('fonts/Aptos-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos'; font-weight: 900; font-style: italic; src: url('fonts/Aptos-Black-Italic.ttf') format('truetype'); font-display: swap; }

@font-face { font-family: 'Aptos Display'; font-weight: 400; font-style: normal; src: url('fonts/Aptos-Display.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos Display'; font-weight: 400; font-style: italic; src: url('fonts/Aptos-Display-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos Display'; font-weight: 700; font-style: normal; src: url('fonts/Aptos-Display-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos Display'; font-weight: 700; font-style: italic; src: url('fonts/Aptos-Display-Bold-Italic.ttf') format('truetype'); font-display: swap; }

@font-face { font-family: 'Aptos Narrow'; font-weight: 400; font-style: normal; src: url('fonts/Aptos-Narrow.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos Narrow'; font-weight: 400; font-style: italic; src: url('fonts/Aptos-Narrow-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos Narrow'; font-weight: 700; font-style: normal; src: url('fonts/Aptos-Narrow-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos Narrow'; font-weight: 700; font-style: italic; src: url('fonts/Aptos-Narrow-Bold-Italic.ttf') format('truetype'); font-display: swap; }

@font-face { font-family: 'Aptos Mono'; font-weight: 400; font-style: normal; src: url('fonts/Aptos-Mono.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos Mono'; font-weight: 400; font-style: italic; src: url('fonts/Aptos-Mono-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos Mono'; font-weight: 700; font-style: normal; src: url('fonts/Aptos-Mono-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos Mono'; font-weight: 700; font-style: italic; src: url('fonts/Aptos-Mono-Bold-Italic.ttf') format('truetype'); font-display: swap; }

@font-face { font-family: 'Aptos Serif'; font-weight: 400; font-style: normal; src: url('fonts/Aptos-Serif.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos Serif'; font-weight: 400; font-style: italic; src: url('fonts/Aptos-Serif-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos Serif'; font-weight: 700; font-style: normal; src: url('fonts/Aptos-Serif-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Aptos Serif'; font-weight: 700; font-style: italic; src: url('fonts/Aptos-Serif-Bold-Italic.ttf') format('truetype'); font-display: swap; }

:root {
  /* ---------- Brand palette (minimal neutral base) ---------- */
  --obj-navy:          #32475D;   /* primary deep slate-navy (Azul) */
  --obj-navy-deep:     #283849;   /* pressed / hover-deeper navy */
  --obj-teal:          #B86A4B;   /* Destaque principal — terracota */
  --obj-teal-deep:     #9a5438;
  --obj-teal-bright:   #d47d5a;   /* tom claro para modo escuro */
  --obj-charcoal:      #39403E;   /* Cinza-escuro do logo sobre teal */
  --obj-charcoal-deep: #23282700;
  --obj-gray:          #6C7480;   /* Cinza institucional */
  --obj-bone:          #e8e7e4;   /* logo Branco / fundo claro */
  --obj-paper:         #f8f7f5;   /* surface light */
  --obj-ink:           #18181b;   /* near-black */

  /* ---------- Accent / signal (used sparingly) ---------- */
  --obj-amber:         #d89a3d;   /* warm amber — construction/terra */
  --obj-clay:          #B86A4B;   /* terra-cotta — model fired */
  --obj-success:       #2F8F6E;
  --obj-danger:        #B23A3A;

  /* ---------- Surface roles ---------- */
  --bg:                #f0efec;
  --bg-elevated:       #f8f7f5;
  --bg-inverse:        #18181b;

  /* ---------- Foreground roles ---------- */
  --fg-1:              #18181b;      /* primary text */
  --fg-2:              #65655f;      /* secondary text */
  --fg-3:              #96958f;      /* muted / captions */
  --fg-on-inverse:     #f5f5f5;
  --fg-on-teal:        #18181b;

  /* ---------- Lines / borders ---------- */
  --line-1:            #dddbd5;      /* hairline */
  --line-2:            #cbc9c2;      /* stronger border */
  --line-strong:       #96958f;

  /* ---------- Type families ---------- */
  --font-sans:         'Lato', system-ui, -apple-system, sans-serif;
  --font-display:      'Bebas Neue', 'Aptos Narrow', sans-serif;
  --font-display-wide: 'Bebas Neue', 'Aptos Display', sans-serif;
  --font-serif:        'Lato', 'Aptos Serif', Georgia, serif;
  --font-mono:         'Lato', 'Aptos Mono', 'SF Mono', monospace;

  /* ---------- Type scale (1.25 minor third) ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;

  /* ---------- Tracking / leading ---------- */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.55;
  --lh-loose:  1.75;
  --ls-wide:   0.18em;     /* logo-style spacing for eyebrows */
  --ls-display:  0.04em;  /* Bebas Neue */
  --ls-mono:   0.02em;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ---------- Shadows (low-key, architectural) ---------- */
  --shadow-1: 0 1px 0 rgba(26,31,38,0.04), 0 1px 2px rgba(26,31,38,0.06);
  --shadow-2: 0 2px 4px rgba(26,31,38,0.06), 0 8px 16px rgba(26,31,38,0.08);
  --shadow-3: 0 4px 8px rgba(26,31,38,0.08), 0 24px 48px rgba(26,31,38,0.12);
  --shadow-inset: inset 0 0 0 1px var(--line-1);
}

/* ---------- Dark mode overrides (Minimal Dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:                #2E2E2E;      /* grafite médio — fundo de página */
    --bg-elevated:       #383838;      /* grafite elevado — cards */
    --bg-inverse:        #1A1A1A;

    --fg-1:              #F0EFEC;      /* texto principal */
    --fg-2:              #B0ACA5;      /* texto secundário */
    --fg-3:              #787470;      /* muted */
    --fg-on-inverse:     #F0EFEC;
    --fg-on-teal:        #1A1A1A;

    --obj-teal:          #d47d5a;      /* terracota claro para dark */
    --obj-teal-deep:     #B86A4B;
    --obj-bone:          #F0EFEC;      /* texto sobre painéis escuros */
    --obj-paper:         #383838;      /* superfícies elevadas */
    --obj-ink:           #1A1A1A;      /* painéis escuros (QuickQuote, etc.) */

    --line-1:            rgba(240,239,236,0.12);
    --line-2:            rgba(240,239,236,0.22);
    --line-strong:       rgba(240,239,236,0.40);
  }
}

  /* ---------- Type families ---------- */
  --font-sans:         'Lato', system-ui, -apple-system, sans-serif;
  --font-display:      'Bebas Neue', 'Aptos Narrow', sans-serif;
  --font-display-wide: 'Bebas Neue', 'Aptos Display', sans-serif;
  --font-serif:        'Lato', 'Aptos Serif', Georgia, serif;
  --font-mono:         'Lato', 'Aptos Mono', 'SF Mono', monospace;

  /* ---------- Type scale (1.25 minor third) ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;
  --fs-5xl:   88px;

  /* ---------- Tracking / leading ---------- */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.55;
  --lh-loose:  1.75;
  --ls-wide:   0.18em;     /* logo-style spacing for eyebrows */
  --ls-display:  0.04em;  /* Bebas Neue */
  --ls-mono:   0.02em;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ---------- Shadows (low-key, architectural) ---------- */
  --shadow-1: 0 1px 0 rgba(26,31,38,0.04), 0 1px 2px rgba(26,31,38,0.06);
  --shadow-2: 0 2px 4px rgba(26,31,38,0.06), 0 8px 16px rgba(26,31,38,0.08);
  --shadow-3: 0 4px 8px rgba(26,31,38,0.08), 0 24px 48px rgba(26,31,38,0.12);
  --shadow-inset: inset 0 0 0 1px var(--line-1);
}

/* ============================================================
   Semantic type roles — reach for these in components.
   ============================================================ */

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-mono);
  color: var(--fg-2);
}

/* ============================================================
   Base reset for preview cards / kit pages
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}