/* ===========================================================================
   YOUR OWN CSS GOES HERE
   ===========================================================================

   This file is loaded AFTER everything else, so anything you put here wins.
   It is also the one CSS file a theme update will never overwrite, so it is
   the safe place for your own tweaks.

   The file is intentionally almost empty. Add what you like below.

   USEFUL THINGS TO KNOW
   ---------------------
   Colours are available as variables, and they automatically become the
   light-mode colour when the visitor switches modes. So write:

       .my-thing { color: var(--wp--preset--color--primary); }

   and NOT:

       .my-thing { color: #2dd4bf; }          <-- wrong, breaks light mode

   The colour variables are:
       --wp--preset--color--base          page background
       --wp--preset--color--surface       cards and panels
       --wp--preset--color--surface-2     raised / hover
       --wp--preset--color--contrast      main text
       --wp--preset--color--muted         quieter text
       --wp--preset--color--primary       teal accent
       --wp--preset--color--primary-deep  darker teal
       --wp--preset--color--secondary     green
       --wp--preset--color--on-primary    text on a teal button
       --wp--preset--color--border        hairlines

   Spacing steps (small to large):
       --wp--preset--spacing--10  20  30  40  50  60  70

   To target light mode only:
       :root[data-theme="light"] .my-thing { ... }

   =========================================================================== */

/* --- add your CSS below this line --- */