/* ==========================================================================
   Conect Mídia — Design System Tokens
   Colors, Typography, Spacing, Radii
   ========================================================================== */

/* Fonts — DM Sans (local variable font) + DM Serif Display (Google Fonts) */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/DMSerifDisplay-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Colors: Base ───────────────────────────────────────────────────────── */
  --paper:           #f6f3f1;   /* Primary background — never use pure #fff  */
  --ink:             #1a1816;   /* Primary text — never use pure #000        */
  --terracotta:      #e8734a;   /* CTAs, buttons, highlights — max 15%       */
  --terracotta-deep: #c45a35;   /* Hover / pressed state for terracotta      */
  --stone:           #e8e4e0;   /* Borders, separators, secondary bg         */

  /* ── Colors: Pastels (service categorization, social media variety) ──── */
  --peach:           #fce8df;
  --sage:            #e0f0e8;
  --cream:           #faf0d8;
  --lavender:        #e8e0f4;

  /* ── Colors: Semantic ───────────────────────────────────────────────────── */
  --color-bg:        var(--paper);
  --color-bg-alt:    var(--stone);
  --color-bg-dark:   var(--ink);
  --color-fg:        var(--ink);
  --color-fg-muted:  #6b6560;
  --color-fg-on-dark:var(--paper);
  --color-accent:    var(--terracotta);
  --color-accent-hover: var(--terracotta-deep);
  --color-border:    var(--stone);
  --color-divider:   var(--stone);

  /* ── Typography: Families ───────────────────────────────────────────────── */
  --font-display:    'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body:       'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Typography: Scale ──────────────────────────────────────────────────── */
  --text-display:    32px;   /* Headlines, hero text — DM Serif Display     */
  --text-heading:    22px;   /* Section titles — DM Sans                    */
  --text-subheading: 16px;   /* Subtitles, emphasis — DM Sans Medium/Semi   */
  --text-body:       12px;   /* Body copy — DM Sans Regular                 */
  --text-caption:    9px;    /* Labels, tags, metadata — DM Sans            */

  /* ── Typography: Line Heights ───────────────────────────────────────────── */
  --leading-display:    1.2;
  --leading-heading:    1.3;
  --leading-subheading: 1.4;
  --leading-body:       1.6;
  --leading-caption:    1.4;

  /* ── Typography: Weights ────────────────────────────────────────────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --space-xs:  8px;    /* Between elements                                 */
  --space-sm:  12px;   /* Tight grouping                                   */
  --space-md:  20px;   /* Card padding                                     */
  --space-lg:  40px;   /* Page margin                                      */
  --space-xl:  56px;   /* Section gap (min)                                */
  --space-2xl: 72px;   /* Section gap (max)                                */

  /* ── Border Radius ──────────────────────────────────────────────────────── */
  --radius-sm:     8px;   /* Badges, tags                                  */
  --radius-md:     12px;  /* Cards (min)                                   */
  --radius-lg:     16px;  /* Cards (max)                                   */
  --radius-pill:   100px; /* Buttons                                       */
  --radius-circle: 50%;   /* Avatars                                       */

  /* ── Shadows (minimal — brand avoids heavy shadows) ─────────────────────── */
  --shadow-subtle:  0 1px 3px rgba(26, 24, 22, 0.06);
  --shadow-card:    0 2px 8px rgba(26, 24, 22, 0.04);

  /* ── Transitions ────────────────────────────────────────────────────────── */
  --ease-default:   cubic-bezier(0.25, 0.1, 0.25, 1); /* @kind other */
  --duration-fast:  150ms; /* @kind other */
  --duration-normal:250ms; /* @kind other */
}

/* ── Base Resets & Defaults ─────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-fg);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Semantic Type Styles ───────────────────────────────────────────────────── */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: var(--weight-regular);
  color: var(--color-fg);
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-family: var(--font-body);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-fg);
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  font-weight: var(--weight-medium);
  color: var(--color-fg);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  color: var(--color-fg);
}

small, .caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--weight-regular);
  color: var(--color-fg-muted);
}

/* ── Link Styles ────────────────────────────────────────────────────────────── */
a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* ── Button Base ────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--duration-fast) var(--ease-default);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--paper);
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  text-decoration: none;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-fg);
  border-color: var(--color-fg);
}
.btn-secondary:hover {
  background-color: var(--color-bg-alt);
  text-decoration: none;
}

/* ── Card Base ──────────────────────────────────────────────────────────────── */
.card {
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
}

/* ── Badge / Tag ────────────────────────────────────────────────────────────── */
.badge {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  display: inline-block;
}