/* ============================================================
   DS-APPLE — Typography System
   Baseado na identidade tipográfica da Apple
   ============================================================ */

/* ──────────────────────────────────────────
   TÍTULOS HIERÁRQUICOS
─────────────────────────────────────────── */

/* Hero XL — Impacto máximo. Ex: "iPhone 17 Pro" */
.ds-hero-xl {
    font-family: var(--font-display);
    font-size: var(--text-hero-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-hero);
    letter-spacing: var(--letter-spacing-hero);
    color: var(--color-text-primary);
}

/* Hero — Manchete principal de seção */
.ds-hero {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-hero);
    letter-spacing: var(--letter-spacing-display);
    color: var(--color-text-primary);
}

/* Display — Headline de dobra */
.ds-display {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-display);
    color: var(--color-text-primary);
}

/* Title XL — Subtítulo de seção */
.ds-title-xl {
    font-family: var(--font-display);
    font-size: var(--text-title-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-title);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
}

/* Title LG — Título de card / painel */
.ds-title-lg {
    font-family: var(--font-display);
    font-size: var(--text-title-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-title);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
}

/* Title — Título de componente */
.ds-title {
    font-family: var(--font-display);
    font-size: var(--text-title);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
}

/* ──────────────────────────────────────────
   CORPO E SUPORTE
─────────────────────────────────────────── */

/* Headline — Intro de parágrafo */
.ds-headline {
    font-family: var(--font-text);
    font-size: var(--text-headline);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    color: var(--color-text-primary);
}

/* Body LG — Corpo principal Apple (~17px) */
.ds-body-lg {
    font-family: var(--font-text);
    font-size: var(--text-body-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
}

/* Body — Corpo padrão */
.ds-body {
    font-family: var(--font-text);
    font-size: var(--text-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
}

/* Callout — Texto de destaque interno */
.ds-callout {
    font-family: var(--font-text);
    font-size: var(--text-callout);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
}

/* Caption — Legendas e rótulos */
.ds-caption {
    font-family: var(--font-text);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-heading);
    color: var(--color-text-tertiary);
}

/* Footnote — Notas de rodapé */
.ds-footnote {
    font-family: var(--font-text);
    font-size: var(--text-footnote);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-tertiary);
}

/* Micro — Labels e badges pequeníssimos */
.ds-micro {
    font-family: var(--font-text);
    font-size: var(--text-micro);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

/* ──────────────────────────────────────────
   VARIAÇÕES DE COR
─────────────────────────────────────────── */

.ds-text-primary {
    color: var(--color-text-primary);
}

.ds-text-secondary {
    color: var(--color-text-secondary);
}

.ds-text-tertiary {
    color: var(--color-text-tertiary);
}

.ds-text-white {
    color: var(--color-text-white);
}

.ds-text-on-dark {
    color: var(--color-text-on-dark);
}

.ds-text-accent {
    color: var(--color-accent);
}

/* Variações para fundos escuros */
.ds-section--dark .ds-hero-xl,
.ds-section--dark .ds-hero,
.ds-section--dark .ds-display,
.ds-section--dark .ds-title-xl,
.ds-section--dark .ds-title-lg,
.ds-section--dark .ds-title,
.ds-section--dark .ds-headline,
.ds-section--dark h1,
.ds-section--dark h2,
.ds-section--dark h3,
.ds-section--dark h4 {
    color: var(--color-text-on-dark);
}

.ds-section--dark .ds-body-lg,
.ds-section--dark .ds-body,
.ds-section--dark .ds-callout,
.ds-section--dark p {
    color: var(--color-text-on-dark-muted);
}

.ds-section--dark .ds-caption,
.ds-section--dark .ds-footnote,
.ds-section--dark .ds-micro {
    color: var(--color-text-tertiary);
}

/* ──────────────────────────────────────────
   VARIAÇÕES DE PESO
─────────────────────────────────────────── */

.fw-thin {
    font-weight: var(--font-weight-thin);
}

.fw-light {
    font-weight: var(--font-weight-light);
}

.fw-regular {
    font-weight: var(--font-weight-regular);
}

.fw-medium {
    font-weight: var(--font-weight-medium);
}

.fw-semibold {
    font-weight: var(--font-weight-semibold);
}

.fw-bold {
    font-weight: var(--font-weight-bold);
}

.fw-heavy {
    font-weight: var(--font-weight-heavy);
}

.fw-black {
    font-weight: var(--font-weight-black);
}

/* ──────────────────────────────────────────
   HEADLINE COM GRADIENTE (Apple effect)
─────────────────────────────────────────── */

.ds-text-gradient {
    background: linear-gradient(135deg, #0071e3 0%, #2997ff 50%, #30b0c7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ds-text-gradient--warm {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff9f0a 50%, #ff375f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ──────────────────────────────────────────
   EYEBROW — Label antes do título
─────────────────────────────────────────── */

.ds-eyebrow {
    font-family: var(--font-text);
    font-size: var(--text-caption);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-accent);
    display: block;
    margin-bottom: var(--space-3);
}

/* ──────────────────────────────────────────
   STAT / NÚMERO DE DESTAQUE
─────────────────────────────────────────── */

.ds-stat-number {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    letter-spacing: -0.04em;
}

.ds-stat-unit {
    font-size: 0.5em;
    font-weight: var(--font-weight-medium);
    vertical-align: super;
    margin-right: 0.15em;
}

.ds-stat-label {
    font-size: var(--text-body);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

/* ──────────────────────────────────────────
   LINKS
─────────────────────────────────────────── */

.ds-link {
    font-size: var(--text-body-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    transition: gap var(--duration-base) var(--ease-out);
}

.ds-link::after {
    content: '›';
    font-size: 1.1em;
    transition: transform var(--duration-base) var(--ease-out);
}

.ds-link:hover {
    text-decoration: none;
    gap: var(--space-2);
}

.ds-link:hover::after {
    transform: translateX(2px);
}

.ds-section--dark .ds-link,
.ds-link--dark {
    color: var(--color-accent-dark);
}

/* ──────────────────────────────────────────
   PRICE — Exibição de preço
─────────────────────────────────────────── */

.ds-price {
    font-family: var(--font-display);
    font-size: var(--text-body-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
}

.ds-price-highlight {
    font-family: var(--font-display);
    font-size: var(--text-title);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}