/* ==========================================================================
   FLOWVIC THEME — the ONLY place colours are defined.
   Change a value here and the whole website updates.
   (Two exceptions that cannot read CSS variables: favicon.svg and
   assets/images/og-image.png — see README, "Changing the colours".)
   ========================================================================== */

:root {
  /* Surfaces */
  --color-bg:            #FFFFFF; /* primary background */
  --color-bg-alt:        #F5F5F5; /* secondary / alternate sections */
  --color-dark:          #171717; /* dark sections + footer */

  /* Text */
  --color-text:          #171717; /* primary text */
  --color-text-muted:    #626262; /* secondary text */
  --color-on-dark:       #FFFFFF; /* text on dark sections */
  --color-on-dark-muted: #A3A3A3; /* secondary text on dark sections */

  /* Accent (deep red) — buttons, active states, key highlights */
  --color-accent:          #B42332;
  --color-accent-hover:    #961C29;
  --color-accent-contrast: #FFFFFF; /* text on top of the accent */
  --color-accent-on-dark:  #E5606E; /* accent used as text on dark (AA contrast) */

  /* Lines */
  --color-border:        #E8E8E8; /* hairlines on white */
  --color-border-strong: #D4D4D4; /* hairlines on light-grey sections */
  --color-border-dark:   #333333; /* hairlines on dark sections */

  /* Feedback */
  --color-error:         var(--color-accent);
  --color-success:       #1E6B45;

  /* Keyboard focus ring */
  --color-focus:         var(--color-accent);
}