// Theme colours.
// Override css variables in "assets/sass/_custom.scss"

:root {
  // Base colours.
  --color-black:                  oklch(1% 0.01 0);
  --color-nearblack:              oklch(25% 0.01 0);
  --color-grey-700:               oklch(38% 0 0);
  --color-grey-600:               oklch(49% 0 0);
  --color-grey-500:               oklch(60% 0 0);
  --color-grey-400:               oklch(71% 0 0);
  --color-grey-300:               oklch(80% 0 0);
  --color-grey-200:               oklch(89% 0 0);
  --color-grey-100:               oklch(95% 0 0);
  --color-nearwhite:              oklch(98% 0 0);
  --color-white:                  oklch(100% 0 0);
  --color-red:                    oklch(65% 0.2 24);
  --color-yellow:                 oklch(65% 0.12 80);
  --color-green:                  oklch(65% 0.19 138);
  --color-blue:                   oklch(65% 0.16 247);

  // Transparent colours.
  --color-black-60:               oklch(0% 0 0 / 0.6);
  --color-black-40:               oklch(0% 0 0 / 0.4);
  --color-black-20:               oklch(0% 0 0 / 0.2);
  --color-black-10:               oklch(0% 0 0 / 0.1);
  --color-white-20:               oklch(100% 0 0 / 0.2);
  --color-white-10:               oklch(100% 0 0 / 0.1);

  // Brand colours.
  --color-brand:                  var(--color-nearblack);
  --color-brand-alt:              var(--color-grey-500);
  --color-brand-light:            var(--color-grey-300);
  --color-brand-dark:             var(--color-grey-700);

  // Text colours.
  --color-text:                   var(--color-black);
  --color-text-bg:                var(--color-white);
  --color-text-meta:              var(--color-grey-600);
  --color-headings:               var(--color-nearblack);
  --color-code:                   var(--color-nearblack);

  // Link colours.
  --color-link:                   var(--color-brand);
  --color-link-visited:           var(--color-brand);
  --color-link-hover:             var(--color-brand-alt);
  --color-link-active:            var(--color-red);
  --color-link-inverted:          var(--color-white);
  --color-link-visited-inverted:  var(--color-white);
  --color-link-hover-inverted:    var(--color-white);
  --color-link-active-inverted:   var(--color-red);

  // Button colours.
  --color-button:                 var(--color-brand);
  --color-button-hover:           var(--color-brand-alt);
  --color-button-text:            var(--color-white);
  --color-button-text-hover:      var(--color-white);
  --color-button-disabled:        var(--color-grey-400);

  // Border colours.
  --color-border:                 var(--color-brand);
  --color-border-light:           var(--color-brand-light);
  --color-border-dark:            var(--color-brand-dark);

  // Background colours.
  --color-header-bg:              var(--color-white);
  --color-body-bg:                var(--color-white);
  --color-footer-bg:              var(--color-white);
  --color-backdrop:               var(--color-grey-100);

  // Mobil menu colours.
  --color-mobile-menu:            var(--color-brand);
  --color-mobile-menu-cover:      var(--color-black-20);

  // Form colours.
  --color-accent:                 var(--color-brand);

  // Row (e.g. in table) colours.
  --color-row-header:             transparent;
  --color-row-odd:                var(--color-nearwhite);
  --color-row-even:               transparent;

  // Status colours.
  --color-info:                   var(--color-blue);
  --color-info-bg:                oklch(from var(--color-blue) 100% 0.03 h);
  --color-success:                 var(--color-green);
  --color-success-bg:              oklch(from var(--color-green) 100% 0.03 h);
  --color-warning:                var(--color-yellow);
  --color-warning-bg:             oklch(from var(--color-yellow) 100% 0.03 h);
  --color-error:                  var(--color-red);
  --color-error-bg:               oklch(from var(--color-red) 100% 0.03 h);

  // Highlight colours.
  --color-highlight:              var(--color-brand-alt);
  --color-mark-highlight:         var(--color-red);
}