/* =========================================================
   OTAKU SENPAI VERSE — Design System Layer (Sprint 003)
   ---------------------------------------------------------
   Este arquivo NÃO substitui tokens.css — ele adiciona uma
   camada semântica por cima dos tokens já existentes:
     - Escala tipográfica (Orbitron / Space Grotesk / Inter)
     - Sistema de espaçamento (4 → 128)
     - Paleta semântica (background, surface, primary, etc.)
       mapeada 1:1 sobre as cores já definidas em tokens.css,
       mais success/warning/danger (novas nesta Sprint).

   Carregado em includes/header.php logo após tokens.css.
   ========================================================= */

:root {
  /* ---------------------------------------------------------
     Tipografia — Sprint 003
     A fonte física (Orbitron / Space Grotesk / Inter) é definida
     uma única vez em tokens.css (--font-display, --font-subheading,
     --font-sans). Aqui apenas expomos o alias semântico usado
     pelos componentes de Title/Subtitle desta Sprint.
     --------------------------------------------------------- */
  --font-heading: var(--font-display);
  /* --font-subheading e --font-sans já vêm de tokens.css */

  /* Escala tipográfica consistente (rem, base 16px) */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */

  /* ---------------------------------------------------------
     Espaçamento — Sprint 003
     --------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------------------------------------------------------
     Paleta semântica — Sprint 003
     Aliases sobre as cores de tokens.css (fonte única da verdade
     continua sendo tokens.css; aqui só damos nomes de papel/função).
     --------------------------------------------------------- */
  --color-background: var(--color-ink);
  --color-surface: var(--color-panel);
  --color-surface-alt: var(--color-panel-alt);
  --color-primary: var(--color-sakura);
  --color-primary-soft: var(--color-sakura-soft);
  --color-secondary: var(--color-mist);
  --color-accent: var(--color-gold);
  --color-text: var(--color-paper);
  --color-text-muted: var(--color-dim);
  --color-border: var(--color-line);
  --color-border-strong: var(--color-line-strong);

  /* Novas cores semânticas de estado (Sprint 003) */
  --color-success: #38D9A9;
  --color-success-soft: rgba(56, 217, 169, 0.14);
  --color-warning: #F2B84B; /* mesmo tom do dourado — mantém a paleta única */
  --color-warning-soft: rgba(242, 184, 75, 0.14);
  --color-danger: #FF5470;
  --color-danger-soft: rgba(255, 84, 112, 0.14);
}

/* ---------------------------------------------------------
   Classes de tipografia (Title / Subtitle / corpo)
   Consumidas pelos componentes components/title.php e afins.
   --------------------------------------------------------- */
.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.ds-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--color-text);
}

.ds-title--xl { font-size: clamp(2.5rem, 7vw, 5.5rem); }
.ds-title--lg { font-size: clamp(2rem, 5vw, 3.5rem); }
.ds-title--md { font-size: clamp(1.5rem, 3.4vw, 2.25rem); }
.ds-title--sm { font-size: var(--text-2xl); }

.ds-subtitle {
  font-family: var(--font-subheading);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.6;
  font-weight: 500;
}

/* ---------------------------------------------------------
   Container padrão (spacing scale aplicado nas margens)
   --------------------------------------------------------- */
.ds-container {
  max-width: 80rem; /* 1280px, equivalente ao max-w-7xl já usado */
  margin-inline: auto;
  padding-inline: var(--space-5);
}

@media (min-width: 768px) {
  .ds-container {
    padding-inline: var(--space-6);
  }
}