// -----------------------------------------------------------------------------
// This file contains all application-wide Sass variables.
// -----------------------------------------------------------------------------

:root, [data-theme="default"] {
  --color-primary: rgb(18, 120, 175);
  --color-inline-code: hsl(0, 81%, 35%);
  
  /* color contrasts */
  --color-bg: rgb(248, 248, 248);
  --color-contrast-lower: hsl(0, 0%, 95%);
  --color-contrast-low: hsl(240, 1%, 83%);
  --color-contrast-medium-low: hsl(240, 1%, 65%);
  --color-contrast-medium: hsl(240, 1%, 48%);
  --color-contrast-medium-high: hsl(240, 2%, 34%);
  --color-contrast-high: hsl(240, 4%, 20%);
  --color-contrast-higher: black;

  --color-text: var(--color-contrast-high);

  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --font-size-md: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
  --font-size-lg: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
  --font-size-xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
  --font-size-xxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
  --font-size-xxxl: clamp(3.05rem, 3.54vw + 2.17rem, 5rem);
}

[data-theme] {
  background-color: var(--color-bg);
  color: var(--color-contrast-high);
}

[data-theme="dark"] {
  --color-primary: rgb(86, 184, 237);
  --color-inline-code: hsl(0, 81%, 70%);
  
  /* color contrasts */
  --color-bg: rgb(18, 18, 18);
  --color-contrast-lower: hsl(240, 6%, 15%);
  --color-contrast-low: hsl(252, 4%, 25%);
  --color-contrast-medium-low: hsl(240, 2%, 34%);
  --color-contrast-medium: hsl(240, 1%, 57%);
  --color-contrast-medium-high: hsl(240, 1%, 65%);
  --color-contrast-high: hsl(0, 0%, 89%);
  --color-contrast-higher: white;

  --color-text: var(--color-contrast-high);
}


// Fonts

/// Regular font family
/// @type List
$text-font-stack: 'Roboto', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

/// Code (monospace) font family
/// @type List
$code-font-stack: 'Courier New', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Monaco', monospace;


// Containers

/// Container's maximum width
/// @type Length
$max-width: 1180px;


// Responsiveness

/// Breakpoints map
/// @prop {String} keys - Keys are identifiers mapped to a given length
/// @prop {Map} values - Values are actual breakpoints expressed in pixels
$breakpoints: (
  'x-small': 320px,
  'small': 576px,
  'medium': 768px,
  'm-large': 900px,
  'large': 1024px,
  'x-large': 1200px,
);


// Assets

/// Relative or absolute URL where all assets are served from
/// @type String
/// @example scss - When using a CDN
///   $base-url: 'https://cdn.example.com/assets/';
$base-url: '/assets/';