@use '@rasahq/sass-tabula/fonts/graphik';
@use '@rasahq/sass-tabula/scss/fonts/fira-code';
// @use '@rasahq/sass-tabula/fonts/monolisa';

$fonts: (
  sans: graphik.$font-spec,
  mono: fira-code.$font,
);

$outer-x-max: 2.5rem;
$bp-xs: 24;
$bp-xl: 84;

$root: (
  global-columns: 6,
  outer-top: 2rem,
  outer-bottom: 2rem,
  outer-right: lerp(($bp-xs*1rem: 1rem, $bp-xl*1rem: $outer-x-max)),
  outer-left:  lerp(($bp-xs*1rem: 1rem, $bp-xl*1rem: $outer-x-max)),
  inner-x: 1.5rem,
  inner-y: 2rem,
  inner-mods: (
    xs: 0.4,
    s: 0.7,
    m: 1,
    l: 1.3,
    xl: 1.6,
    xxl: 2,
  ),
  font-mods: (
    sans: (
      xs: 14px,
      s: 15px,
      m: 16px,
      l: 22px,
      xl: 26px,
      xxl: 32px,
    ),
    mono: (
      xs: 12px,
    ),
  )
);

$media: (
  xs: (
    breakpoint: $bp-xs*1em,
    font-mods: (
      sans: (
        s: 16px,
        m: 18px,
        l: 24px,
        xl: 28px,
        xxl: 34px,
      ),
      mono: (
        xs: 12px,
      ),
    )
  ),
  s: (
    breakpoint: 36em,
    inner-x: 2rem,
    inner-mods: (),
    font-mods: (
      sans: (
        // m: 18px,
        l: 24px,
        xl: 32px,
        xxl: 38px,
      ),
    ),
  ),
  m: (
    breakpoint: 48em,
    inner-x: 2.5rem,
  ),
  ml: (
    breakpoint: 56em,
    global-columns: 12,
    inner-x: 2.5rem,
    inner-y: 2rem,
    inner-mods: (
      xs: 0.4,
      s: 0.7,
      m: 1,
      l: 2,
      xl: 3,
      xxl: 4,
    ),
    font-mods: (
      sans: (
        s: 18px,
        m: 22px,
        l: 26px,
        xl: 32px,
        xxl: 44px,
      ),
    ),
  ),

  l: (
    breakpoint: 64em,
    inner-x: 3rem,
  ),
  xl: (
    breakpoint: $bp-xl*1em,
    outer-right: $outer-x-max,
    outer-left: $outer-x-max,
  )
);