/* The site design's colors (design 3C), as variables. Loaded first by
   layouts.app. Marketing's "Design Colors" fields override the base colors
   (App\Services\DesignColors), and only then are the shades below
   recomputed from them, so until a color is changed the site looks exactly
   as designed. */
:root {
    /* Base colors - one Marketing field each. */
    --np-deep: #08313f;
    --np-teal: #0d6282;
    --np-gold: #deb120;
    --np-yellow: #ffc800;
    --np-find: #008f96;
    --np-page: #fffdf6;
    --np-business-bg: #e1eef3;
    --np-quote-bg: #e9ece8;
    --np-reviews-bg: #f7f1de;
    --np-heading: #08313f;
    --np-text: #1e3a44;

    /* Shades of the base colors. */
    --np-deep-dark: #062a37;
    --np-teal-dark: #0a4a62;
    --np-teal-tint: #cde9f1;
    --np-teal-soft: #7ab7bd;
    --np-on-dark: #d4ecf0;
    --np-on-dark-strong: #e9f4f6;
    --np-on-dark-faint: #9fc4cf;
    --np-rail-bg: #eef6f9;
    --np-rail-border: #d6e7ed;
    --np-rail-pressed: #d5e7ee;
    --np-rail-line: #e3eef2;
    --np-gold-light: #f1d36b;
    --np-gold-bright: #e9c447;
    --np-gold-dark: #b8901a;
    --np-gold-deeper: #9a7710;
    --np-gold-shadow: #8a6a0e;
    --np-gold-pale: #f3d978;
    --np-gold-hover-top: #f0cf58;
    --np-gold-hover: #e3b82a;
    --np-yellow-dark: #d6a800;
    --np-text-muted: #4c6670;
    --np-heading-soft: #0a3e52;
    --np-text-soft: #3c5a66;
    --np-badge: #008b94;
    --np-badge-dot: #0d4f6e;
    --np-teal-alt: #0e6280;
}