/* ============================================================
   1º DIREITO — Design Tokens
   Source of truth for color, typography, spacing, radii, shadows.
   Pull from this file in every artifact.
   ============================================================ */

/* ---------- WEBFONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Brand-licensed Libre Caslon Text files. Path is relative to this stylesheet,
   so every artifact that links to colors_and_type.css resolves them correctly
   as long as /fonts lives as a sibling of the css file. */
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/LibreCaslonText-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/LibreCaslonText-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/LibreCaslonText-Italic.ttf') format('truetype');
}

:root {
  /* ============================================================
     COLOR — RAW PALETTE (from Brand Alignment doc)
     ============================================================ */
  --c-turquoise:        #29adba;  /* Primary — visão, clareza, direção */
  --c-deep-teal:        #40888f;  /* Secondary — maturidade, autoridade */
  --c-burnt-orange:     #c55e25;  /* Accent — ação, dinamismo */
  --c-beige:            #e2d7c4;  /* Surface — base, estrutura */
  --c-off-white:        #F3EEE1;  /* Surface — leveza, respiro */

  /* Tonal extensions (derived; use sparingly) */
  --c-turquoise-soft:   #6ec4cd;
  --c-turquoise-deep:   #1f8993;
  --c-teal-deep:        #2f6a70;
  --c-orange-soft:      #d97a47;
  --c-orange-deep:      #9d4719;
  --c-beige-deep:       #c9bba2;
  --c-cream:            #faf6ed;

  --c-ink:              #1a1a1a;  /* Headline ink, near-black */
  --c-ink-muted:        #4a4a4a;  /* Body, ~70% */
  --c-line:             rgba(26, 26, 26, 0.10);
  --c-line-strong:      rgba(26, 26, 26, 0.20);

  /* ============================================================
     SEMANTIC COLOR
     ============================================================ */
  --bg:                 var(--c-off-white);
  --bg-alt:             var(--c-beige);
  --bg-cream:           var(--c-cream);
  --bg-inverse:         var(--c-deep-teal);
  --bg-hot:             var(--c-burnt-orange);

  --fg:                 var(--c-ink);
  --fg-muted:           var(--c-ink-muted);
  --fg-on-dark:         var(--c-off-white);
  --fg-brand:           var(--c-turquoise);

  --accent:             var(--c-turquoise);
  --accent-2:           var(--c-burnt-orange);
  --accent-deep:        var(--c-deep-teal);

  --border:             var(--c-line);
  --border-strong:      var(--c-line-strong);

  /* ============================================================
     TYPE — FAMILIES
     ============================================================ */
  --font-display: 'Libre Caslon Text', 'Libre Caslon', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', 'Roboto Mono', monospace;

  /* ============================================================
     TYPE — SCALE (modular, ~1.2 ratio with editorial display jumps)
     ============================================================ */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;   /* base body */
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-96: 96px;
  --fs-128: 128px;

  /* Line heights */
  --lh-tight:    1.05;
  --lh-display:  1.08;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-loose:    1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-mega:   0.12em;  /* eyebrow caps */

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ============================================================
     RADII — capsule-first system
     ============================================================ */
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-arch:  9999px 9999px 0 0;  /* photo arches */
  --r-pill:  9999px;
  --r-circle: 50%;

  /* ============================================================
     SHADOW — restrained, soft (the brand favors flat color blocks)
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(26,26,26,0.06);
  --shadow-sm: 0 2px 6px rgba(26,26,26,0.08);
  --shadow-md: 0 6px 18px rgba(26,26,26,0.10);
  --shadow-lg: 0 18px 48px rgba(26,26,26,0.14);
  --shadow-warm: 0 12px 32px rgba(197, 94, 37, 0.18);

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 220ms;
  --t-slow: 380ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — Libre Caslon, italic-friendly. Used for hero headlines */
.t-display, h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--fs-48), 6vw, var(--fs-96));
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-display em, h1 em, .t-italic {
  font-style: italic;
  font-weight: 400;
}

/* Section headline */
.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--fs-32), 4vw, var(--fs-56));
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

/* Card / sub-section headline — sans, bold */
.t-h3, h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg);
}

.t-h4, h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg);
}

/* Body */
.t-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.t-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.t-small, small {
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

/* Eyebrow — small, uppercase, tracked. Used on Instagram header line */
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-12);
  line-height: 1;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Header strip — "1ºD | Conteúdos para Consultores Imobiliários" */
.t-header-strip {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-13);
  letter-spacing: 0.02em;
  color: var(--c-turquoise);
}
.t-header-strip strong { font-weight: 700; color: var(--c-deep-teal); }

/* Capsule label — used INSIDE the turquoise pill */
.t-capsule {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-15);
  letter-spacing: 0;
  color: var(--c-off-white);
}

/* Mono — only for credentials/code-like items */
.t-mono, code, kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
}

/* Italic emphasis word — the brand's signature */
.t-italic-accent {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-burnt-orange);
}

/* Utility text colors */
.fg-turquoise { color: var(--c-turquoise); }
.fg-teal      { color: var(--c-deep-teal); }
.fg-orange    { color: var(--c-burnt-orange); }
.fg-cream     { color: var(--c-off-white); }
.fg-muted     { color: var(--fg-muted); }