/**
 * ABOUT TOKENS
 * Design tokens for About pages (wider layout, same as Dashboard)
 *
 * Extends: global-tokens.css (same as Dashboard)
 * Overrides: Width-related tokens, custom font
 *
 * Used by: AboutLayout
 */

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

:root {
  /* ============================================
     LAYOUT - About Pages (Independent Layout)
     ============================================ */

  /* Page structure - About pages independent layout */
  --page-max-width: 1500px;                     /* Container max-width */
  --page-width-content: 1400px;                 /* Content max-width */

  /* Margins */
  --margin-horizontal: 3rem;                    /* 48px */
  --margin-horizontal-mobile: 1.5rem;           /* 24px */
  --margin-top: 2.5rem;                         /* 40px */
  --margin-bottom: 3.75rem;                     /* 60px */

  /* ============================================
     TYPOGRAPHY - About Pages Custom Font
     ============================================ */

  /* Custom font token for About pages */
  --font-family-about: 'KoHo', 'Segoe UI', sans-serif;

  /* All other tokens inherited from stories-tokens.css:
     - Colors (text, background, UI)
     - Font sizes, line heights
     - Spacing (section spacing)
     - Breadcrumbs & Navigation
     - Responsive breakpoints
  */
}