/**
 * TOKENS.CSS
 * Design system para "Estronho e Esquésito"
 * Suporte a tema claro e escuro (editorial + pulp)
 */

:root {
  /* ============================================
     TEMA CLARO (padrão - papel/tinta)
     ============================================ */
  
  /* Base surfaces */
  --bg: #faf7f2;              /* papel creme */
  --surface: #faf7f2;         /* área de leitura */
  --surface-2: #eaf5f5;       /* barras/menus/caixas */
  --border-ink: #000;         /* cor base para bordas (derivada) */
  --border: color-mix(in srgb, var(--surface) 88%, var(--border-ink) 12%);
  --hairline: color-mix(in srgb, var(--surface) 92%, var(--border-ink) 8%);
  
  /* Text */
  --text: #2a2520;            /* tinta (quase preto) */
  --text-2: #5a534d;          /* texto secundário */
  --muted: #8a837d;           /* legendas, notas */
  --heading: #313741;         /* títulos */
  
  /* Accents (pulp controlado) */
  --accent: #4b5761;          /* ferrugem/âmbar */
  --accent-hover: #566670;    /* ferrugem escuro */
  --accent-2: #485564;        /* azul editorial */
  --accent-2-dark: #485564;   /* azul editorial */
  
  /* Links */
  --link: #3a433a;            /* verde oliva escuro */
  --link-hover: #b8714f;      /* ferrugem no hover */

  /* Cores configuraveis */
  --site-title: var(--heading);
  --site-subtitle: var(--accent);
  --article-title: var(--accent-2);
  --article-text: var(--text);
  --dropcap: var(--accent);
  --menu-accent: var(--accent);
  --card-bg: transparent;
  --card-feature-bg: color-mix(in srgb, var(--card-bg) 85%, #000 15%);
  --card-border-base: var(--surface);
  --card-feature-border-base: var(--card-border-base);
  --preview-card-border: color-mix(in srgb, var(--card-border-base) 88%, var(--border-ink) 12%);
  --preview-card-hairline: color-mix(in srgb, var(--card-border-base) 92%, var(--border-ink) 8%);
  --related-card-bg: var(--surface);
  --related-card-border-base: var(--related-card-bg);
  --author-box-bg: var(--surface-2);
  --author-box-border-base: var(--author-box-bg);
  --list-bg: var(--surface-2);
  --list-border-base: var(--list-bg);
  --bg-gradient-top: var(--bg);
  --bg-gradient-bottom: color-mix(in srgb, var(--bg) 92%, #000 8%);
  --bg-radial: color-mix(in srgb, var(--accent) 12%, transparent);
  
  /* States */
  --focus: #b8714f;           /* outline focus */
  --selection-bg: #d4ccc0;    /* seleção de texto */
  --selection-text: #2a2520;  /* texto selecionado */
  --mark-bg: #ffeb3b;         /* search highlight */
  --mark-text: var(--text);   /* search highlight text */
}

/* ============================================
   TEMA ESCURO (papel escuro/tinta clara)
   ============================================ */

[data-theme="dark"] {
  /* Base surfaces */
  --bg: #1a1916;              /* grafite muito escuro */
  --surface: #1a1916;         /* área de leitura */
  --surface-2: #24211d;       /* barras/menus (levemente mais claro) */
  --border-ink: #fff;         /* cor base para bordas (derivada) */
  --border: color-mix(in srgb, var(--surface) 88%, var(--border-ink) 12%);
  --hairline: color-mix(in srgb, var(--surface) 92%, var(--border-ink) 8%);
  
  /* Text */
  --text: #cac5bc;            /* tinta clara (branco sujo) */
  --text-2: #b0aba3;          /* texto secundário */
  --muted: #8a857c;           /* legendas, notas */
  --heading: #d4cfc6;         /* títulos (mais contraste) */
  
  /* Accents (ajustados para contraste) */
  --accent: #d4915f;          /* âmbar queimado (mais luminoso) */
  --accent-hover: #e8a575;    /* âmbar claro hover */
  --accent-2: #6b7766;        /* verde oliva profundo luminoso */
  --accent-2-dark: #636055;   /* verde oliva escuro */

  /* Cores configuraveis */
  --site-title: var(--heading);
  --site-subtitle: var(--accent);
  --article-title: var(--accent-2);
  --dropcap: var(--accent);
  --menu-accent: var(--accent);
  --card-bg: transparent;
  --card-feature-bg: color-mix(in srgb, var(--card-bg) 85%, #000 15%);
  --card-border-base: var(--surface);
  --card-feature-border-base: var(--card-border-base);
  --preview-card-border: color-mix(in srgb, var(--card-border-base) 88%, var(--border-ink) 12%);
  --preview-card-hairline: color-mix(in srgb, var(--card-border-base) 92%, var(--border-ink) 8%);
  --related-card-bg: var(--surface-2);
  --author-box-bg: var(--surface-2);
  --list-bg: var(--surface-2);
  --bg-gradient-top: var(--bg);
  --bg-gradient-bottom: color-mix(in srgb, var(--bg) 92%, #fff 8%);
  --bg-radial: color-mix(in srgb, var(--accent) 18%, transparent);
  
  /* Links */
  --link: #6b7766;            /* verde oliva claro */
  --link-hover: #d4915f;      /* âmbar no hover */
  
  /* States */
  --focus: #d4915f;           /* outline focus */
  --selection-bg: #3a3630;    /* seleção de texto */
  --selection-text: #f0ebe2;  /* texto selecionado */
  --mark-bg: var(--accent-2); /* search highlight */
  --mark-text: var(--text);   /* search highlight text */
}

/* Suporte automático para preferência do sistema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Base surfaces */
    --bg: #1a1916;
    --surface: #1a1916;
    --surface-2: #24211d;
    --border-ink: #fff;
    --border: color-mix(in srgb, var(--surface) 88%, var(--border-ink) 12%);
    --hairline: color-mix(in srgb, var(--surface) 92%, var(--border-ink) 8%);
    
    /* Text */
    --text: #cac5bc;
    --text-2: #b0aba3;
    --muted: #8a857c;
    --heading: #d4cfc6;  /* Mesmo valor do [data-theme="dark"] para consistência */
    
    /* Accents */
    --accent: #d4915f;
    --accent-hover: #e8a575;
    --accent-2: #7e8b78;
    --accent-2-dark: #977d45;
    
    /* Links */
    --link: #6b7766;
    --link-hover: #d4915f;

    /* Cores configuraveis */
    --site-title: var(--heading);
    --site-subtitle: var(--accent);
    --article-title: var(--accent-2);
    --dropcap: var(--accent);
    --menu-accent: var(--accent);
    --card-bg: transparent;
    --card-feature-bg: color-mix(in srgb, var(--card-bg) 85%, #000 15%);
    --related-card-bg: var(--surface-2);
    --author-box-bg: var(--surface-2);
    --list-bg: var(--surface-2);
    --bg-gradient-top: var(--bg);
    --bg-gradient-bottom: color-mix(in srgb, var(--bg) 92%, #fff 8%);
    --bg-radial: color-mix(in srgb, var(--accent) 18%, transparent);
    
    /* States */
    --focus: #d4915f;
    --selection-bg: #3a3630;
    --selection-text: #f0ebe2;
    --mark-bg: var(--accent-2); /* search highlight */
    --mark-text: var(--text);   /* search highlight text */
  }
}

:root {
  /* ============================================
     TIPOGRAFIA (não muda entre temas)
     ============================================ */
  
  /* Fontes */
  --font-masthead: 'Anton', sans-serif;      /* Só para o logo/masthead */
  --font-display: 'Libre Baskerville', serif; /* Títulos de artigos/seções */
  --font-body: 'Libre Baskerville', serif;
  
  /* Escala tipográfica - progressão harmoniosa */
  --text-xs: 0.75rem;      /* 12px - meta info, tags pequenas */
  --text-sm: 0.875rem;     /* 14px - H6, legendas, notas */
  --text-base: 1rem;       /* 16px - H5, corpo principal (p) */
  --text-lg: 1.2rem;     /* 18px - H4, lead/destaque, resumos */
  --text-xl: 1.5rem;       /* 24px - H3 */
  --text-2xl: 2rem;        /* 32px - H2 */
  --text-3xl: 2.5rem;      /* 40px - H1 */
  --text-4xl: 3.5rem;      /* 56px - H1 em telas grandes, títulos de seção grandes */
  --text-5xl: 4.5rem;      /* 72px - Masthead (logo do site) */
  --text-6xl: 6rem;        /* 96px - Masthead em telas muito grandes */
  
  /* Pesos */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  
  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose: 1.9;
  
  
  /* ============================================
     ESPAÇAMENTOS
     ============================================ */
  
  --space-xs: 0.7rem;      /* 8px */
  --space-sm: 1rem;        /* 16px */
  --space-md: 1.5rem;      /* 24px */
  --space-h: 2.1rem;      /* 33px */  
  --space-lg: 2.5rem;      /* 40px */
  --space-xl: 4rem;        /* 64px */
  --space-2xl: 6rem;       /* 96px */
  --space-3xl: 8rem;       /* 128px */
  
  
  /* ============================================
     LAYOUT
     ============================================ */
  
  /* Larguras de coluna (leitura confortável) */
  --width-text: 45rem;     /* ~720px - artigo (mais generoso) */
  --width-content: 58rem;  /* ~928px - conteúdo geral (mais presença) */
  --width-wide: 66rem;     /* ~1216px - máximo (revista cultural) */
  
  /* Container paddings */
  --padding-mobile: 1.25rem;
  --padding-tablet: 2rem;
  --padding-desktop: 3rem;
  
  /* Cores de Tabela (padrão) */
  --table-header-bg: var(--accent-2-dark);
  --table-header-color: var(--heading);
  --table-row-bg: var(--surface);
  --table-row-color: var(--text);
  --table-row-alt-bg: var(--surface-2);
  
  
  /* ============================================
     ELEMENTOS DECORATIVOS
     ============================================ */
  
  /* Bordas/filetes */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 3px;
  
  /* Transições suaves */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ============================================
   SELEÇÃO DE TEXTO (aplica tokens)
   ============================================ */

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

::-moz-selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}


.dropcap {
  float: left;
  font-size: 4.5rem;
  line-height: 1;
  padding-right: 0.4rem;
  color: var(--dropcap);
}