/*
 * CSS Properties Sbanken
 *
 */

:root {
  // Typography Family
  --sb-font-family-default: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  --sb-font-family-heading:
    'MaisonNeueHeadings', 'Roboto', 'Helvetica', 'Arial', sans-serif;

  // Typography Weights
  // TODO: Do we need 3 different "normals"? Which to use when?
  --sb-font-weight-default: normal;
  --sb-font-weight-basis: normal;
  --sb-font-weight-regular: normal;
  --sb-font-weight-medium: 500;
  --sb-font-weight-bold: 700;

  // Typography Sizes
  --sb-font-size-x-small: 0.75rem; // 12px
  --sb-font-size-small: 0.875rem; // 14px
  --sb-font-size-basis: 1rem; // 16px
  --sb-font-size-basis--em: 1em;
  --sb-font-size-lead: var(--font-size-medium); // 20px
  --sb-font-size-medium: 1.25rem; // 20px
  --sb-font-size-medium--plus: 1.625rem; // 26px extra for Sbanken theme
  --sb-font-size-large: 2rem; // 32px
  --sb-font-size-x-large: 2.375rem; // 38px
  --sb-font-size-xx-large: 3rem; // 48px

  // Typography Line heights
  --sb-line-height-x-small: 1.125rem;
  --sb-line-height-small: 1.25rem;
  --sb-line-height-basis: 1.5rem;
  --sb-line-height-basis--em: 1.5em; // 1.5*16 = 24px
  --sb-line-height-lead: 1.75rem;
  --sb-line-height-medium: 2rem;
  --sb-line-height-large: 2.375rem;
  --sb-line-height-x-large: 2.75rem;
  --sb-line-height-xx-large: 3.375rem;

  // UX colors
  --sb-color-black: #000;
  --sb-color-text: #18172a;
  --sb-color-gray-dark-3: #3a3a4a;
  --sb-color-gray-dark-3-neutral: #3e3e4a;
  --sb-color-gray-dark-2: #4a4a5b;
  --sb-color-gray-dark-2-neutral: #656472;
  --sb-color-gray-dark: #666578;
  --sb-color-gray-dark-neutral: #9494a3;
  --sb-color-gray: #bbbbce;
  --sb-color-gray-neutral: #bdbdc6;
  --sb-color-gray-light: #d9d9e4;
  --sb-color-gray-light-2: #ebebf2;
  --sb-color-gray-light-3: #f9f9fd;

  // Primary colors
  --sb-color-purple: #1c1b4e;
  --sb-color-purple-alternative: #222163;
  --sb-color-green: #92eecd;
  --sb-color-white: #fff;

  // Secondary colors
  --sb-color-red: #d8134b;
  --sb-color-magenta: #ff3c64;
  --sb-color-orange: #ff5b44;
  --sb-color-yellow-dark: #f7bf16;
  --sb-color-yellow: #ffef57;
  --sb-color-green-dark-3: #00785b;
  --sb-color-green-dark-2: #1e9f73;
  --sb-color-violet: #4e08bc;
  --sb-color-violet-light: #7129e2;
  --sb-color-blue-dark-2: #044ccc;
  --sb-color-blue-dark: #005cff;
  --sb-color-blue: #008eff;

  // Tertiary colors
  --sb-color-orange-light: #ff817b;
  --sb-color-orange-light-2: #ffd7d5;
  --sb-color-orange-light-3: #fff0ef;
  --sb-color-magenta-light: #ffb6d2;
  --sb-color-magenta-light-2: #ffdbe9;
  --sb-color-magenta-light-3: #fff5f9;
  --sb-color-yellow-light: #fff489;
  --sb-color-yellow-light-2: #fff9c4;
  --sb-color-yellow-light-3: #fffce5;
  --sb-color-green-dark: #64d7b4;
  --sb-color-green-light: #c8f6e5;
  --sb-color-green-light-2: #e5fff7;
  --sb-color-violet-light-2: #be99ff;
  --sb-color-violet-light-3: #e0d0ff;
  --sb-color-violet-light-4: #f1ebff;
  --sb-color-blue-light: #61b9ff;
  --sb-color-blue-light-2: #bfe3ff;
  --sb-color-blue-light-3: #ebf6ff;

  // Spacing
  --sb-spacing-x-small: 0.5rem;
  --sb-spacing-small: 1rem;
  --sb-spacing-medium: 1.5rem;
  --sb-spacing-large: 2rem;
  --sb-spacing-x-large: 3rem;
  --sb-spacing-xx-large: 3.5rem;

  // Layout
  --sb-layout-small: 40em; // 640
  --sb-layout-medium: 60em; // 960
  --sb-layout-large: 72em; // 1152
  --sb-layout-x-large: 80em; // 1280 (not documented yet)
  --sb-layout-xx-large: 90em; // 1440 (not documented yet)

  // Shadow
  --sb-shadow-small: 0 2px 4px rgba(38 35 66 / 12%);
  --sb-shadow-medium: 0 5px 20px rgba(38 35 66 / 10%);
  --sb-shadow-large: 0 5px 20px rgba(38 35 66 / 20%);
  --sb-shadow-hover: 0 20px 40px rgba(38 35 66 / 20%);

  // Easing
  --sb-easing-default: cubic-bezier(0.42, 0, 0, 1);

  // Width
  --prose-max-width: 60ch;
}