/* =========================================================================
   Discover Ghana — theme.css
   Design tokens. Single source of truth for colour, type, spacing.
   Based on IBM Carbon principles · customised for the Ghana national brand.
   ========================================================================= */

:root {
  /* ---- Brand colours ---------------------------------------------------- */
  --ghana-green:   #006400;
  --ghana-yellow:  #FFCD00;
  --ghana-red:     #CE1126;

  --primary:        #006400;
  --primary-hover:  #004d00;
  --primary-dark:   #003300;
  --secondary:      #FFCD00;
  --secondary-hover:#e6b900;

  /* ---- Neutrals --------------------------------------------------------- */
  --black:        #000000;
  --white:        #FFFFFF;
  --gray-10:      #F8F9FA;
  --gray-20:      #F4F4F4;
  --gray-30:      #E0E0E0;
  --gray-50:      #8D8D8D;
  --gray-70:      #525252;
  --gray-90:      #262626;

  /* ---- Semantic --------------------------------------------------------- */
  --background:     #FFFFFF;
  --surface:        #F8F9FA;
  --surface-alt:    #F4F4F4;
  --text-primary:   #161616;
  --text-secondary: #525252;
  --text-inverse:   #FFFFFF;
  --border:         #E0E0E0;

  --success: #1E7E34;
  --info:    #0F62FE;
  --danger:  #CE1126;
  --warning: #FFCD00;

  /* ---- Typography ------------------------------------------------------- */
  --font-family: 'Poppins', system-ui, -apple-system, sans-serif;

  --fs-h1: 56px;
  --fs-h2: 42px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-label: 14px;
  --fs-caption: 12px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---- Spacing (Carbon 8px base grid) ----------------------------------- */
  --spacing-01: 4px;
  --spacing-02: 8px;
  --spacing-03: 12px;
  --spacing-04: 16px;
  --spacing-05: 24px;
  --spacing-06: 32px;
  --spacing-07: 48px;
  --spacing-08: 64px;
  --spacing-09: 96px;

  /* ---- Radius & elevation ---------------------------------------------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow:    0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);

  /* ---- Layout ----------------------------------------------------------- */
  --header-h:   64px;
  --sidebar-w:  256px;
  --container:  1200px;

  --transition: 160ms ease;
}