/*
 * CSS Properties Ui
 *
 */

:root {
  // Typography Family
  --font-family-default: 'DNB', sans-serif;
  --font-family-heading: var(--font-family-default);
  --font-family-monospace: 'DNBMono', 'Menlo', 'Consolas', 'Roboto Mono',
    'Ubuntu Monospace', 'Noto Mono', 'Oxygen Mono', 'Liberation Mono',
    monospace;

  // Typography Weights
  --font-weight-default: normal;
  --font-weight-basis: normal;
  --font-weight-regular: normal;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  // Typography Sizes
  --font-size-x-small: 0.875rem; // 14px
  --font-size-small: 1rem; // 16px
  --font-size-basis: 1.125rem; // 18px
  --font-size-basis--em: 1em; // 16px
  --font-size-lead: var(--font-size-medium); // 20px
  --font-size-medium: 1.25rem; // 20px
  --font-size-large: 1.625rem; // 26px
  --font-size-x-large: 2.125rem; // 34px
  --font-size-xx-large: 3rem; // 48px

  // Typography Line heights
  --line-height-xx-small--em: 1em; // 16px
  --line-height-x-small: 1.125rem; // 18px
  --line-height-small: 1.25rem; // 20px
  --line-height-basis: 1.5rem; // 24px
  --line-height-basis--em: 1.333em; // 1.33333333333*18 = 24
  --line-height-lead: 1.5rem; // 24px
  --line-height-medium: 2rem; // 32px
  --line-height-large: 2.5rem; // 40px
  --line-height-x-large: 3.5rem; // 56px
  --line-height-xx-large: var(--line-height-x-large); // 56px

  // UX colors
  --color-mint-green-50: #d2f0e9;
  --color-mint-green-25: #e9f8f4;
  --color-mint-green-12: #f4fbf9;
  --color-sea-green-30: #b3d5d5;
  --color-accent-yellow-30: #feebc1;
  --color-signal-orange: #ff5400;
  --color-fire-red: #dc2a2a;
  --color-success-green: #007b5e;
  --color-fire-red-8: #fdeeee;
  --color-black: #000;
  --color-black-80: #333;
  --color-black-55: #737373;
  --color-black-20: #ccc;
  --color-black-8: #ebebeb;
  --color-black-3: #f8f8f8;
  --color-white: #fff;

  // Undefined
  --color-black-border: #cdcdcd;
  --color-black-background: #fafafa;

  // Profile colors
  --color-sea-green: #007272;
  --color-mint-green: #a5e1d2;
  --color-summer-green: #28b482;
  --color-emerald-green: #14555a;
  --color-ocean-green: #00343e;
  --color-accent-yellow: #fdbb31;
  --color-indigo: #23195a;
  --color-violet: #6e2382;
  --color-sky-blue: #4bbed2;
  --color-lavender: #f2f2f5;
  --color-sand-yellow: #fbf6ec;
  --color-pistachio: #f2f4ec;

  // Unused Profile colors
  --color-mint-green-alt: #ebfffa;
  --color-indigo-medium: #6e6491;
  --color-indigo-light: #b9afc8;
  --color-violet-medium: #a06eaf;
  --color-violet-light: #cfb9d7;
  --color-sky-blue-medium: #87d2e1;
  --color-sky-blue-light: #c3ebf0;

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

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

  // Shadow
  --shadow-default: 0 8px 16px rgb(51 51 51 / 8%);
  --shadow-default-x: 0;
  --shadow-default-y: 8px;
  --shadow-default-blur-radius: 16px;
  --shadow-default-color: rgb(51 51 51 / 8%);
  --shadow-sharp: 0 1px 6px rgb(0 0 0 / 16%);
  --shadow-sharp-x: 0;
  --shadow-sharp-y: 1px;
  --shadow-sharp-blur-radius: 6px;
  --shadow-sharp-color: rgb(0 0 0 / 16%);

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

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

  // dnb ui brand internal colors
  // TODO: remove when design tokens are ready
  --internal-color-background-selected-subtle: #e4eed7;
}