/**
 * DASHBOARD TOKENS
 * Design tokens for Dashboard (1.0) - Homepage layout
 *
 * Extends: global-tokens.css
 * Same width as AboutLayout (1500px max-width)
 *
 * Source: web-design/1.0-dashboard/dashboard-v2.css
 */

@import url('/assets/css/tokens/global-tokens.css');

:root {
  /* ============================================
     LAYOUT - Dashboard (Same as About)
     ============================================ */
  --page-max-width: 1500px;
  --page-width-content: 1400px;

  /* Margins - from design */
  --margin-top: 2.5rem;                   /* 40px */
  --margin-horizontal: 3rem;              /* 48px */
  --margin-horizontal-mobile: 1.5rem;     /* 24px */

  /* Panel spacing */
  --panel-gap: 2rem;                      /* 32px gap between panels */
  --header-gap: 1.5rem;                   /* 24px gap in header */


  /* ============================================
     HEADER TOKENS
     ============================================ */
  --header-side-width: 180px;             /* Logo and nav column width */
  --header-banner-height: 200px;
  --header-logo-max-height: 180px;


  /* ============================================
     STORY FRAGMENT TOKENS
     ============================================ */
  --story-fragment-ratio: 3 / 4;
  --story-fragment-font-size: 1.33rem;    /* ~21px */
  --story-fragment-line-height: 1.4;
  --story-fragment-logo-height: 160px;

  /* Story fragment padding - from design (optimized for log-book-empty.png) */
  --sf-padding-top: 115px;
  --sf-padding-bottom: 195px;
  --sf-padding-left: 195px;
  --sf-padding-right: 145px;


  /* ============================================
     GAME UPDATE PANEL TOKENS
     ============================================ */
  --update-panel-radius: 8px;
  --update-font-size-meta: 0.8125rem;     /* 13px */
  --update-font-size-description: 0.875rem; /* 14px */
}