/*
 * Pontos Betta - Style Guide & Design Tokens
 * ============================================
 * Canonical reference for all visual design decisions.
 * Imported by all layouts (main, auth, admin).
 *
 * COLORS (defined in Tailwind config):
 *   --betta-bg:            #3d3d3d   (page background)
 *   --betta-card:          #4a4a4a   (card surface)
 *   --betta-dark:          #2d2d2d   (header, inputs, deep surfaces)
 *   --betta-yellow:        #ffe600   (primary accent / CTA)
 *   --betta-yellow-hover:  #e6cf00   (accent hover state)
 *
 * TYPOGRAPHY:
 *   Font family:   Inter, ui-sans-serif, system-ui, -apple-system, sans-serif
 *   Weights used:  400 (body), 500 (medium), 600 (semibold), 700 (bold)
 *
 * COMPONENTS               | Tailwind Classes
 * -------------------------+--------------------------------------------------
 * Card (default)           | bg-betta-card rounded-2xl p-5 shadow-md
 * Card (highlight/yellow)  | bg-betta-yellow text-gray-900 rounded-2xl p-5 shadow-lg
 * Card (empty state)       | bg-betta-card rounded-2xl p-5 shadow-md text-center text-gray-400
 * Card (with image)        | bg-betta-card rounded-2xl shadow-md overflow-hidden  (+content p-5)
 * Card (auth form)         | bg-betta-card rounded-2xl shadow-md p-5
 *
 * SPACING:
 *   Card padding:          p-5       (20px)
 *   Card gap (between):    mb-4      (16px)
 *   Section gap:           mb-6      (24px)
 *   Grid gap:              gap-4     (16px)
 *   Page title margin:     mb-4      (16px)
 *   Section title margin:  mb-3      (12px)
 *
 * BORDER RADIUS:
 *   Cards:                 rounded-2xl  (16px)
 *   Buttons:               rounded-lg   (8px)
 *   Inputs:                rounded-lg   (8px)
 *   Badges/pills:          rounded      (4px)
 *
 * SHADOWS:
 *   Default card:          shadow-md
 *   Highlight card:        shadow-lg
 *   Header:                shadow-md
 *
 * TEXT STYLES:
 *   Page title:            text-xl font-semibold text-white mb-4
 *   Section title:         text-lg font-semibold text-white mb-3
 *   Label / meta:          text-xs text-gray-400
 *   Date / tertiary:       text-xs text-gray-500
 *   Body text:             text-sm text-white
 *
 * BUTTONS:
 *   Primary:               w-full bg-betta-yellow text-gray-900 py-2.5 px-4 rounded-lg
 *                          hover:bg-betta-yellow-hover transition font-bold
 *   Tap target:            min ~44px height (py-2.5 on text-base = ~44px per Apple HIG)
 */

/* Base font — applied via Tailwind fontFamily.sans config + Google Fonts link */