@use 'variables.tokens' as *;
@forward 'variables.tokens';

// --------
// -- Variables
//    These variables are not part of the design tokens, as they do not have a
//    corresponding value assigned to them. They are still used throughout the
//    design system to allow for easy customization while maintaining correct
//    style inheritance.
// --------

$cat-font-family-head: var(--cat-font-family-head);
$cat-font-color-head: rgb(var(--cat-font-color-head));
$cat-font-color-mono: rgb(var(--cat-font-color-mono));

// --------
// -- Spacings
// --------

$cat-head-margin-bottom: 1rem;
$cat-body-margin-bottom: 2rem;
$cat-nav-padding-horizontal: 0.75rem;

// --------
// -- Typography
// --------

$cat-mark-color: cat-token('color.theme.primary.bg', 0.2);
/* stylelint-disable value-keyword-case */
$font-fallback-base:
  system-ui,
  -apple-system,
  'Segoe UI',
  Roboto,
  'Helvetica Neue',
  'Noto Sans',
  'Liberation Sans',
  Arial,
  sans-serif !default;
$font-fallback-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
$font-fallback-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
/* stylelint-enable value-keyword-case */

// --------
// -- Elevations
// --------

$cat-elevation-transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
$cat-elevation: (
  0: none,
  1: (
    0 1px 2px rgba(27, 31, 38, 5%)
  ),
  2: (
    0 1px 2px rgba(27, 31, 38, 6%),
    0 1px 3px rgba(27, 31, 38, 10%)
  ),
  3: (
    0 2px 4px -2px rgba(27, 31, 38, 6%),
    0 4px 8px -2px rgba(27, 31, 38, 10%)
  ),
  4: (
    0 4px 6px -2px rgba(27, 31, 38, 3%),
    0 12px 16px -4px rgba(27, 31, 38, 8%)
  ),
  5: (
    0 8px 8px -4px rgba(27, 31, 38, 3%),
    0 20px 24px -4px rgba(27, 31, 38, 8%)
  ),
  6: (
    0 24px 48px -12px rgba(27, 31, 38, 18%)
  ),
  7: (
    0 32px 64px -12px rgba(27, 31, 38, 14%)
  )
);