$mobile-breakpoint: 420px;

// Default colour variants
$color-page-background: lighten($gray-100, 3%);
$color-button-secondary-hover-background: darken($color-page-background, 5);

$color-button-primary-background: #008A00;
$color-button-primary-text: $white;
$color-button-primary-hover-background: #006400;
$color-button-primary-hover-text: $white;

$color-message-error: #71141f;
$color-message-warning: #856404;

// Dark Mode color variants
$dark-color-field-background: #4F5861;
$dark-color-field-border: #4F5861;
$dark-color-field-text: $white;
$dark-color-form-background: #3E464E;
$dark-color-form-text: $white;
$dark-color-link-primary: $gray-200;
$dark-color-message-error: #DA273B;
$dark-color-message-warning: #FFA500;
$dark-color-page-background: #4F5861;
$dark-color-page-text: $white;

$dark-color-button-secondary-hover-background: lighten($dark-color-page-background, 5);
$dark-color-button-secondary-text: $dark-color-link-primary;
$dark-color-button-secondary-hover-text: $dark-color-link-primary;
$dark-color-button-primary-background: #F6C445;
$dark-color-button-primary-text: $dark-color-form-background;
$dark-color-button-primary-hover-background: #E0A800;
$dark-color-button-primary-hover-text: $dark-color-button-primary-text;

$border-radius-form: 4px;
$border-radius-field: 3px;
$box-shadow-form: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

$sizing-app-brand-max-height: 150px;
$sizing-app-brand-max-width: 300px;
$sizing-content-width: 330px;

$spacing-app-brand: 30px;
$spacing-field-content: 8px;
$spacing-form: 30px 20px 40px;
$spacing-form-desktop: 30px 30px 40px;
$spacing-form-controls: 20px;
$spacing-form-label-bottom: 5px;
$spacing-silverstripe-brand: 30px;
$spacing-submit-content: 10px 20px;

:root {
  --color-button-secondary-background: transparent;
  --color-button-secondary-hover-background: #{$color-button-secondary-hover-background};
  --color-button-secondary-text: #{$link-color};
  --color-button-secondary-hover-text: #{$link-color};

  --color-button-primary-background: #{$color-button-primary-background};
  --color-button-primary-hover-background: #{$color-button-primary-hover-background};
  --color-button-primary-text: #{$color-button-primary-text};
  --color-button-primary-hover-text: #{$color-button-primary-hover-text};

  --color-field-background: #{$white};
  --color-field-border: #{$gray-200};
  --color-field-text: #{$gray-800};
  --color-form-background: #{$white};
  --color-form-text: #{$gray-700};
  --color-link-primary: #{$link-color};
  --color-message-error: #{$color-message-error};
  --color-message-warning: #{$color-message-warning};
  --color-page-background: #{$color-page-background};
  --color-page-text: #{$gray-800};

  --border-radius-form: #{$border-radius-form};
  --border-radius-field: #{$border-radius-field};
  --box-shadow-form: #{$box-shadow-form};

  --sizing-app-brand-max-height: #{$sizing-app-brand-max-height};
  --sizing-app-brand-max-width: #{$sizing-app-brand-max-width};
  --sizing-content-width: #{$sizing-content-width};

  --spacing-app-brand: #{$spacing-app-brand};
  --spacing-field-content: #{$spacing-field-content};
  --spacing-form: #{$spacing-form};
  --spacing-form-desktop: #{$spacing-form-desktop};
  --spacing-form-controls: #{$spacing-form-controls};
  --spacing-form-label-bottom: #{$spacing-form-label-bottom};
  --spacing-silverstripe-brand: #{$spacing-silverstripe-brand};
  --spacing-submit-content: #{$spacing-submit-content};

  @media (prefers-color-scheme: dark) {
    --color-button-primary-background: #{$dark-color-button-primary-background};
    --color-button-primary-hover-background: #{$dark-color-button-primary-hover-background};
    --color-button-primary-text: #{$dark-color-button-primary-text};
    --color-button-primary-hover-text: #{$dark-color-button-primary-hover-text};

    --color-button-secondary-background: transparent;
    --color-button-secondary-hover-background: #{$dark-color-button-secondary-hover-background};
    --color-button-secondary-text: #{$dark-color-button-secondary-text};
    --color-button-secondary-hover-text: #{$dark-color-button-secondary-hover-text};

    --color-field-background: #{$dark-color-field-background};
    --color-field-border: #{$dark-color-field-border};
    --color-field-text: #{$dark-color-field-text};
    --color-form-background: #{$dark-color-form-background};
    --color-form-text: #{$dark-color-form-text};
    --color-link-primary: #{$dark-color-link-primary};
    --color-message-error: #{$dark-color-message-error};
    --color-message-warning: #{$dark-color-message-warning};
    --color-page-background: #{$dark-color-page-background};
    --color-page-text: #{$dark-color-page-text};
  }
}