/**
 * theme-tokens.css — single source of truth for the journal_web_itb theme.
 *
 * All design tokens (colors, spacing, radius, typography, shadows) live here.
 * Per-journal overrides should only need to redefine these :root variables.
 *
 * Widget tokens (--phw-*) in lib/widgets/widgets-base.css defer to the
 * matching --color-/--space-/etc. tokens here via fallback chains.
 */

:root {
  /* ══════════════════════════════════════════════════════
     BRAND COLORS
     ══════════════════════════════════════════════════════ */
  --color-primary: #2346A0;
  --color-primary-dark: #17317A;
  --color-primary-hover: #1d3b8a;
  --color-secondary: #F2B233;
  --color-accent: #FFB629;

  /* ── Surfaces ────────────────────────────────────── */
  --color-bg: #FFFFFF;
  --color-surface: #F7F7F7;
  --color-surface-soft: #F5F7FF;
  --color-surface-code: #EEF1F7;

  /* ── Text ────────────────────────────────────────── */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #666666;
  --color-text-muted: #888888;
  --color-text-soft: #667085;

  /* ── Borders ─────────────────────────────────────── */
  --color-border: #E5E5E5;
  --color-border-soft: #D7DEEA;
  --color-border-divider: #F3F4F6;

  /* ── Semantic links ──────────────────────────────── */
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-dark);

  /* ── Buttons ─────────────────────────────────────── */
  --button-primary-bg: var(--color-primary);
  --button-primary-text: #FFFFFF;
  --button-secondary-bg: var(--color-secondary);
  --button-secondary-text: #1A1A1A;

  /* ── Section backgrounds ─────────────────────────── */
  --section-light-bg: var(--color-surface);
  --section-dark-bg: var(--color-primary-dark);

  /* ══════════════════════════════════════════════════════
     SPACING SCALE
     ══════════════════════════════════════════════════════ */
  --space-1:   0.25rem;
  --space-1-5: 0.4rem;
  --space-2:   0.5rem;
  --space-2-5: 0.6rem;
  --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;

  /* ══════════════════════════════════════════════════════
     BORDER RADIUS
     ══════════════════════════════════════════════════════ */
  --radius-xs:   0.35rem;
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-pill: 9999px;

  /* ══════════════════════════════════════════════════════
     TYPOGRAPHY
     ══════════════════════════════════════════════════════ */
  --fs-xs:      0.7rem;
  --fs-sm:      0.78rem;
  --fs-md:      0.8125rem;
  --fs-caption: 0.85rem;
  --fs-base:    0.875rem;
  --fs-lg:      0.95rem;
  --fs-xl:      1.1rem;
  --fs-2xl:     1.75rem;
  --fs-3xl:     2.25rem;
  --fs-4xl:     3rem;

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

  --lh-tight:   1.5;
  --lh-base:    1.6;
  --lh-relaxed: 1.7;

  /* ══════════════════════════════════════════════════════
     SHADOWS
     ══════════════════════════════════════════════════════ */
  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 12px 28px rgba(0, 0, 0, 0.10);
  --shadow-focus: 0 0 0 3px rgba(35, 70, 160, 0.18);

  /* ══════════════════════════════════════════════════════
     LEGACY ALIASES (kept for backward compatibility with
     existing section CSS that references --primary-*, etc.)
     ══════════════════════════════════════════════════════ */

  --primary-900: var(--color-primary-dark);
  --primary-800: var(--color-primary);
  --primary-700: var(--color-primary);
  --primary-600: var(--color-primary);
  --primary-500: var(--color-primary);
  --secondary-500: var(--color-secondary);
  --secondary-400: var(--color-secondary);
  --secondary-300: var(--color-surface-soft);
  --secondary-200: var(--color-surface-soft);
  --secondary-100: var(--color-surface-soft);
  --accent-500: var(--color-accent);
  --accent-600: var(--color-secondary);
  --accent-400: var(--color-accent);
  --gray-900: var(--color-text-primary);
  --gray-800: var(--color-text-primary);
  --gray-700: var(--color-text-primary);
  --gray-600: var(--color-text-secondary);
  --gray-500: var(--color-text-muted);
  --gray-300: var(--color-border);
  --gray-200: var(--color-surface);
  --gray-100: var(--color-surface-soft);
  --white: var(--color-bg);
}

.about-section .image-column .inner-column .scimago-badge {
  background: var(--color-bg);
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
  max-width: 260px;
  padding: 14px;
}

.about-section .image-column .inner-column .scimago-badge p {
  margin: 0;
}

.about-section .image-column .inner-column .scimago-badge img {
  display: block;
  height: auto;
  max-width: 100%;
}