/* ==========================================================================
   Infobox — CSS Custom Properties
   All design tokens from the brand design brief.
   ========================================================================== */

:root {
  /* Brand colours */
  --color-red:        #CC2229;
  --color-blue:       #1B6BB0;
  --color-green:      #4F9A32;
  --color-silver:     #595959;
  --color-charcoal:   #2B2B2B;
  --color-off-white:  #F5F5F3;
  --color-white:      #FFFFFF;
  --color-dark-panel: #1A1F2E;

  /* Semantic colours */
  --color-text-primary:    var(--color-charcoal);
  --color-text-secondary:  var(--color-silver);
  --color-text-inverse:    var(--color-white);
  --color-bg-page:         var(--color-off-white);
  --color-bg-card:         var(--color-white);
  --color-bg-dark:         var(--color-dark-panel);
  --color-action:          var(--color-blue);
  --color-action-hover:    #155a96;
  --color-success:         var(--color-green);
  --color-alert:           var(--color-red);

  /* Typography */
  --font-display: 'Inter', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Type scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --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;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Borders & Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;
  --border-subtle:  1px solid rgba(43, 43, 43, 0.1);
  --border-strong:  1px solid rgba(43, 43, 43, 0.25);
  --border-accent:  2px solid var(--color-blue);

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.14);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* Layout */
  --max-width:     1200px;
  --gutter:        1.5rem;

  /* Breakpoints (for reference — used in media queries) */
  /* --bp-sm:   640px;  */
  /* --bp-md:   768px;  */
  /* --bp-lg:   1024px; */
  /* --bp-xl:   1280px; */
}