/* ==========================================================================
   bkdcurtain ("Behind The K-Drama Curtain") — Theme Design Tokens
   Direction: SEOUL DUSK / COZY — promoted from research to source of truth.
   Version: 2.0.0

   Conceito: entardecer de Seul visto da janela num dia de chuva —
   gradiente pêssego -> lavanda -> ameixa, cantos arredondados, luz de
   abajur, lo-fi e aconchegante. CLARO por padrão ("tarde caindo"),
   escuro via [data-theme="dark"] ("noite de maratona").

   NOTA HONESTA: os NOMES de token são herdados do DS anterior
   (compatibilidade — ~40 componentes consomem via var(--token)), mas os
   VALORES são 100% Seoul Dusk. As escalas brutas foram remapeadas
   semanticamente, mantendo os nomes:
     --navy-*  ->  escala AMEIXA/PLUM (neutros quentes de entardecer)
     --gold-*  ->  escala CORAL-PÔR-DO-SOL (acento primário)
     --cyan-*  ->  escala LAVANDA-CREPÚSCULO (acento secundário)
   Tokens novos desta direção: --text-accent-on-tint, --font-script.

   CONTRASTE — WCAG AA (pares auditados e recalculados; texto normal >= 4.5,
   texto grande/UI >= 3.0). Nenhum par reprovado ficou de fora:
     texto #fffcf8 no --gradient-gold CLARO ......... 4.67 (coral) / 6.05 (ameixa)
     texto #fffcf8 no --gradient-gold-hover ......... 6.48 / 8.12 (hover ESCURECE, nunca clareia)
     texto #fffcf8 no --gradient-gold ESCURO ........ 4.88 (coral) / 5.31 (ameixa)
     --text-tertiary claro #7a606e nos fundos claros  4.72 (surface-2) – 5.51 (surface-1)
     --text-tertiary escuro #ae939c nos fundos ...... 4.57 (surface-2) – 5.99 (bg-base)
     --success-600 #43714b em surface-2 ............. 4.75 (selo "verificado" / tier-free)
     acento coral em corpo sobre surface-2 .......... 5.55 via --text-accent-on-tint (#9c3f31);
                                                      --accent-primary #bf4f3d fica só p/ display grande
     borda do input (newsletter) #846a78 ............ 4.76 vs campo #fffcf8 / 3.16+ vs gradiente
                                                      / 3.14+ no escuro (WCAG 1.4.11 UI >= 3.0)
     .bc-status-tag claro #9c3f31 SÓLIDO ............ 6.07 (bg-base) / 6.48 (surface-1)
     .bc-status-tag escuro (gold-300) ............... 8.20 (bg-base) — já passava, mantido
   ========================================================================== */

:root {
    /* ========== PALETTE — Full scales ========== */

    /* "NAVY" -> PLUM (neutros quentes: creme-pêssego -> ameixa-carvão)
       O escuro NUNCA é preto puro nem navy-roxo: é a mesma família
       quente escurecida (ameixa amarronzada, luz de abajur). */
    --navy-50:  #faf4ee;
    --navy-100: #f4e9e1;
    --navy-200: #e9d8d2;
    --navy-300: #d5bdbd;
    --navy-400: #a98e97;
    --navy-500: #846a78;
    --navy-600: #6a5263;
    --navy-700: #533f4f;
    --navy-800: #3c2d3b;
    --navy-900: #2d2130;
    --navy-950: #231a24;

    /* "GOLD" -> SUNSET CORAL (acento primário / marca)
       Família do coral-melancia do feed (#da7c69), puxada para o
       pêssego do entardecer. Usado com parcimônia (regra 90/10). */
    --gold-50:  #fdf1ec;
    --gold-100: #fbe1d6;
    --gold-200: #f6c4b1;
    --gold-300: #efa28b;
    --gold-400: #e5816a;
    --gold-500: #d96752;
    --gold-600: #bf4f3d;
    --gold-700: #9c3f31;
    --gold-800: #7b3328;
    --gold-900: #602a22;

    /* "CYAN" -> DUSK LAVENDER (acento secundário / links / chips)
       Lavanda acinzentada de céu pós-pôr-do-sol — dessaturada de
       propósito para não cair no dark-roxo-streaming. */
    --cyan-50:  #f6f3fa;
    --cyan-100: #ece4f3;
    --cyan-200: #d9cbe7;
    --cyan-300: #bfabd5;
    --cyan-400: #a58ac4;
    --cyan-500: #8b6caa;
    --cyan-600: #71558e;
    --cyan-700: #5c4473;
    --cyan-800: #473558;
    --cyan-900: #362943;

    /* FEEDBACK (semantic) — reaquecidos para a base quente */
    --success-400: #8fbf8f;
    --success-600: #43714b; /* AA 4.75 sobre surface-2 (selo verificado / tier-free) */
    --warning-400: #e8b26a;
    --warning-600: #a96f24;
    --error-400:   #e58a80;
    --error-600:   #b8453a;
    --info-400:    #a78fc6;
    --info-600:    #6c5594;

    /* ========== SEMANTIC TOKENS — Light (default, "tarde caindo") ========== */
    --bg-base:          var(--navy-50);
    --bg-surface-1:     #fffcf8;
    --bg-surface-2:     var(--navy-100);
    --bg-surface-3:     var(--navy-200);

    --text-primary:     var(--navy-900);
    --text-secondary:   var(--navy-600);
    --text-tertiary:    #7a606e; /* navy-500 meio passo + escuro — AA 4.72–5.51 nos fundos claros */
    --text-accent:      var(--gold-600);
    /* coral em TAMANHO DE CORPO sobre superfícies tingidas (surface-2):
       o gold-600 só passa em display grande; em corpo use este. AA 5.55. */
    --text-accent-on-tint: var(--gold-700);
    --text-link:        var(--cyan-700);

    --border-subtle:    rgba(45, 33, 48, 0.08);
    --border-default:   rgba(45, 33, 48, 0.16);
    --border-strong:    rgba(45, 33, 48, 0.32);
    --border-accent:    var(--gold-500);

    --accent-primary:   var(--gold-600);
    --accent-secondary: var(--cyan-600);

    --glass-panel:      rgba(255, 252, 248, 0.62);
    --glass-blur:       blur(20px) saturate(140%);

    /* Céu de entardecer: pêssego -> lavanda -> ameixa, bem suave */
    --bg-gradient: linear-gradient(
        180deg,
        #fbe7d8 0%,
        #ecdbe6 48%,
        #d9cbe7 100%
    );
    /* "gradient-gold" = gradiente-assinatura do pôr-do-sol (CTAs, selos).
       Mesma trajetória coral->ameixa, um passo + funda: texto #fffcf8
       passa AA (4.67 coral / 6.05 ameixa). Hover ESCURECE (6.48 / 8.12) —
       hover que clareia derruba o contraste abaixo de 4.5. */
    --gradient-gold: linear-gradient(135deg, #bf4f3d 0%, #71558e 100%);
    --gradient-gold-hover: linear-gradient(135deg, #9c3f31 0%, #5c4473 100%);
    --gradient-text-gold: linear-gradient(120deg, var(--navy-900) 20%, var(--gold-600) 60%, var(--cyan-600) 105%);

    --glow-gold:  radial-gradient(circle, rgba(229, 129, 106, 0.55), transparent 70%);
    --glow-cyan:  radial-gradient(circle, rgba(165, 138, 196, 0.5), transparent 70%);

    /* ========== TYPOGRAPHY ========== */
    /* Display/voz: "Fraunces" (serif soft, caixa-baixa espaçada = pôster
       minimalista do feed). Corpo/chrome: "Karla" (grotesca humanista,
       quente e jovem). Manuscrita só em legendas: "Caveat" (token extra). */
    --font-sans:  "Karla", system-ui, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", sans-serif;
    --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                  "Liberation Mono", "Courier New", monospace;
    --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype",
                  Georgia, serif;
    --font-script: "Caveat", "Segoe Script", cursive; /* só legendas/destaques */

    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1.0625rem;   /* corpo 17px (legibilidade maratona mobile) */
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;
    --text-4xl:   2.25rem;
    --text-5xl:   3rem;
    --text-6xl:   3.75rem;
    --text-7xl:   clamp(2.5rem, 9vw, 4.75rem);

    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;
    --fw-extrabold: 800;

    --tracking-tight:   -0.015em;
    --tracking-normal:  0em;
    --tracking-wide:    0.05em;
    --tracking-wider:   0.12em;
    --tracking-widest:  0.28em;

    --leading-none:     1;
    --leading-tight:    1.12;
    --leading-snug:     1.3;
    --leading-normal:   1.5;
    --leading-relaxed:  1.65;   /* corpo de artigo >= 1.6 */

    /* ========== SPACING ========== */
    --space-0:   0;
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;

    /* ========== RADIUS — cantos arredondados são identidade aqui ========== */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-2xl:  36px;
    --radius-3xl:  48px;
    --radius-pill: 9999px;

    /* ========== ELEVATION / SHADOWS — sombras de ameixa, nunca preto ===== */
    --shadow-sm:     0 1px 2px rgba(60, 45, 59, 0.10);
    --shadow-md:     0 4px 14px rgba(60, 45, 59, 0.12);
    --shadow-lg:     0 12px 36px rgba(60, 45, 59, 0.16);
    --shadow-xl:     0 28px 60px rgba(60, 45, 59, 0.14);
    --shadow-gold:   0 4px 16px rgba(217, 103, 82, 0.28);
    --shadow-gold-lg:0 14px 32px rgba(217, 103, 82, 0.32);

    /* ========== MOTION — calmo, lo-fi ========== */
    --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:  150ms;
    --duration-base:  280ms;
    --duration-slow:  550ms;

    /* ========== LAYOUT ========== */
    --container-max:   1160px;
    --container-prose: 700px;
    --gutter:          1.5rem;
    --gutter-lg:       2rem;
}

/* ==========================================================================
   DARK THEME — "noite de maratona" — activated via [data-theme="dark"]
   Charcoal-ameixa quente (mesma família, nunca preto puro, nunca navy),
   acentos DESSATURADOS/clareados em par (--accent claro != --accent escuro).
   ========================================================================== */
[data-theme="dark"] {
    --bg-base:          var(--navy-950);
    --bg-surface-1:     var(--navy-900);
    --bg-surface-2:     var(--navy-800);
    --bg-surface-3:     var(--navy-700);

    --text-primary:     #f6ebe2;
    --text-secondary:   #c5b3bd;
    --text-tertiary:    #ae939c; /* AA 4.57–5.99 nos fundos escuros */
    --text-accent:      var(--gold-300);
    --text-accent-on-tint: var(--gold-300); /* no escuro o gold-300 já passa (6.26 em surface-2) */
    --text-link:        var(--cyan-300);

    --border-subtle:    rgba(246, 235, 226, 0.08);
    --border-default:   rgba(246, 235, 226, 0.16);
    --border-strong:    rgba(246, 235, 226, 0.32);
    --border-accent:    var(--gold-400);

    --accent-primary:   var(--gold-300);
    --accent-secondary: var(--cyan-300);

    --glass-panel:      rgba(45, 33, 48, 0.55);
    --glass-blur:       blur(22px) saturate(130%);

    /* Janela à noite: ameixa profunda com resto de lavanda no horizonte */
    --bg-gradient: linear-gradient(
        180deg,
        #2d2130 0%,
        #231a24 55%,
        #1f1820 100%
    );
    /* texto #fffcf8 passa AA: 4.88 (coral) / 5.31 (ameixa); hover escurece */
    --gradient-gold: linear-gradient(135deg, #b1543f 0%, #7a5e96 100%);
    --gradient-gold-hover: linear-gradient(135deg, #9c3f31 0%, #5c4473 100%);
    --gradient-text-gold: linear-gradient(120deg, #f6ebe2 20%, var(--gold-300) 60%, var(--cyan-300) 105%);

    --glow-gold:  radial-gradient(circle, rgba(239, 162, 139, 0.4), transparent 70%);
    --glow-cyan:  radial-gradient(circle, rgba(191, 171, 213, 0.35), transparent 70%);

    --shadow-sm:     0 1px 2px rgba(10, 6, 10, 0.45);
    --shadow-md:     0 4px 14px rgba(10, 6, 10, 0.45);
    --shadow-lg:     0 12px 36px rgba(10, 6, 10, 0.55);
    --shadow-xl:     0 28px 60px rgba(10, 6, 10, 0.45);
    --shadow-gold:   0 4px 16px rgba(211, 112, 92, 0.22);
    --shadow-gold-lg:0 14px 32px rgba(211, 112, 92, 0.26);
}

/* ==========================================================================
   UTILITY CLASSES — opt-in atalhos semânticos (nomes preservados)
   ========================================================================== */

.bc-glass-panel {
    background: var(--glass-panel);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.bc-btn-pill {
    background: var(--gradient-gold);
    color: #fffcf8;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    border: 1px solid rgba(255, 252, 248, 0.25);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-in-out);
    text-decoration: none;
    display: inline-block;
    box-shadow: var(--shadow-gold);
}

.bc-btn-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold-lg);
    background: var(--gradient-gold-hover);
}

.bc-text-gold-gradient {
    background: var(--gradient-text-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bc-status-tag {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    /* DEVE ficar SÓLIDO (sem opacity): coral com alpha cai abaixo de AA.
       gold-700 sólido = 6.07 em bg-base / 6.48 em surface-1. */
    color: var(--gold-700);
    letter-spacing: var(--tracking-widest);
    text-transform: lowercase;
}

[data-theme="dark"] .bc-status-tag {
    color: var(--accent-primary); /* gold-300 — 8.20 em bg-base, já passava */
}

.bc-category-tag {
    font-size: 0.7rem;
    text-transform: lowercase;
    letter-spacing: 2px;
    color: var(--accent-secondary);
    font-weight: var(--fw-bold);
}